Choose a comfortable line height for any text size
This line height calculator suggests the leading for a paragraph, heading or caption from two things that actually matter: the font size and how many characters fit on a line. Longer lines need more space between them so the eye can find the start of the next line; short lines and large headlines can sit tighter.
You get the unitless CSS value that designers recommend, plus the same line height in pixels, percent and rem, a ready-to-paste CSS block and a live preview of your own settings. Use the percent value for Figma and Sketch, and the unitless number in code.
How to use the line height calculator
- Enter the font size in pixels.
- Enter the characters per line: count a typical line of your layout, or use 66 as a starting point.
- Pick the kind of text: body, small text, headings, large display or compact UI.
- Read the ratio, check it in the preview, optionally snap to a 4 px grid, then copy the CSS.
Line Height Calculator features
Four units
Unitless ratio, pixels, percent and rem from one input.
Measure-aware
Adjusts the ratio for the number of characters per line, not only the size.
Live preview and CSS
See the paragraph at the chosen leading and copy the font-size, line-height and max-width rules.
The rule of thumb behind the numbers
Typographers usually set body text with a line height of about 120–145% of the font size (Matthew Butterick’s Practical Typography) on lines of 45–90 characters, and WCAG 2.2 success criterion 1.4.8 (a AAA criterion) asks for at least 1.5 within paragraphs and lines no wider than 80 characters. The suggestions here follow that range: body text runs from 1.40 at 40 characters per line or fewer to 1.60 at 80 or more, rounded to the nearest 0.05.
These are guidelines, not laws. The calculator uses a simple linear rule that you can check against your own font in the preview. Typefaces with a large x-height, such as many UI sans-serifs, usually want more leading than those with a small one, and light text on dark backgrounds often looks better with a little extra.
| Kind of text | Typical line height |
|---|---|
| Body text | 1.4 – 1.6 |
| Small text and captions | 1.5 – 1.7 |
| Headings | 1.1 – 1.2 |
| Large display text | 1.05 – 1.15 |
| Compact UI labels | 1.3 |
Adjusting for responsive layouts
On a phone the column is narrow, often 30–40 characters, so body text can use the lower end of the range, around 1.4. On a wide desktop column of 80 or more characters the same text needs about 1.6, or better, a narrower column set with max-width: 66ch. Because the unitless ratio travels with the font size, one rule usually covers every breakpoint; change it only where the line length changes a lot. Always judge the final result with your real font, since two typefaces at the same size and ratio can look quite different.
Unitless, px or percent?
In CSS a unitless line-height: 1.5 is multiplied by each element’s own font size, so children inherit the ratio and scale correctly. A value in px or rem is inherited as a fixed length, which can leave large child text cramped. Use unitless in code. Design tools such as Figma and Sketch show leading in px or percent, so the other units are provided to copy across. Snapping to a 4 px grid keeps text aligned with spacing tokens at the price of a slightly different ratio.
WCAG 1.4.12 (Text Spacing, level AA) does not require 1.5 as a starting value; it requires that nothing is lost when a reader overrides line height to 1.5. Leave room in boxes so text can grow.
Line Height Calculator FAQ
What is the ideal line height?
For body text most guidance gives 1.4 to 1.6 times the font size, with longer lines at the upper end.
How do I convert line height to percent?
Multiply the unitless ratio by 100. A ratio of 1.5 is 150%.
How do I convert line height to px?
Multiply the font size by the ratio: 16 px × 1.5 = 24 px.
Why does line length matter?
On long lines the eye must travel further to reach the next line, so more leading helps it land in the right place.
Should line height be unitless in CSS?
Yes, usually. A unitless value is inherited as a multiplier, while a px value is inherited as a fixed length.
Where do I set the type sizes?
Use the type scale generator for the sizes and this page for their leading.