Color & Typography
Line Height Calculator
Drag the sliders to set font size and leading and watch the preview change instantly. The numeric fields stay in sync when you need an exact value. Copy the CSS, and check whether the ratio suits the text size. Everything runs in your browser.
Adjust with sliders
liveSize the text is actually rendered at.
Unitless multiplier, for example 1.5. Drag to feel the leading change.
Used to convert to rem (default 16px).
Live preview
—Typography is the craft of endowing human language with a durable visual form, and line height is what keeps it comfortable to read.
Preview is capped at 48px so large sizes stay viewable; the computed values above are exact.
Line height
—Reverse: ratio from a line height
known valueUses the font size and root size above to recover the ratio.
How it works
A unitless line height is simply font-size × ratio. Because a unitless
number is inherited rather than recalculated, it is usually the safest choice for body
text. The same value can also be written in fixed units: px and
pt for the resolved height, em when the element’s own font
size applies, rem relative to the root size, and a percentage for the
ratio × 100. Drag the sliders to compare how font size and line height move
together; recommended ranges are shown for the current font size so you can tell
whether a ratio is comfortably readable or too tight.