Why unitless wins
line-height: 1.5 multiplies each element's own font size, so nested text scales correctly. line-height: 24px is fixed — a 32px heading inside the same block inherits 24px and looks cramped. Use unitless for anything that contains mixed type sizes.
Choosing a ratio
- Body text: 1.5–1.7 for comfortable reading
- Headings: 1.1–1.25 — tight leading reads as display type
- UI labels and buttons: 1.2–1.4
- Long-form articles: 1.6 with a measure of 60–75 characters
Line height and accessibility
WCAG 1.4.12 asks that text stays readable when users override spacing: line height at least 1.5× the font size, paragraph spacing 2× and letter spacing 0.12×. Unitless values are what make those overrides work.
Vertical rhythm
If your design uses a baseline grid, pick font sizes and line heights that are multiples of the base unit (often 4px or 8px). A 16px font at 1.5 gives 24px — a clean 8px multiple.
Frequently Asked Questions
Should line-height be on body or each element?
Set a unitless default on body, then adjust headings and UI text locally.
Does line-height affect layout height?
Yes — it adds half-leading above and below the text, which changes the element's height.
What is a good line length?
60–75 characters per line for body copy; wider needs more line height to track the return sweep.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.