Line length is the amount of text that fits on one line before it wraps. It is a quiet but important part of readable web typography: very long lines are hard to scan, while very short ones make reading feel choppy. For screen body text, aim broadly for 50–80 characters per line, with about 65 often working well. section 5.10 section 9.2
You usually control line length by changing the width of the element that contains the text. The same pixel width can produce different line lengths when the font size changes, so judge the result by reading the lines—not by treating one width as universally correct. section 5.10 section 9.2
Use line length as a simple reading test:
- If a paragraph stretches far across a large screen, narrow its containing element so each line is easier to scan. section 9.2
- If lines wrap after only a few words, give the text more room when the layout allows it. section 5.10
- Check line length again after changing font size, because larger and smaller type changes how many characters fit. section 5.10
- Let readability help choose responsive breakpoints: change the layout when lines become too long or too short. section 13.14
Giving a text column breathing room
A wide desktop paragraph can run beyond 150 characters per line, making it uncomfortable to scan. Reducing the width of its containing div creates shorter, more manageable lines. As a starting observation, a 600px container may produce roughly 75 characters per line, while 400px may produce roughly 50; the actual result depends on the font and layout. section 9.2 section 13.14
@media (max-width: 550px) {
.container {
float: none;
width: 100%;
}
}
This media query changes a floated container to full width below 550px. The breakpoint is chosen because the earlier layout would otherwise make the text column too narrow to read comfortably. section 13.14
Try it: resize a browser window and watch a paragraph rather than a device list. When the lines become awkwardly long, short, or otherwise make the design feel broken, that width is a useful candidate for a responsive breakpoint. section 13.14
