Line height and line length for readable text on any screen
Font size gets most of the attention, but two quieter settings decide whether a paragraph is pleasant to read: the space between lines (line height) and how many characters fit on each line (line length, or measure). Get them wrong and even large, high-contrast text feels tiring. The good news: both are fixed with a few lines of CSS.
What it means
Line height is the vertical distance from one line of text to the next. In CSS it's set with line-height. A value of 1 means the lines are as tall as the font size, with almost no breathing room; 1.5 adds half the font size again.
Line length is the number of characters on one line. Typographers have long recommended roughly 45–75 characters for body text, and WCAG 1.4.8 (a AAA criterion) suggests no more than 80. Too long and the eye struggles to find the start of the next line. Too short and the text breaks into fragments of two or three words, with constant line jumps and ragged edges.
Why it matters
Readers don't read letter by letter; their eyes jump along a line and then sweep back to the start of the next one. Tight line spacing makes lines blur together, so the return sweep lands on the wrong line. Very long lines make that sweep long and error-prone. Very short lines interrupt reading every couple of words. None of this blocks anyone outright, but it slows reading and makes long content feel harder than it is, especially for people with dyslexia or low vision. WCAG 1.4.12 Text Spacing also expects your layout to keep working when a reader overrides line height to 1.5 times the font size, so a design that only survives tight spacing has a hidden accessibility problem too.
How MobileCheck finds it
For each paragraph-like block with enough text, MobileCheck measures the rendered line height and estimates the average number of characters per line from the block's text and its number of lines. The thresholds are:
| Check | Flagged when | Recommended |
|---|---|---|
| Lines are packed too tightly | line-height below 1.2 | 1.4–1.6 for paragraphs |
| Lines are too long | more than ~95 characters per line | max-width around 60–75ch |
| Text column is too narrow | under ~20 characters per line, over 5+ lines | use the full width on phones |
Long lines are mostly a tablet and desktop-width problem, so check them on an iPad or Galaxy Tab as well as on phones. Narrow columns are mostly a phone problem: a two-column layout or generous side padding that looks fine at 768px can leave only a few words per line at 360px. The report highlights each affected paragraph on the screenshot.
How to fix line height
Use a unitless value. A unitless line-height is inherited as a ratio, so each element computes it from its own font size. A value with units (px, em, rem) is computed once on the parent and inherited as a fixed length, which is why a heading inside a container with line-height: 20px ends up with overlapping lines.
body {
line-height: 1.5; /* good: inherited as a ratio */
}
h1, h2, h3 {
line-height: 1.2; /* headings can be tighter */
}
/* avoid */
.content { line-height: 22px; }Headings are usually short and set in large type, so 1.1–1.3 is fine there. Body text, list items and long captions do better at 1.4–1.6. Fixed pixel line heights also make text clip or overlap when someone enlarges the font, which you can see in the large text scenario.
How to fix long lines
Limit the width of text blocks, not of the whole page. The ch unit is the width of the "0" character in the current font, so it tracks the font size and gives a good approximation of characters per line:
.prose p,
.prose ul,
.prose ol {
max-width: 68ch;
}
.prose {
margin-inline: auto; /* center the column if you like */
}Because average letters are narrower than "0", 68ch typically holds somewhat more than 68 real characters; values between about 60ch and 75ch land in the comfortable range for most fonts. Images, tables and code blocks can stay wider than the text column.
How to fix narrow columns on phones
Narrow columns usually come from layouts designed for wider screens. Collapse multi-column layouts into one column on phones, and keep side padding modest:
.article {
column-count: 2;
column-gap: 2rem;
}
@media (max-width: 40rem) {
.article { column-count: 1; }
}
.sidebar-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: 1.5rem;
padding-inline: 1rem; /* not 3rem on a 360px screen */
}Also watch for text wrapped around floated images on small screens. A 50%-wide float leaves only a sliver for text beside it; on phones, let the image take the full width instead. And if a narrow column is caused by text that is simply too big for the space, the fix might be a smaller heading size rather than less padding. See text too small on mobile for sensible font sizes.
How to check the fix
Run the free check again with at least one small phone and one tablet, since the two problems show up at opposite ends of the range. In the phone window you can rotate the device to landscape, where line length jumps suddenly on phones with wide screens. If you change breakpoints, check the in-between sizes too; the list of mobile viewport sizes shows the widths worth testing.
Frequently asked questions
What is the best line height for body text?
For most fonts, 1.4 to 1.6 works well for paragraphs. Set it without units, for example line-height: 1.5, so it scales with each element's font size. Headings can use 1.1 to 1.3.
What is the optimal line length for reading?
Roughly 45 to 75 characters per line is the traditional comfortable range. In CSS, a max-width between about 60ch and 75ch on text blocks gets you there for most fonts.
Why use ch units for max-width?
One ch is the width of the zero character in the current font, so a width in ch grows and shrinks with the font size. That keeps the number of characters per line roughly constant even when users enlarge text.