Typography, color, and readable contrast

Visual style should support reading rather than make text harder to use.

What you will learn

Set a useful font stack
Control line length and line height
Check contrast and non-color cues

Choose a resilient font stack

A font stack lists preferred fonts followed by generic fallbacks. If a device lacks the first font, it can use another available option. Relative font sizes adapt better than fixed pixel sizes, and line-height without a unit scales with the font size.

Make paragraphs comfortable

Very long lines make it harder to find the next line; very short lines cause frequent breaks. A max-width in character units can keep prose readable while allowing the page to expand on larger screens. Generous line-height helps readers track text without making paragraphs feel disconnected.

Use color with contrast

Text should have enough contrast against its background for people with different vision and display conditions. Do not rely on color alone to distinguish success, error, or selected states; add text, shape, or another visible cue. Test actual combinations rather than judging color by hue alone.

Respect user preferences

Browsers support zoom and users may choose system preferences such as reduced motion or dark appearance. Avoid locking the viewport scale or hiding focus outlines. A style that remains usable when text is enlarged is more robust than one tuned only for a single screenshot.

Test links and states too

Contrast applies to more than paragraph text: links, placeholders, focus rings, and disabled controls also need to remain perceivable. Underlines or another persistent visual cue help distinguish links from surrounding prose. Check normal, hover, focus, and error states, including in dark appearance if the page supports it.

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #172b3a;
  background: #ffffff;
}
.prose {
  max-width: 68ch;
}

Practice exercise

Set a system font stack, comfortable line spacing, and a limited line length for an article.

Show a hint

Try line-height: 1.6 and a max-width measured in ch.

Show one possible solution

Apply system-ui, sans-serif to the font stack, set a unitless line height, and limit the article width with a max-width such as 68ch.

Quick check

Why should an error not be communicated only with red color? Some users may not distinguish the color; add a text cue CSS cannot display red text

Frequently asked questions

What does ch measure?

<p>The ch unit is based on the width of the zero glyph in the current font. It is often useful as an approximate measure for limiting prose line length.</p>