Understand the idea

A good reading experience depends on type size, line length, line height and contrast together. A large font alone cannot rescue an overly wide paragraph.

System fonts load without an external request. Relative units respect browser settings. A maximum width in ch is a useful starting point for text measure, although actual character widths vary. Test real content, long headings and enlarged text. One ch is based on the advance width of the font’s zero glyph, not the width of an average character. Using rem with an unaltered root font size helps respect the reader’s preferred text size.

Read the example

This is a CSS fragment. Put it in a stylesheet and supply the matching HTML described in the exercise.

CSS · EXAMPLE
body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}
article p { max-width: 68ch; }

A small mistake, explained

What goes wrong

Using a fixed-height text container can clip content when someone increases font size or a heading wraps.

How to fix it. Allow height to follow content. Check the layout with enlarged text and longer words rather than just a perfect short heading.

Try it yourself

Compare the same paragraph at full window width and 68ch. Increase browser zoom to 200% and inspect the result.

Further reading

W3C WAI — Resize Text

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.