Is there an optimal font size and line height ratio?
Table of Contents
Quick answer: for body text on the web, set line height to about 1.5 times the font size (16px text on a 24px line). WCAG’s Visual Presentation criterion asks for line spacing of “at least space-and-a-half within paragraphs”, and MDN’s line-height reference recommends a minimum of 1.5 for main paragraph content. Headings can go tighter, around 1.1 to 1.3, because they are short and set large. Pair it with a line length of roughly 50 to 75 characters.
Using an optimal font size is important. When developing a design system, designers and developers must work together closely, particularly when it comes to typography. Typography designers have been discussing the relationship between horizontal and vertical eye movement for nearly a century. When Jan Tschichold campaigned for the left-alignment of text in 1928, it was a radical departure from the norm.
The leading (also known as line-height) refers to the distance between each line of type in a document. In most cases, the default leading provided by page layout applications is enough, but there are a few situations where it may need to be changed. Fonts with long ascenders and descenders that touch one another between lines of type might be distracting to the reader’s eye.
To create the illusion of tight leading, fonts with a high x-height eliminate the negative space between lines of type. It can be difficult for the reader to tell where the next line begins because of tight leading, which is most visible in long lines of text.
As a result, for types with wide columns, a higher line height improves readability. For body text, users can typically adjust the leading so that the height of capital letters fits precisely between lines of type, which is around 1.5 times the font size.
Is there an optimal font size/line-height ratio?
If the line height is too low, it may discourage horizontal eye movement and encourage skimming along the left side of the page. As a result, people may be forced to reread sections of material. When lines of text appear to “float away” from each other, a line height that is too slack could be to blame. Vertical scanning will become more difficult because the lines will no longer feel like a unified unit.
A fair rule of thumb is to set the line height at about 150 percent of the font size, although there is no such thing as a perfect line-height.
Line height
Percentage of font size typically used to measure line height or line spacing. Line spacing between 130 percent and 150 percent is considered best for reading, although even up to 200 percent is acceptable, according to conventional opinion.
Line height is determined by the font’s style and size. There is no one magic number that works for every piece of writing. A reasonable starting point is 1.5 times the font size in line-height, and from there, you can fine-tune as needed.
When employing 1.5 line-height, an 8-point grid scheme works nicely. For this theory, a base font size of 16 and a line-height of 24 (1.5 × 16, or three 8-point units) are ideal.
Each of the characters on consecutive lines in the 100 percent paragraph comes within millimeters of colliding. This is a problem since anyone with some degree of vision impairment will have a tough time reading this.
At 150 percent, the text is readable, and the space is well-balanced. When it comes to the paragraph with a 250 percent line spacing, it appears like it’s going too far. Reading the text feels annoying.
Font size and line height at a glance
Using 1.5 for body text and a tighter ratio for headings gives you values like these. Where the result is not a whole pixel, round to the nearest multiple of 4 if you work on a 4 or 8 point grid.
| Text | Font size | Line height ratio | Line height |
|---|---|---|---|
| Small print, captions | 14px | 1.5 | 21px (round to 20px) |
| Body text | 16px | 1.5 | 24px |
| Large body text | 18px | 1.5 | 27px (round to 28px) |
| Subheading | 24px | 1.3 | about 31px (round to 32px) |
| Heading | 32px | 1.2 | about 38px (round to 40px) |
| Display heading | 48px | 1.1 | about 53px (round to 52px) |
In CSS, write the ratio as a unitless number (line-height: 1.5) rather than 1.5em or 24px. MDN explains why: a unitless value is inherited as a ratio, so a child element with a different font size gets its own correct line height instead of inheriting a fixed pixel value. For reference, browsers’ normal is roughly 1.2, which is too tight for paragraphs.
Leading vs line height
They describe the same idea, the vertical rhythm of lines, but they are measured differently:
- Leading comes from metal type, where strips of lead were placed between lines. In print software it is measured from one baseline to the next, and typographers write it as size over leading, so “10/12” means 10pt type on 12pt leading.
- Line height in CSS sets the height of each line box. The space beyond the font’s own height is split equally above and below the text, which is why the first line of a paragraph can look pushed down compared with the same setting in a print layout.
In practice a CSS line-height of 1.5 and 150% leading in a design tool give the same baseline-to-baseline distance for body copy; the differences only show up at the top and bottom of a text block.
Whatever you choose, make sure your layout still works when people override it. WCAG’s Text Spacing criterion (Level AA) requires that nothing breaks or gets cut off when users set line height to 1.5 times the font size and paragraph spacing to 2 times the font size.
What about line length?
Line height and line length work together: the longer the line, the more space the eye needs to find the start of the next one. Baymard Institute recommends 50 to 75 characters per line for body text, and WCAG’s AAA criterion caps it at 80 characters (40 for Chinese, Japanese and Korean). If you have to run longer lines, add a little more line height. We go deeper on this in our post on the ideal column width for paragraphs.
