CSS Line Height Tool
Values
Computed rows
| Role | Size | Ratio | line-height (unitless) | Line box |
|---|---|---|---|---|
| Display | 48px | 1.05 | 1.05 | 50.4px box |
| H1 | 36px | 1.2 | 1.2 | 43.2px box |
| H2 | 28px | 1.2 | 1.2 | 33.6px box |
| H3 | 22px | 1.2 | 1.2 | 26.4px box |
| Body | 16px | 1.5 | 1.5 | 24px box |
| Caption | 12.8px | 1.4 | 1.4 | 17.92px box |
Why unitless
A unitless value is inherited as a number and re-resolved against each element's font-size. A value in px or rem is inherited as a computed length — an h3 inside a paragraph then receives the paragraph's line box, which is usually wrong.
Use rem only when the leading must stay proportional to the root rather than the element (rare), and px only when the line box must be an exact multiple of a baseline grid.
.role-display { font-size: 3.0000rem; line-height: 1.05; }
.role-h1 { font-size: 2.2500rem; line-height: 1.2; }
.role-h2 { font-size: 1.7500rem; line-height: 1.2; }
.role-h3 { font-size: 1.3750rem; line-height: 1.2; }
.role-body { font-size: 1.0000rem; line-height: 1.5; }
.role-caption { font-size: 0.8000rem; line-height: 1.4; }You Might Also Need
The CSS line height tool writes the line-height declaration for every role in a small scale, and shows what each unit computes to at the chosen size. Four output units are offered, and the panel argues for one of them rather than leaving the choice to habit.
What is CSS Line Height Tool?
The CSS line height tool takes a body size, three leading values and an output unit, then writes the declarations for a six-role scale and reports what each one computes to.
The four output units look interchangeable and behave very differently the moment a value is inherited.
- Unitless, the default and the recommendation, is inherited as a number and re-resolved against each element's own font-size.
- rem makes the line box a fixed multiple of the root size, so a nested element keeps the root's leading rather than its own.
- px produces an exact length, and is the only mode that can guarantee a line box which is a whole number of pixels.
- percent computes against the element's font-size at the point of declaration and is then inherited as a computed length, so it looks like unitless but inherits like pixels.
The role set is derived from the body size rather than entered per role: Display at three times the body, H1 at 2.25, H2 at 1.75, H3 at 1.375, Body at one, and Caption at 0.8, with the display, heading and body leadings controlled separately and the caption's worked out as the body leading minus a tenth, floored at 1.35 so a tight body setting cannot shrink the caption below a usable leading. The table reports each role's size, its ratio, the line-height in the selected unit and the line box in pixels, which is the column that makes the unit choice visible: the same 1.5 ratio is a 24 pixel box on body text and a 72 pixel box on a display heading.
The case for unitless is inheritance, and it is worth understanding rather than copying. A unitless value is a ratio, so an element inside a paragraph resolves it against its own font size and keeps the same optical leading. A pixel or rem value is inherited as a finished length, so a heading inside a paragraph receives the paragraph's line box and its leading becomes an accident of where it sits in the tree. There are two exceptions the panel names: rem is defensible when the leading must stay proportional to the root rather than to the element, which is rare, and pixels are the right choice when the line box has to be an exact multiple of a vertical grid.
Four things about the scale are fixed rather than free, and each one is the reason another tool exists.
- The six roles sit at fixed multiples of the body size, so a scale with different steps has to be expressed by editing the exported classes.
- Three leading controls cover all six roles, which is enough for a small system and not enough for one where every level is tuned separately.
- The character estimate assumes half an em per character, so it is a sanity check rather than a measurement.
- Nothing checks the resulting line boxes against a baseline grid, which is where the grid tools take over.
The exported classes carry a size and a leading but no weight or tracking, since those belong to the roles rather than to the leading system. Read the computed column first, then choose the unit for the reason it is right rather than the one used last time.
How to use CSS Line Height Tool
- Set the body size and the body leading, since every other role is derived from those two values.
- Adjust the heading and display leadings and watch the line box column rather than the ratio column, because the box is what the layout meets.
- Choose the output unit deliberately: unitless for anything that inherits, pixels only when the box must be an exact length.
- Set the measure and read the characters-per-line estimate, then copy the declarations for the roles the page actually uses.
When to use CSS Line Height Tool vs related tools
Reach for it when a scale needs leading values rather than one global line-height, when a heading nested inside running text has picked up the wrong leading through inheritance, or when someone needs the argument for unitless stated in a form they can act on. The inheritance behaviour is the part to take away. For the leading values themselves the line height optimizer derives them from size and measure, the baseline grid calculator snaps the resulting boxes to a grid, and the CSS typography token generator exports sizes and leadings together as tokens.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.