Line length is the horizontal span of text in a line; measured in characters, it is also called the line’s measure. It works with font size and line height as a typographic trinity: imbalance among the three makes body copy feel cramped, choppy, or tiring to scan. section 8.1 section 8.1.1
Very short lines force frequent eye shifts and create a choppy reading rhythm. Very long lines fatigue the eye and make the next line’s start harder to find. A practical target for readable body text is 45–75 characters, alongside body text of at least 1.25rem and line height around 1.4–1.5. section 8.1.1 section 8.5
Treat line length as a value that changes with the other two typography settings:
- When font size increases, use a smaller line height and a longer line length; smaller type calls for a larger line height and shorter lines. section 8.1.2
- When line height increases, use a smaller font size and shorter line length; a smaller line height supports larger type and longer lines. section 8.1.3
- When line length increases, increase font size and line height; shorter lines pair with smaller type and tighter leading. section 8.1.4
A CSS scaling model starts from a base font size, line height, and width. With a known font size, calculate width as EW = BW + (EFS − BFS) × WF. With a known width, calculate line height as ELH = BLH − (EW − BW) / 3000. CSS custom properties keep the arithmetic unitless until the final px value is applied. section 8.1.2 section 8.1.4
Repairing an overwide article
An article inheriting a 100% body width, 16px text, and 1.2 line height has lines that are too long, too small, and too tightly packed. Choose 20px type, then scale the remaining values to a 1.41 line height and 600px max-width for a more readable result. section 8.1.5
Table 8.3 Calculated font sizes and line heights based on different maximum widths
| Maximum width |
Calculated line height |
Calculated font size |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Compare the paired font-size and line-height values produced as maximum width moves from 360px to 960px. section 8.1.4
For responsive text, fluid CSS units and functions such as calc() and clamp() can scale values across screen sizes without media queries. Constrain font sizes where needed so fluid scaling does not undermine legibility. section 8.5
