Typography for the Web: More Than Choosing a Font

Choosing the typeface is the first step — and often the only one you see. But typography on the web is a system, not a decision. It encompasses font size, line height, line length, the spacing between letters, the hierarchy between headings and body text, the behavior across different screen sizes and the influence of dark and light mode on the perceived weight of the type. If you only choose the typeface and leave the rest to the browser, you haven’t done typography yet.

Fluid typography is one of the most important typographic advances on the web in recent years. With clamp(), you can define font sizes that scale fluidly between a minimum and a maximum value — depending on the viewport width, without media query jumps. An H1 that is 32px on a smartphone and 80px on a large monitor looks proportional at every point in between with this method. That sounds like a technical detail — but it makes a fundamental difference to how the page feels.

Variable Fonts: One File, Many Variants

Variable fonts let you load a single font file that contains all weights and styles — instead of loading a separate file for each variant. A variable font can represent weight, width, italic angle and other axes on a continuum. That reduces HTTP requests and file size considerably when several variants are needed. Variable fonts pay off where font weight is varied as a design device — and can often save a few hundred KB compared to several static font styles.

A lesser-known but effective topic is optical kerning and text rendering. Large headlines with wide tracking often look better when font-kerning: auto is enabled and text-rendering: optimizeLegibility is set. This mainly affects serif typefaces at display sizes. In body text, on the other hand, optimizeLegibility can hurt performance — a clear example of the fact that typographic decisions on the web always have technical consequences too.

Line Length and Readability

The optimal line length for body text is between 45 and 75 characters. Shorter lines feel choppy, longer ones tire the eye. On the web, this is often ignored — wide containers, full viewport width, no max-width on the text block. The result is hard-to-read long-form text that makes visitors bounce quickly. A simple rule: for reading text, never use text blocks wider than 70ch. This single parameter noticeably improves the reading experience.

• Fluid type scales with clamp() for consistent sizes on all devices
• Variable fonts where several weights are needed
• Limit line length to 45–75 characters
• Line height of at least 1.5 in body text, 1.1–1.2 for headings
• Use letter-spacing only for capital letters and small labels

Typography is the craft that most strongly separates professional from amateur work — and at the same time the one that is least consciously noticed. Good typography doesn’t stand out. It makes reading easier, understanding faster and the overall impression more coherent. That is the goal.