Make the text comfortable first

Start with the paragraph

A page can look impressive at the top and still be tiring to read. Begin with ordinary body text at the size you expect people to use. Choose a comfortable line height and constrain the measure so that the eye can find the beginning of the next line.

.article-body {
  max-width: 65ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.8;
}

.article-body p + p {
  margin-block-start: 1.25em;
}

Use a small type scale

Body text, a section heading, and a page title are enough to establish a hierarchy. A fluid title can adapt to its container without several nearly identical media queries. Keep the minimum large enough to remain a title, and the maximum small enough to fit the actual wording.

h1 {
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

h2 {
  font-size: 1.6rem;
  line-height: 1.25;
}

Do not remove every familiar cue

Keep inline links recognizable. Underlines are useful, especially in a page full of similarly colored text. Avoid faint text for paragraphs and small labels. A quiet palette can still have enough contrast to work outdoors or on a dim screen.

Check zoom as part of the layout

Increase text size and zoom to 200 percent. Navigation should wrap instead of disappearing, cards should become taller instead of clipping, and code should scroll inside its block. A layout that survives larger text is usually a more robust layout at ordinary sizes too.