Leading from font size and ratio
Body text at 16 px with a 1.5 ratio needs 24 px from one baseline to the next. You also get the space beyond the type size and its half, ready for mockups, email templates and print specs that cannot inherit a ratio. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Font size
- 16
- Ratio
- 1.5
- Leading px
- 24
- Extra leading px
- 8
- Half leading px
- 4
- Precision
- 10
This leading calculator turns a font size in CSS pixels and a unitless line-height ratio into exact baseline-to-baseline spacing in pixels—the classic typographic measure called leading—together with extra leading and half-leading for layout math. Designers and front-end developers still reach for this product constantly: body copy at sixteen pixels with a one point five ratio needs twenty-four pixels of leading; eighteen-pixel headings with a one point six ratio need twenty-eight point eight. The identity is fully deterministic: leading in pixels equals font size times ratio, extra leading is leading minus font size, and half-leading is half of that extra. There is no network call, no sampling, and no date-dependent shortcut—only finite arithmetic on two positive scalars.
What leading means and what this calculator returns
Leading is the vertical rhythm of text: the distance from one baseline to the next that printers, layout engines, and CSS line boxes use when stacking lines of a paragraph. The word comes from strips of lead once placed between metal type; in digital design the same idea is often written as line-height, yet many design briefs, editorial style guides, and type books still ask for leading in absolute units.
You may keep a unitless ratio in a token layer for inheritance, then materialize an absolute pixel value when you export fixed mockups, Figma specs, email templates, or print PDFs that cannot inherit. This calculator implements leading in pixels equals font size times ratio, which is exactly what a unitless line-height multiplies against the used font size.
It also reports extra leading—the space beyond the body size, leading minus font size—and half-leading, half of that extra, which matches how many layout engines split space above and below the glyphs inside a line box. There is no OpenType metrics lookup, no rem or em conversion, and no font-file analysis: those are separate problems.
Where pixel leading fits in design systems, CSS, and teaching
Product designers convert a modular type scale into absolute leading when they hand off mobile mockups, when email clients ignore unitless inheritance, or when a print PDF export freezes every measurement in pixels or points. Educators teaching typography and CSS fundamentals can show that a unitless ratio of one point five at sixteen pixels equals twenty-four pixels of baseline spacing, with eight pixels of extra leading and four pixels of half-leading, without relying on opaque browser DevTools rounding.
Accessibility reviewers sometimes need a quick check that body text meets a minimum absolute line spacing for long reading, even when the source token is still a ratio. Editorial and print teams that still specify leading in the traditional sense get the same numbers as CSS line-height products when the ratio is applied the same way.
Pair it with typography unit converters when you also need px to em or rem, and keep in mind that real rendering still depends on font metrics and box models once the pixel value leaves this calculator.
What you can do with it
CSS and component docs
Document Storybook or style-guide examples with exact leading px values that match unitless ratios used in production stylesheets.
FAQ
What does the leading calculator cost?
It is free in your browser on this page.
How is leading computed?
For example, 16 px at a ratio of 1.5 yields 24 px leading, 8 px extra, and 4 px half-leading.
What happens if font size is zero or negative?
Non-positive font size cannot define useful leading in this model.
Why are results rounded to a precision?
Default precision is 10 decimal places; you can set precision from 0 to 15.
Is leading the same as CSS line-height?
It is the same idea in absolute units. A unitless line-height multiplies the font size, and this tool returns exactly that product in pixels, which is what design briefs, style guides and type books usually ask for.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/str/leading-from-ratio \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"ratio":1.5}'const res = await fetch("https://api.kit.forhosting.com/str/leading-from-ratio", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"ratio": 1.5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/leading-from-ratio",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"ratio": 1.5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/leading-from-ratio", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"ratio":1.5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"ratio":1.5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/leading-from-ratio", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"font_size": 16,
"ratio": 1.5
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.leading_from_ratio",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Limits
max_abs_value | 1000000000000000 |
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
What leading means and what this calculator returns
You provide a positive font size in CSS pixels and a positive unitless ratio; the engine returns the normalized font size, the ratio, leading_px, extra_leading_px, half_leading_px, the method tag leading_from_ratio, the precision used for rounding, and a short formula reminder string. Invalid inputs raise invalid_input, including missing font size or ratio, non-finite values, magnitudes above the documented ceiling, and any non-positive font size or ratio, because zero or negative type cannot define a useful line box.
How font size and ratio are read and how results stay reproducible
Optional leading plus signs and scientific notation on numeric strings are allowed when they parse as finite decimals; embedded spaces, hex prefixes, and non-numeric tokens are rejected with a clear message so a bad cell does not become a wrong leading value. The ratio must also be positive: a multiplier of zero would collapse the line box, and a negative ratio is not a valid leading product in this model. The preferred field names are font_size for the size in CSS pixels and ratio for the unitless multiplier, but aliases such as fontSize, size, fs, and px for the size, and line_height_ratio, lineHeight, multiplier, lh, and leading_ratio for the ratio are accepted so spreadsheets, query strings, and typed forms can reuse one contract. Zero and negative font sizes always fail with invalid_input, matching the product rule that leading arithmetic is undefined for non-positive type. An optional precision field, with aliases decimals and dp, chooses how many decimal places to expose for all numeric outputs, defaulting to ten and capped at fifteen so JSON goldens stay stable across runtimes. Pair the free browser run on this page with the priced API when you need the identical mathematical result inside an automated pipeline or design-token build without re-implementing the multiply yourself.
Where pixel leading fits in design systems, CSS, and teaching
Front-end engineers use the same arithmetic when they generate CSS custom properties from a token JSON file, when they document a type ramp in Storybook, or when they write snapshot tests that expect leading of twenty-four for a sixteen-pixel body size with a one point five ratio. On this page the work runs entirely in your browser; through the API each successful lookup costs $0.002, failed validation is not charged, and nothing is stored after the response returns. That split—free interactive exploration and a priced, identical API—matches the rest of the KIT tier-A catalog and lets you move from a design critique to an automated token pipeline without changing the mathematical result.
Integration use cases
Design-token type ramps
From each step’s font size and a shared ratio, materialize absolute leading pixels plus extra and half-leading for Figma handoff, email CSS, and token JSON exports.
Deterministic CI fixtures
Generate reproducible leading_px results for unit tests, snapshot tests, and design-system build scripts without hand-written multiplies.
Technical questions
Is leading the same as CSS line-height?
When you use a unitless ratio, the product font_size × ratio is the baseline-to-baseline distance CSS calls line-height and traditional typography calls leading. This tool also reports extra and half-leading for layout math.