Line Height Calculator
The Line Height Calculator recommends line height, letter spacing and an ideal maximum paragraph width for a font size and use case — body text, headings, UI labels or display type — with a live preview and CSS output.
About this tool
The Line Height Calculator recommends line height, letter spacing and an ideal maximum paragraph width for a font size and use case — body text, headings, UI labels or display type — with a live preview and CSS output.
How to use it
- Enter the font size in pixels.
- Choose a style: body text, heading, UI label or display.
- Check the preview paragraph and the four recommended values.
- Click Copy CSS to take the values into your stylesheet.
Good to know
- Body text reads comfortably with a line height of about 1.5–1.6 times the font size.
- Large headings and display type look better with tighter line height, roughly 1.05–1.2.
- Readable line length is roughly 45–75 characters per line.
- WCAG 1.4.12 requires that content still works when users set line height to 1.5 and letter spacing to 0.12 em.
- Unitless line-height values (such as 1.6) scale with each element’s font size.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
What is a good line height for body text?
Around 1.5 to 1.6 times the font size. For 16 px text that is roughly 24–26 px.
Should headings have a smaller line height?
Yes. Large text needs less relative spacing, so headings typically use 1.1–1.3 and display text even tighter.
What is the ideal line length for reading?
Roughly 45–75 characters per line, with about 65 often cited as ideal for body text.
Should I use unitless line-height in CSS?
Usually yes. A unitless value like 1.6 is inherited as a ratio, so child elements with different font sizes keep proportional spacing.