Web typography is the choice and setting of type on screen. Four decisions carry most of the weight: line length, size, spacing between lines, and the contrast between text and its background.
Type choices are part of what makes web design templates look finished or amateur. This page sets out measurable guidance from W3C accessibility documents, MDN and usability research, and explains how each setting interacts with responsive layouts.
Line length: how wide a text column should be
Long lines tire readers because the eye has to travel a long way back to the start of the next line. Short lines break the rhythm of reading. Two sources give concrete ranges. Baymard Institute, drawing on its large-scale testing, states that “The optimal line length for body text is 50–75 characters”.
The W3C sets a hard ceiling in its guidance on visual presentation. The Understanding document for the Visual Presentation criterion lists, as one condition, that “Width is no more than 80 characters or glyphs (40 if CJK).” The figure works as a ceiling for readable text. For Chinese, Japanese and Korean text the lower figure applies because the characters are wider.
In practice, this means a paragraph should not span the whole window on a wide monitor. Cap the width of the text column, usually by setting a maximum width in a character-based unit, and let the surrounding page use the remaining space for margins or secondary content. The rule matters most on large screens, and responsive layouts that collapse to a single column on phones usually fix the problem on small screens without further work. The wider topic is covered in the guide to responsive web design.
Line height and spacing
Space between lines matters as much as the type itself. MDN’s text styling guide recommends a unitless value for the line-height property, since it acts as a multiplier of the font size, and advises that “The recommended line height is around 1.5 – 2 (double spaced).”
The W3C goes further. Its visual presentation criterion asks that “Line spacing (leading) is at least space-and-a-half within paragraphs”, and a separate text spacing criterion requires that pages keep working when a user applies larger spacing. The thresholds below come from that second criterion.
| Property | Minimum the page must tolerate |
|---|---|
| Line height | At least 1.5 times the font size |
| Spacing after paragraphs | At least 2 times the font size |
| Letter spacing | At least 0.12 times the font size |
| Word spacing | At least 0.16 times the font size |
The values in the table come from the W3C’s Understanding document for the Text Spacing criterion, which says no loss of content or functionality should occur when those four properties are set.
The design lesson is that text boxes should not have a fixed height. If a button label or a card heading is clipped as soon as a reader widens spacing, the layout is too rigid. Let containers grow with their content.
Font size and scaling
Browsers let readers set their own base text size, and designs should honour it. Sizes defined in relative units such as rem and em follow the reader’s setting, while sizes locked in pixels may not. The W3C requirement for resizable text is explicit: content passes if it can be “scaled up to 200%” using at least one text scaling mechanism supported by user agents.
Fluid sizing helps on screens of very different sizes. The CSS clamp function accepts a minimum, a preferred value and a maximum, and according to MDN it “clamps a value within a range of values between a defined minimum bound and a maximum bound”. For headings, that means type that grows with the viewport but never falls below a readable minimum or grows past a sensible maximum, with no extra breakpoint.
A simple scale keeps sizes consistent: one base size for body text, a few steps up for headings, and one step down for captions and small print. Fewer sizes make a page look more deliberate.
Contrast between text and background
Legible type depends on enough difference in brightness between letters and their background. The W3C sets numeric thresholds in its Contrast Minimum criterion: text and images of text need a contrast ratio of at least 4.5:1, with a lower bar for large text, where large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
These ratios are thresholds, not targets to scrape past. Light grey body text on white often looks refined in a mockup and unreadable in daylight on a phone. Check contrast for every text colour on every background it can appear against, including text laid over images, hover states and disabled-looking links that are still meant to be read. Palette choices are covered in the guide to choosing a website color scheme.
Hierarchy, headings and paragraph rhythm
Type does more than carry words. It tells a reader what matters and where to look next. A clear hierarchy uses size, weight and spacing together, so that a page title, section headings, body text and captions are each recognisable at a glance and no two levels are easy to confuse.
Headings work best when they are visibly larger or heavier than body text and sit closer to the paragraph they introduce than to the one before it. That small asymmetry groups content correctly without any lines or boxes. Keep heading levels in order in the markup, because the visual size is a style choice while the level describes structure for screen readers and search engines.
Paragraph rhythm follows from the same thinking. Short paragraphs, generous space between them and lists for parallel items make long pages scannable. Left-aligned text with a ragged right edge is the safer default, and the W3C’s visual presentation criterion lists text that is not justified among its conditions.
Choosing and pairing typefaces
Typeface choice is where taste enters, but a few constraints keep it safe. Use one typeface for body text and, at most, one more for headings. Pick faces with clear distinctions between similar letters such as the capital I, the lowercase l and the numeral one, which matters for forms, codes and addresses. Weight differences do more work than extra families: regular, medium and bold in one family give a clear hierarchy without a second font.
Font files add weight to every page load, so a limited set of weights and styles also keeps pages quick. Always specify a fallback stack so the page stays readable while the chosen font loads or if it fails.
Licensing is its own topic. Fonts carry licence terms covering web use, and checking them before a design is signed off avoids a late redesign.
Applying it: a short checklist
- Cap body text columns so lines stay within the ranges above.
- Use a unitless line height in the range MDN recommends.
- Define sizes in relative units and test the page with enlarged text.
- Check every text and background pairing against the contrast thresholds.
- Avoid fixed heights on anything that contains text.
- Limit the design to one or two typefaces and a few weights.
Frequently asked questions
How many characters per line is best?
Baymard Institute puts the best range for body text at 50–75 characters, and the W3C guidance sets a ceiling of 80 characters per line.
What line height should body text use?
MDN recommends a unitless value, with a range of roughly one and a half to double the font size. Longer lines usually need more space.
What contrast ratio does body text need?
The W3C Contrast (Minimum) criterion asks for a contrast ratio of at least 4.5:1 for regular text, with a lower bar of 3:1 for large-scale text.
Should font sizes be set in pixels?
Relative units are safer because they follow the reader’s browser settings. Sizes in pixels can ignore that setting, so test with enlarged text either way.
