Anticode Open builder

How to choose fonts for a website: one family, set well

Choose one font family that reads well at small sizes and has the weights you need, then do the real work: a clear size scale, comfortable line height and line length, and fast loading. Most sites look better with one family set carefully than with a pairing chosen for its looks and set carelessly.

Updated · By the Anticode team

Why start with one family

Pairing two typefaces is a skill: they need to contrast enough to look intentional and agree enough to look related. A single family with several weights gives you hierarchy for free. Headings in a heavier weight and a larger size, body in the regular weight, captions smaller: the contrast comes from size and weight, and the letterforms always match. Add a second family only when a brand already has one, or when a display face carries real character and the body face needs to stay quiet.

Step by step

  1. Describe the site's job in three words. A law firm might want "steady, clear, serious"; a bakery "warm, friendly, simple". The words rule fonts out faster than they rule them in.
  2. Shortlist three families that fit those words and offer at least regular, medium and bold, ideally with true italics. Check they cover every character you'll use, including accented names and currency signs.
  3. Test with your real text, not a pangram. Paste a paragraph from your services page and a long headline. Look at it at phone size first.
  4. Check the awkward letters. Can you tell capital I, lower-case l and the number 1 apart? Do 0 and O differ? This matters for prices, codes and addresses.
  5. Set a size scale. Body text around 16 to 18 pixels on screens, then headings stepping up by a consistent ratio. Four or five sizes cover most sites.
  6. Set line height and length. Around 1.5 for body text, tighter for large headings, and lines of roughly 60 to 75 characters. WCAG's text spacing criterion asks that layouts survive line height of 1.5 and extra letter and word spacing without losing content, so avoid fixed-height boxes around text.
  7. Load only what you use. Each weight is a file. Two to four weights is usually enough; a variable font can replace several files with one.
  8. Control the swap. The CSS font-display descriptor decides what visitors see while the font loads. swap shows text at once in a fallback and switches when the font arrives; optional keeps the fallback if the font isn't ready almost immediately.

Serif or sans serif?

Both work on modern screens. Sans serifs tend to read as neutral or modern and suit interfaces, prices and short text. Serifs tend to read as editorial or traditional and suit long reading and established businesses. The more useful question is whether the face was drawn for screens: generous x-height, open shapes, and spacing that holds up at 16 pixels.

Choose the fallback with care too. If your font fails to load, the browser uses the next one in the font-family list. A sans-serif design that falls back to a serif looks broken; list a similar system font and end with the right generic family.

Checks that catch a poor choice

  • The squint test. Blur your eyes at the page. Headings should stand out from body text by weight and size alone.
  • The phone test. Read a full paragraph on a phone at arm's length. If you lean in, the body size or weight is too small or too light.
  • The number test. Put a price list or a table of times in it. Some display faces have numbers that wobble or don't line up in columns.
  • The slow network test. Throttle the connection in your browser's developer tools and reload. Watch how much the layout jumps when the font swaps in.
  • The originality test. If your font is the default in every template you've seen, the site will look like a template. That's not a rule against popular fonts, but a reason to set them with care.

Common mistakes

  • Three or more families on one site, each used in a different section.
  • Light weights (300 or below) for body text, which fade on many screens.
  • All-caps paragraphs or wide letter-spacing on running text.
  • Text smaller than 16 pixels to fit more in, which mostly makes people zoom.
  • Choosing from a list of names without testing the face with your own words.

Fonts in Anticode

Anticode's Designer picks one of seven design systems, each with a single typeface: Editorial uses Geist, Technical IBM Plex Sans, Luxury Jost, Playful Fredoka, Brutalist Archivo, Organic Figtree and Swiss Inter Tight. One font family per site is part of the system. The Critic checks for one font family, body text of at least 16px, and the handful of fonts nearly every AI-built site picks. The design gate blocks publishing pages that have serif fallbacks or a third font family.

The trade-off is choice: you pick a direction rather than any font in a catalogue, so a brand typeface outside those seven isn't available on design-engine pages. You can switch direction at any time. The type scale guide covers sizes in more depth, and the font pairing page covers the case for two families.

Questions people ask

How many fonts should a website use?

One family is enough for most sites, with two to four weights. Two families can work if they contrast clearly and each has a defined job. Three or more rarely helps.

Are free fonts good enough?

Many are excellent and widely used by professional designers. Check the licence allows web use, and that the family has the weights and characters you need.

Why does my text flash or jump when the page loads?

The browser shows a fallback font first and swaps in your font when it arrives. Choose a fallback with similar proportions, load fewer weights, and set font-display to suit how much a swap bothers you.

Sources

  1. W3C: Understanding SC 1.4.12 Text Spacing, checked
  2. MDN: font-display, checked