Most of the web is text, which makes typography the part of design users spend the most time inside. Good type is largely invisible; it just reads well. This guide covers the decisions that make text comfortable, fast, and legible in 2026, from building a scale to shipping fonts that do not tank your performance budget.
The Type Scale
Picking font sizes one at a time produces a muddle. Instead, generate them from a modular scale: a base size multiplied by a consistent ratio to create harmonious steps.
A typical body base is 16px (the browser default, and a sensible minimum for readability). Multiply repeatedly by a ratio to get your headings:
- 1.2 (minor third) for tight, understated hierarchy.
- 1.25 (major third), a reliable all-purpose choice.
- 1.333 (perfect fourth) for clearer separation.
- 1.5 (perfect fifth) or 1.618 (golden ratio) for dramatic, editorial contrast.
A 1.25 scale from a 16px base yields roughly 16, 20, 25, 31, 39, 49 and so on. The exact numbers matter less than the principle: every size relates to every other size, so the page feels composed instead of arbitrary. Round values to whole or half pixels to avoid blurry rendering.
Spacing follows the scale
The same ratio should drive vertical rhythm. When margins, padding, and gaps echo your type steps, the layout gains an underlying grid you can feel but not see.
Pairing Typefaces
The safest typographic system uses one typeface in multiple weights. If you want two, the goal is contrast with harmony.
- Pair by contrast. A serif display face over a sans-serif body, or vice versa, gives clear roles and visual interest.
- Match the mood. A geometric sans and a humanist serif can clash if their personalities pull in different directions; check that both feel like they belong to the same era and tone.
- Limit to two families. A heading face and a body face is plenty. A third is usually a monospace for
code, which reads as functional rather than decorative.
Superfamilies, which ship matching serif and sans variants, take the guesswork out entirely because the pairing was designed to work.
Type pairing is less about finding two beautiful fonts and more about giving each a distinct, unambiguous job.
Web Fonts vs System Fonts
Every custom font is a file the browser must download before it can render text in that face. That cost buys brand expression, so spend it deliberately.
System font stacks use whatever the operating system already provides, so they cost zero bytes and render instantly:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;This is ideal for interface-heavy products where speed beats personality. Web fonts, loaded via @font-face or a provider, give you a consistent, branded look across every device at the cost of download weight and potential layout shift. The pragmatic 2026 answer is often a hybrid: a custom display face for headings where character matters, and a system stack for body text where speed matters most. Self-hosting fonts in woff2 and serving them from your own origin is generally faster and more private than a third-party CDN.
Performance
Fonts are render-blocking by nature, so a few techniques keep them from hurting your Core Web Vitals.
font-display
The font-display descriptor controls what happens while a font loads:
swapshows fallback text immediately, then swaps in the web font. This avoids invisible text but can cause a visible flash and layout shift.optionallets the browser skip the web font entirely on slow connections, prioritizing stability.
Pair font-display: swap with a carefully chosen fallback whose metrics are close to the web font, and use the size-adjust, ascent-override, and descent-override descriptors to minimize the shift when the swap happens.
Variable fonts
A variable font packs an entire range of weights, widths, and styles into a single file. Instead of loading separate files for regular, medium, bold, and italic, you ship one file and set any weight along a continuous axis with font-weight or font-variation-settings. If you use three or more weights of the same family, a variable font is almost always a net win on bytes. Add font-weight: 100 900 to your @font-face block to expose the full range.
Also subset your fonts to the characters and languages you actually use, and preload the critical font file so the browser fetches it early.
Line Length and Leading
Readability lives in the relationship between three measurements: how wide a line runs, how tall the lines stack, and how big the text is.
- Line length (measure). Aim for 45 to 75 characters per line for body copy, with around 66 as the classic ideal. Set it with
max-widthinchunits, e.g.max-width: 66ch, which is character-relative and self-adjusting. - Leading (line height). Body text reads best around
1.5to1.6unitless line-height. Tighten headings toward1.1to1.2because large text needs less breathing room between lines. - Paragraph spacing. Separate paragraphs with space rather than first-line indents on the web, where indents read awkwardly.
Long lines force the eye to travel too far and lose its place on the return; short lines fragment reading into choppy jumps. The ch unit ties your measure to the actual font, so it stays correct even if the typeface changes.
Fluid Type with clamp()
For years, responsive type meant juggling breakpoints. The modern approach is fluid typography with the CSS clamp() function, which scales text smoothly between a minimum and maximum based on the viewport.
clamp() takes three values: a minimum, a preferred (usually viewport-relative) value, and a maximum:
h1 {
font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}Here the heading never shrinks below 2rem or grows beyond 3.5rem, and in between it scales with the viewport. Including a rem term in the preferred value (rather than vw alone) is important for accessibility, because it keeps the text responsive to the user’s browser zoom and font-size settings. Apply fluid type to your whole scale and the layout breathes across screen sizes without a single media query.
Hierarchy
Hierarchy is how a reader knows what to look at first, second, and third without thinking about it. It comes from contrast across several dimensions, not just size.
- Size is the most obvious lever: bigger reads as more important.
- Weight lets you emphasize within a single size, e.g. bold labels over regular values.
- Color and contrast can demote secondary text to a softer grey while keeping primary text at full strength.
- Space isolates important elements; generous whitespace around a heading makes it feel more significant than a larger but cramped one.
Use the smallest number of distinct levels that still communicates structure, typically a heading, subheading, body, and caption. And keep semantic HTML honest: h1 through h6 should reflect the document outline for screen readers and SEO, with visual styling decoupled from the tag when needed.
The Takeaway
Typography on the web is a system, not a series of one-off choices. Generate sizes from a modular scale, pair at most two families with clear roles, and weigh web fonts against system fonts per context. Protect performance with font-display, variable fonts, subsetting, and preloading. Keep line length near 66 characters, leading around 1.5, and let clamp() make type fluid without breakpoints. Layer size, weight, color, and space into a clean hierarchy, and your text will do its real job: getting read.
