Line height calculator
Body text at 16 px with a 1.5 ratio needs a 24 px line height. Enter any font size and ratio and get the pixel value to write into a fixed layout, a design spec or an email template. 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
- Unitless line-height ratio
- 1.5
- Line height px
- 24
- Precision
- 10
This line height calculator turns a font size in CSS pixels and a unitless line-height ratio into the resulting line height in pixels, the exact value you set as line-height when you prefer an absolute pixel stack rather than a pure unitless multiplier. 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 line height; eighteen-pixel headings with a one point six ratio need twenty-eight point eight pixels. The identity is fully deterministic: line height in pixels equals font size times ratio. There is no network call, no sampling, and no date-dependent shortcut — only finite arithmetic on two positive scalars.
What line height means and what this calculator returns
Line height is the vertical rhythm of text: the distance from baseline to baseline that browsers and layout engines use when stacking lines of a paragraph. In CSS you may write line-height as a unitless ratio such as one point five, as a percentage, or as an absolute length in pixels. Many design systems keep a unitless ratio in the token layer for inheritance, then materialize an absolute pixel value when they export fixed mockups, Figma specs, or email templates that cannot inherit.
This calculator implements the simple product line height in pixels equals font size times ratio, which is exactly what a unitless line-height multiplies against the used font size. There is no model of leading in print metal type, no OpenType metrics lookup, and no conversion between rem and em: those are separate problems. Non-positive ratios are likewise rejected so the result stays a positive pixel length.
Where pixel line heights fit in design systems, CSS, and teaching
Product designers convert a modular type scale into absolute line heights 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 CSS fundamentals can show that a unitless ratio of one point five at sixteen pixels equals twenty-four pixels without relying on opaque browser DevTools rounding.
Accessibility reviewers sometimes need a quick check that body text meets a minimum absolute line height for long reading, even when the source token is still a ratio. Pair it with typography unit converters when you also need px to em, and keep in mind that real rendering still depends on font metrics, half-leading, 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 line-height px values that match unitless ratios used in production stylesheets.
FAQ
What does the line height calculator cost?
It is free in your browser on this page.
How is line height computed?
For example, 16 px at a ratio of 1.5 yields 24 px.
What happens if font size is zero or negative?
Non-positive font size cannot define a useful line height in this model.
Does this convert rem or em units?
No. Font size is interpreted as CSS pixels and the ratio is unitless. Use a dedicated unit converter if you need rem or em.
Why are results rounded to a precision?
Default precision is 10 decimal places; you can set precision from 0 to 15.
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/hobby/line-height \
-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/hobby/line-height", {
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/hobby/line-height",
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/hobby/line-height", 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/hobby/line-height", 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": "hobby.line_height",
"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 line height 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, the computed line height in pixels, the method tag line_height, 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, because a zero or negative font size 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 line height. The ratio must also be positive: a multiplier of zero would collapse the line box, and a negative ratio is not a valid CSS line-height 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, and lh 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 line-height 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 line heights fit 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 line-height of twenty-four for a sixteen-pixel body size. 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 line-height pixels for Figma handoff, email CSS, and token JSON exports.
Deterministic CI fixtures
Generate reproducible line_height_px results for unit tests, snapshot tests, and design-system build scripts without hand-written multiplies.