Make text comfortable to read

One idea at a time

Typography is how written content is presented. Start with a heading and a few sentences, then adjust one property at a time. Keep the HTML heading hierarchy meaningful: making a paragraph large does not turn it into an h1. A browser can use a different font from yours, so your layout should survive different letter widths and extra lines.

A font-family list is tried in order. Finish it with a generic family such as serif or sans-serif so there is always a fallback. The root is the outer html element. A rem is relative to its font size: with a 16px root, 1rem is 16px and 2rem is 32px; em in font-size is relative to the parent's font size. A CSS pixel is a length unit, not necessarily one physical device pixel. Do not disable browser zoom.

What to remember first

Walk through an example

<h1>A reading habit</h1>
<p>
  Small discoveries add up. Read a short passage, pause to think, and
  write one thing you learned before continuing.
</p>
<a href="#notes">Read the notes</a>
<p id="notes">Keep the notes brief and clear.</p>

body {
  font-family: Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
}
h1 {
  font-size: 2rem;
  font-weight: 700;
  text-align: start;
}
a {
  text-decoration: underline;
}

The body rule gives text a fallback font and a comfortable line height. The heading overrides its size and weight while the paragraphs inherit the body choices. text-align: start keeps a natural reading edge. The link remains underlined. No fixed height is needed: if text grows or wraps, the document can get taller.

See it happen: try a small change

body {
  font-family: Georgia, serif;
  font-size: 1rem;
  line-height: 1.15;
}
h1 {
  font-size: 2rem;
  font-weight: 700;
  text-align: start;
}
a {
  text-decoration: underline;
}

Look a little closer

External font services can provide additional typefaces, but they add a dependency and a network request. A provider may supply a stylesheet link for head; the requested font name then goes first in font-family. Check its loading instructions and license. This lesson uses local fallbacks so the demonstration still works without a third-party font.

Text sized only with viewport units can become too small on narrow screens or fail to grow as expected with zoom. Begin with rem for body text. Later you can combine a minimum, a flexible value, and a maximum using clamp(). Long lines are also tiring; the responsive lesson will limit content width while preserving space on small screens.

Try it in your own project

Use the supplied heading, paragraphs, and link. Replace the stylesheet with the text rules, then compare line-height: 1.15 and 1.6 without changing the words. Use the browser zoom control and narrow the window; text should wrap and remain available.

The preview uses a small set of readable starting styles for its font, spacing, and controls. The code to notice shows the lesson's own rules. Your local browser defaults may look different before you add those rules; focus on the relationship being demonstrated rather than matching every pixel of the preview.

A common wrong turn

Removing every underline makes links depend on color alone. Also avoid large letter spacing and full justification in narrow paragraphs: they can make reading harder. Judge the paragraph at a phone width and with zoom, not just the heading at desktop size.

Go to the source

• MDN: Make text comfortable to read ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.