Web typography basics

Most of the typographic decisions on a modern site are decided by a small number of CSS properties. The defaults are passable. The deliberate choices are where a site starts to feel considered. This page is a short tour of the parts of the CSS Fonts specification you reach for in real layout work.

Pick a stack you can defend without a network call

A resilient font stack starts with a face you have actually licensed and shipped, then falls through to system faces, then ends in a generic. Loading a remote face on every request adds a network dependency that is almost never worth it for short-phrase work or editorial copy. System stacks have improved enough that system-ui with a sensible fallback is a defensible default.

If you do self-host a face, preload only the weights and styles you actually use. The easiest performance win on a typography-led site is shipping fewer font files, not more.

Use the line-height and measure to do most of the work

Line height (line-height) and measure (max-width on a text element) are doing more for readability than any font choice. A measure of roughly 60 to 70 characters per line keeps long reading comfortable. Line heights of 1.5 to 1.7 for body copy give the eye enough room to track. Display text wants tighter line heights to keep the shape of the phrase intact.

Both properties cascade in predictable ways. Set them at the body level and override only when a specific component genuinely needs different behaviour. Resist the urge to set line-height per heading; it is almost always the wrong layer for that decision.

Reach for variable fonts when you actually need the range

Variable fonts cover a continuous range of weight, width, or optical size in a single file. When you genuinely need three weights and two widths of the same family, a variable font is smaller than the equivalent static cuts. When you only need one weight, a static font is smaller and simpler. Use the format that matches the actual need, not the format that sounds more modern.

Font feature settings are not optional

Modern OpenType faces ship with features you can turn on with font-feature-settings or font-variant-*. Lining figures, tabular figures, small capitals, contextual alternates, and discretionary ligatures are common features that change the colour of the page when enabled correctly. Treat them as part of the type design, not as bonus features.

• Use tabular figures in any column where numbers stack vertically.
• Use small capitals for acronyms when the face supports them properly.
• Use stylistic alternates sparingly and only where they earn their place.
• Use kerning consistently; never disable it.

Respect user settings

Set font sizes in remso the user’s root size scales the page. Set your design at a comfortable base and rely on relative scaling for the rest of the type system. Avoid pixel-locking body copy unless you have a very specific reason; it breaks accessibility expectations for almost no aesthetic benefit.

Loading behaviour

font-display: swap avoids invisible text during font load and is the right default for most editorial sites. font-display: optional is the right default for personal sites and small archives where you would rather not re-render a page just to show a slightly nicer face. Decide consciously; do not let the browser decide for you.

Anti-aliasing and rendering hints

The combination of text-rendering: optimizeLegibility and -webkit-font-smoothing: antialiased is widely used and mostly safe. Test on a real screen before shipping; antialiasing decisions look different on high-density displays than on standard ones. Avoid pushing rendering hints around just because a competitor site does.

Where the specification lives

The canonical reference for all of this is the CSS Fonts Module Level 4 specification. It is denser than a tutorial but it answers exactly what each property does, how features interact, and what user agents are required to do. Bookmark it.

Practical checklist for a typography-led page

• One licensed face self-hosted, or a defensible system stack.
• Body copy at a comfortable measure with breathing line height.
• Headings with tighter line heights and considered tracking.
• OpenType features turned on where they help.
• Sizing in rem with sensible fallbacks.
• Conscious font-display behaviour.
• Tested at 200% zoom and with a system dark mode set.

What to take away

Web typography is mostly about making conscious choices early and then letting the cascade handle the rest. Get the body type right, get the measure right, set the feature flags you actually need, and the page will feel considered without much effort. Short-form phrase studies live or die by these decisions, which is why the gallery pages are built on the same underlying choices.