Responsive Web Foundations / M3

Choose readable type, colour and units

What you will learn

• Use relative units for text and spacing.
• Keep text readable when content grows or the page is zoomed.

Readable typography starts with ordinary text. Set a familiar font stack on body, a comfortable base size such as 1rem, and a unitless line-height such as 1.6. A fallback such as sans-serif lets the browser choose an available font if the preferred one is absent. You do not need to download a web font for these tasks.

A rem is relative to the root element's font size. An em used for font-size is relative to the inherited font size. Percentages depend on the property and context; a percentage width is commonly related to the containing block. A CSS px is a CSS reference unit, not a promise of one physical screen pixel. Browser zoom can enlarge the rendered page.

Use a restrained heading scale and enough line spacing. Avoid giving paragraphs a fixed height: translated text, a longer sentence or zoom can need more lines. Keep the browser's normal wrapping. A very long unbroken word may need overflow-wrap: anywhere. We will explore this in the responsive module.

Text colour must remain distinguishable from its background. Use the site's contrast checker to compare the actual foreground and background colours. For this pilot, aim for at least 4.5:1 for all ordinary text, including links. Underline links so colour is not the only clue that they are interactive.

The example uses a light background, dark text and a darker green link. These are starting choices, not mandatory branding. Test with a longer heading and 200% browser zoom. You should still be able to read every word and find every link. Passing an automated width check does not replace reading and keyboard testing.

Working example

The HTML shown here is the body fragment. The download includes the complete document.

<main><h1>A journal about learning to build for the web</h1><p>I want every visitor to read this comfortably, including people who enlarge the page.</p><p><a href="https://benjaminolsen.dev/contrast-checker/">Check a colour combination</a></p></main>

styles.css

body { margin: 0; padding: 1rem; font: 1rem/1.6 Arial, sans-serif; color: #182826; background: #f8faf9; }
main { max-width: 42rem; margin-inline: auto; }
h1 { font-size: 2rem; line-height: 1.2; overflow-wrap: anywhere; }
a { color: #075b43; text-decoration: underline; }

Open in browser editor

Download working example

Try a change

Increase the paragraph to 1.125rem. Add a longer sentence, then zoom your browser to 200%. Choose a link colour and check it against the page background using the contrast checker.

What you should observe

The paragraph grows, wraps and increases the page height. No text is clipped. The link remains underlined and its checked contrast is at least 4.5:1.

Check your understanding

Why is a fixed paragraph height risky?