Font Selection & Weights

Every font you load is a design decision and a network request. Getting font selection right means the right weights and styles arrive in the right format with the right CSS, so the browser never has to fake what the design needs. Get this wrong and the browser produces faux bold or faux italic by mathematically distorting the regular weight — a result worse than using a system font entirely.

True styles vs. faux styles

For body text you typically need four files: regular, italic, bold, and bold italic. Each file is a separate @font-face declaration mapping the same font-family name to a different font-weight and font-style:

@font-face {
  font-family: "Source Serif";
  src: url("source-serif-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif";
  src: url("source-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Source Serif";
  src: url("source-serif-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

When the browser sees <em> or <strong>, it walks this table for a real match. If the table is incomplete, the browser synthesises — and that is where faux styles come from. Faux bold adds stroke width to the regular; faux italic mechanically slants the roman. Both look wrong, and anyone who knows what to look for will see it immediately.

True italics, not obliques

Most quality serifs and humanist sans-serifs ship a true italic — a separately-drawn cursive cut, not just a slanted regular. Some sans-serifs (Helvetica, Univers) ship only obliques, which are the regular letterforms tilted at an angle. Obliques do not contrast as visibly with the roman, which weakens emphasis. Prefer faces with true italics for body text.

How to tell the difference: look at the lowercase a. In a true italic, it often shifts from the double-story form (the loop) to a single-story form. In an oblique, the a is just the upright a, leaned over.

Variable fonts

A variable font packages multiple weights and styles into a single file with smooth interpolation between them. Often smaller than two or three static files combined, a variable font lets the design call any weight value (font-weight: 437), not just the predefined steps.

Variable fonts are the future of web typography. They eliminate the trade-off between design flexibility and page weight. Instead of loading Light, Regular, Medium, and Bold as four separate files, one variable font covers the entire range.

@font-face {
  font-family: "Inter Variable";
  src: url("InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Weight selection

Set running text in Regular (400), Book, or Medium (500). Avoid weights below 300 for body — thin strokes break apart at small sizes, especially on low-DPI displays. Avoid weights above 600 for body — heavy ink density makes paragraphs hard to scan.

Bold is for selective emphasis and headings, not for entire paragraphs. Load only the weights you will actually use — each weight is a separate file (or range in a variable font) and contributes to page weight.

Counter-intuitive but reliable: as headings grow larger, their weight should drop. A 48px Bold headline feels overwhelming next to 18px body; the same 48px in Regular feels balanced. Use heavier weights only at large sizes; never use display faces for body copy.

Use WOFF2

WOFF2 is the modern web font format: smaller than WOFF and TTF, supported everywhere current. Do not ship WOFF, EOT, or SVG fallbacks unless your audience meaningfully includes IE11.

Evaluating font quality

Not all fonts are created equal. Evaluate a typeface before committing to it:

• Kerning quality. Set a word like "AWAY" or "To" at large size. If the spacing looks uneven, the kerning tables are weak.
• Weight range. Does it ship the weights you need? At minimum, Regular and Bold; ideally Regular, Medium, Semibold, and Bold.
• Character set. Does it include accented characters for the languages you support? Check for é, ñ, ü, å at minimum. Missing glyphs produce empty boxes.
• True italics. Open the italic and look at the a, e, f, g. Are they redesigned or just slanted?
• OpenType features. Does it ship kerning tables, ligatures, small caps, tabular figures? Free fonts often skip these; premium foundries include them.

Prefer reputable sources: Adobe Fonts, Google Fonts (the better offerings), type foundries like Hoefler, Klim, Commercial Type, Grilli Type, and Colophon. Do not use pirated fonts — beyond the ethics, pirated files are often incomplete or corrupted, missing the kerning and feature tables that make the typeface worth using.

Define fallback stacks

Always define a fallback font stack. If your web font fails to load, the fallback determines what the user sees:

body {
  font-family: "Source Serif", Georgia, "Times New Roman", serif;
}

Include likely-installed system fonts. Test with the web font disabled to see what the fallback experience looks like — a bad fallback can shift layout significantly when the web font loads, causing a flash of unstyled text that feels like a visual jolt.