Utility · CSS unit tool
Line height calculator
unitless line-height = lineHeightPx ÷ fontSizePx. A 24px line box on 16px text is 1.5. Unitless values are recommended because they scale with each element's computed font-size instead of locking to a fixed pixel leading.
Result
1.500
24px ÷ 16px = 1.500
CSS snippet
line-height: 1.500;
Keyboard tip: press Tab or Shift+Tab to switch fields.
Why unitless wins
A unitless line-height like 1.5 is multiplied by each element's own font-size, so children inherit a sensible ratio rather than a fixed pixel value that may be wrong for their size.
Setting line-height in px or em can cause overlapping or overly loose text when font-sizes change—unitless avoids that entire class of bug.
Sensible leading targets
Body copy reads well around 1.5–1.6; large headings tighten to roughly 1.1–1.25 so multi-line titles do not feel airy.
Wider columns (longer measure) benefit from slightly looser leading; narrow columns can go a touch tighter without hurting readability.
Copy-ready examples
body { line-height: 1.5; }
h1 { line-height: 1.15; }Frequently asked questions
- What is a good line-height for body text?
- Around 1.5–1.6 unitless for paragraphs. Tighten to ~1.1–1.25 for large headings.
- Should line-height have a unit?
- Prefer unitless. It scales with each element's font-size, which keeps inherited text readable.
- Is line height calculator free to use?
- Yes. UnitCraft calculators are free and run entirely in your browser.
- Does UnitCraft send my input values to a server?
- No. Calculator inputs are processed locally in the browser tab.
- Can I copy the generated CSS output?
- Yes. Each tool provides copy-ready snippets so you can paste values directly into code.