CSS readable type: set measure and rhythm before decorative details

Last updated: 5 Oct 20265 min read

tutorial

Typography in CSS controls how text occupies space. Line height, font size, measure, and wrapping affect reading more than a decorative font choice alone.

How the rule works

An investigation report contains long paragraphs and case IDs. The paragraph column uses a moderate maximum line length and generous line height. IDs may need controlled wrapping, but ordinary prose should keep natural word breaks. Avoid fixed-height cards: larger text, localization, and browser zoom will extend the content. A bold title is not a substitute for the correct HTML heading. Test with actual paragraph copy and a screen reader's reading order separately; CSS can make text easier to see but cannot repair a missing semantic structure.

.investigation-report { max-inline-size: 70ch; font-size: 1rem; line-height: 1.6; }
.investigation-report p { margin-block: 0 1rem; }
.investigation-report .case-id { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

Cost and verification

The rules add no network request unless a custom font is also loaded. Tabular numerals can make columns of numbers easier to scan only when the font supports them. Check the report at 200% zoom and with user font overrides. A 70ch cap is approximate and may need adjustment for the chosen font and script; do not equate it to exactly seventy visible characters.

Common Mistakes

Do not rely on CSS font size to create a document heading.
Do not force prose into fixed-height boxes.
Do not break every word merely to prevent one long identifier from overflowing.

Connected lessons

Extend this decision

Property decisions

CSS line height and measure: protect long-form reading

Further form and type decisions

CSS tab-size: render source indentation without rewriting code

Further rendering decisions

Further native-state decisions

CSS ::cue: improve caption contrast without editing the transcript

css

type-media

web