Body text is where typography either works or quietly fails. A homepage headline can be a bit of theatre; a 1,200-word guide has to be genuinely comfortable or nobody reaches the end. These are the rules worth keeping close on client sites and your own portfolio, and most of them cost nothing to apply.

Line Length Is the First Thing to Fix

Aim for 45 to 75 characters per line, with 60 to 70 as the sweet spot. Below 45 the eye jumps back too often and reading feels choppy. Above 80 it starts to lose its place on the return sweep, and on a wide desktop monitor unbounded text can easily reach 150 characters, which is genuinely tiring.

In CSS, cap the measure rather than the whole container. max-width: 65ch on the paragraph wrapper is a sensible starting point, or roughly 34 to 38em at your chosen size. Use rem units so a reader who has already increased their browser's default font size still gets a reasonable measure rather than a squeezed column.

On phones, lines naturally fall short, so resist inset padding on top of that. Around 16 to 20 pixels of side padding is usually plenty at 360 to 400 pixels wide.

Set Leading as a Partner to Line Length

Leading is not a fixed number you can reuse everywhere. Long lines need more of it, because the eye has further to travel back. A 60-character measure sits well at 1.6; push towards 1.7 if lines run longer or the typeface has a small x-height.

For body copy, stay between 1.5 and 1.7. Tighter than that and words begin to merge vertically; looser and paragraphs stop reading as single units. Unitless line heights are best, since they scale with whatever size the reader ends up with.

Don't set body text in a light weight. A 300 weight at 16px looks elegant in a mockup and turns into grey mush on a phone in daylight. Regular weights are what you want for anything longer than a caption.

Size, Colour and Contrast That Hold Up Outdoors

Sixteen pixels is the floor for body text, and 18 is better for long-form articles. Avoid viewport-based font sizes for body copy entirely — a 3vw paragraph is unreadable at 360 pixels wide and absurd at 1920.

For colour, aim for a contrast ratio of at least 4.5:1, and nearer 7:1 for extended reading. That rules out the fashionable pale grey; mid-grey on white often lands under 3:1 and looks washed out on a phone. It's also worth avoiding pure black on pure white, since the harshness causes halation, particularly for readers with astigmatism. Something like #1c1c1c on #fbfbfb reads more calmly and looks no less confident.

If you support dark mode, don't simply invert. Pure white on pure black is worse than the light version. Try #e8e8e8 on #121212 and check your links and borders at the same time.

Break Text Into Short, Scannable Paragraphs

Online, first-line indents look like a mistake and slow people down. Use space instead: a gap of roughly three-quarters of a line between paragraphs, or at least half your line height.

Keep paragraphs to two to four sentences. A 200-word block of solid text, however beautifully set, tends to get skipped — which means whatever argument lives inside it never lands.

Subheadings every three or four paragraphs do quiet work as well. They give the eye somewhere to rest and let a reader who is skimming decide whether to slow down and read properly.

Test With Real Words on a Real Phone

Learn a reliable method for combining typefaces so headings and body copy feel balanced rather than busy or confused.

Paste in 500 words of genuine writing, then check the layout at 320, 375, 768 and 1440 pixels wide. Zoom the browser to 200% and make sure nothing collapses or scrolls sideways.

Finally, read a few paragraphs on an actual phone, ideally near a window. The gap between a dim studio monitor and a bright café table is where most readability decisions quietly fail. If you find yourself reaching for the brightness slider, your contrast is too low.

Write It Down Before You Hand Over

These rules only survive if they're documented. A page in the brand guide takes an hour and prevents a year of drift once other people start adding content.

• The measure, in characters, with a note that it's a hard limit rather than a suggestion.
• Body size in rem, line height as a unitless number.
• Colour values with their contrast ratios written alongside them, so nobody has to guess later.
• A rule that body copy never drops below the set size, however tempting it looks on a caption.

Then lock the measure inside your CMS templates, so a content editor can't widen the column by pasting in a table. Your client gets consistency, and you avoid the phone call six months later asking why the blog suddenly looks different.