Typography
Measure
Measure is the number of characters that fit on one line, the horizontal width of a text line and one of the biggest factors in readability.
The quick brown fox jumps over the lazy dog while the sleepy cat watches the rain fall softly on the window.
60ch · Ideal (45–75 chars)Definition
Measure is the number of characters that fit on one line, in other words the horizontal width of a single line of text. When a line runs too long, your eye reaches the end and then struggles to find exactly where the next line begins, so you keep losing your place. When a line is too short, it ends after just a few words and the rhythm of reading is broken again and again. This is exactly why filling a wide screen with text from edge to edge actually makes it harder to read, not easier. Measure barely draws attention to itself, yet it is one of the values that most decides whether a long piece of text is comfortable to read.
Why does it matter?
Your eyes repeat a motion: finish a line, then travel back to the start of the next one. When that return trip is too long, the effort adds up and mistakes creep in. If a line is far too wide, you either skip the next line or reread the one you just finished. If it is far too narrow, your eyes have to jump to a new line so often that they tire out. A good measure strikes the balance between these two burdens. This matters most on screens meant for long reading, like blog posts or documentation, where getting the measure right alone noticeably changes how readable the page feels. It is also why limiting the body width on a wide monitor is worth doing. Newspapers and books split a page into columns for the same reason, an old piece of wisdom that keeps any single line from stretching too far, and the very same principle carries straight over to the screen.
Common mistakes
- Setting no maximum width on body text, so a line grows endlessly on a large screen. Filling the full desktop width with text pushes a single line well past 100 characters, which makes reading a real strain.
- Applying a readability width limit to already narrow elements like cards or sidebars. When you shrink the width of a region that is tight to begin with, the lines become too short and start to feel awkward.
- Putting the same body-text width limit on headings or lists. A short heading or a one-line item rarely wraps in the first place, so narrowing it gains you nothing and only makes the layout feel off.
Practical tips
- A comfortable body line runs about 45 to 75 characters. Control this width with the CSS ch unit or max-width, and note that the container max-width you saw earlier is precisely the tool for keeping this measure in check.
- Set the width with the character-based ch unit rather than a fixed px value. If you use something like 60ch, the number of characters per line stays roughly the same even when the font or size changes, so you hold your target measure reliably in any environment.
- On wide screens where lines get longer, give the line height a little extra room too. Measure and line height need to move together as a pair, so that even a longer line lets the eye settle comfortably onto the start of the next one.