Tools
Line height calculator
Work out the recommended line height for your font size, in pixels and unitless for CSS.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
About this tool
The line height calculator gives you the line-height in pixels for a given font size. Use it to decide how much breathing room to leave between lines in an article, a product page, a heading or a button, and to see at a glance how tightening or loosening the leading changes readability.
Enter the font size in pixels. At the top you get two suggestions: “Recommended”, a 1.5 ratio for body text, and “Golden ratio”, at 1.618. “Common ratios” lists five scales from tight (1.2) to loose (2), each with its typical use and a button to copy the value. The “Preview” section sets a paragraph at 1.2, 1.5 and 2 so you can compare them.
Everything is calculated in your browser and nothing is sent anywhere. Results are shown in pixels to one decimal place; if you prefer a unitless line-height in your CSS, use the ratio itself (for example 1.5). The tool does not take column width or your specific typeface into account, so treat the numbers as starting points to check against your real type.
How do you work out the line height for a text?
- Type the font size into the “Font size” field, in pixels. It starts at 16; if the field is left empty, the tool calculates with 16.
- Read the two main results at the top: “Recommended” multiplies the size by 1.5 and “Golden ratio” by 1.618. At 16 px you get 24 px and 25.9 px.
- Scroll down to “Common ratios” to see five scales: “Tight” (1.2), “Snug” (1.375), “Normal” (1.5), “Relaxed” (1.625) and “Loose” (2), each with its typical use.
- Press “Copy” or the copy icon on any row to take the value with its unit, for example 24.0px, ready to paste into your CSS.
- Compare the same paragraph at line heights of 1.2, 1.5 and 2 in “Preview”. The preview uses your font size up to 24 px; above that it stays at 24 px so it fits.
What line height is recommended for on-screen text?
For reading paragraphs, the tool suggests 1.5 times the font size: that is the “Recommended” value and the “Normal” row. It is also the line height that the WCAG accessibility guidelines say text must be able to reach without breaking the layout, so it is a good starting point.
Long texts with wide lines tend to benefit from a little more space, such as 1.625 (“Relaxed”). Headings need less, such as 1.2 (“Tight”), because with large type the gap between lines already stands out. Subheadings and interface text often use something in between, such as 1.375 (“Snug”).
The tool does not know your typeface or your column width. Two fonts at the same size can look very different, so check the result with your actual typography.
How do you use the line height in CSS?
In CSS, the line-height property accepts a unitless number (line-height: 1.5), a pixel value (line-height: 24px) or rem. A unitless number multiplies the font size of each element, so a heading inside a block recalculates its line height from its own size.
The pixel values the calculator gives are useful when you need a fixed height: lining text up with an icon, giving a button an exact height or fitting text to a baseline grid, for example of 4 or 8 px.
The value is copied with a decimal point (24.0px), which is what CSS understands. To convert it to rem, divide the pixels by the root font size: with the browser default root of 16 px, 24 px is 1.5 rem.
Why does the golden-ratio line height use 1.618?
The golden ratio (φ) is approximately 1.618. The calculator offers it as an alternative to 1.5: it multiplies the font size by 1.618 and rounds to one decimal place. At 18 px you get 29.1 px.
It is not a typographic rule and it does not make text more readable on its own. It gives a slightly more open result than 1.5, between “Normal” (1.5) and “Relaxed” (1.625). Use it if you want that extra space, and check it in your design.
Frequently asked questions
What line height is recommended for body text?
Long paragraphs usually work well at 1.4 to 1.6 times the font size. The WCAG accessibility guidelines ask that text can be displayed at a line height of at least 1.5.
Should line-height have units or not?
In CSS a unitless value (line-height: 1.5) is usually better, because child elements recalculate it from their own font size. Pixels are useful when you need an exact height.
What line height should I use for headings?
Large headings usually look better with tighter leading, around 1.1 to 1.3, as a 1.5 ratio makes the lines look disconnected.
What is a golden ratio line height?
It means multiplying the font size by 1.618. It gives slightly more open text than 1.5, which some readers find comfortable for long reads, though it is not a rule.