Typography

Start with a reliable font stack and unitless line height:

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2 {
  line-height: 1.1;
}

A unitless line height inherits as a multiplier, so each descendant applies it to its own font size. A fixed 24px line height inherited by a large heading can clip or crowd it. Body text usually needs more breathing room than headings.

Keep long prose to a readable measure, often around 60ch to 70ch. Use font weight and size to create hierarchy, but preserve semantic heading order in HTML.

If you load web fonts, provide fallbacks and avoid unnecessary weights. Request only styles the design uses. The fallback’s metrics affect line breaks and layout while the font loads, so test the transition rather than treating the fallback as invisible.

Do not make text containers rigid. Let paragraphs grow when translation is longer or users enlarge text. Avoid clipping with fixed heights, and do not reduce line height merely to make a screenshot fit.

In DevTools, disable the preferred font to see the fallback. Then emulate a slow connection, zoom to 200%, and replace a short heading with a long one. The content should remain readable before, during, and after font loading.