How to choose a font for a website

Begin with the reading conditions

A typeface that looks striking in a specimen can be tiring in a paragraph. Before thinking about personality, write down how the text will actually be read. That is the first step in how to choose a font for a website, and the one most often skipped. A restaurant menu is scanned on a phone, often in low light, by someone deciding quickly. A clinic's page is read carefully, sometimes by older visitors who have enlarged their text. A portfolio may be mostly images with a handful of words. Each points to different priorities.

Long reading

Favour a generous x-height, open letter shapes and moderate contrast between thick and thin strokes. These hold up at body size and in long lines.

Scanning and numbers

Prices, times and tables need clear figures. Check whether the face has tabular (equal-width) numerals so columns line up.

Short display text

Headlines and logos can carry more character: tighter shapes, extreme weights, condensed widths. They're read once, at large sizes.

Small screens

On a phone, letters that are easy to confuse (capital I, lowercase l and the numeral 1; rn and m) cause real misreadings in addresses and codes.

Then decide on the voice

Type is heard before it's read. Geometric sans faces built on circles feel orderly and modern; humanist faces with traces of handwriting feel warmer; grotesques feel plain and neutral; rounded terminals feel friendly and informal. None of these is correct in general, but one will match the business better than the others. A useful exercise is to write three adjectives for how the business should come across ("precise, calm, technical" or "warm, unhurried, local") and reject any face that contradicts one of them.

Avoid choosing by popularity alone. A handful of families appear on so many sites, generated ones especially, that they no longer say anything about the business using them. The guide to overused fonts in web design covers why that happens and how to pick past them.

Check the practical details

• Weight range. You'll want at least a regular, a medium or semibold and a bold. A variable font gives you every weight in between from one file, which also helps loading speed.
• Character set. Make sure it covers every accent, currency sign and symbol your copy uses, including names of people and places.
• Italics. If you'll emphasise words in body copy, check that a true italic exists rather than a slanted version generated by the browser.
• Licence. Families on Google Fonts are published under open licences that allow commercial use on the web. Commercial foundry fonts usually need a separate web licence, sometimes priced by traffic.
• File size. Every extra family and weight is another download before text can render in its intended face. One family, loaded as a variable font with only the characters you need, is the light option.

Test it before you commit

Specimen pages flatter typefaces. A short test with your own words catches most problems in ten minutes.

1. Set a real paragraph from your site at 17px with a line height of 1.6 and a line length of around 65 characters. Read it on your own phone, at arm's length.
2. Read it outdoors or with the screen dimmed. Thin weights and light greys are the first to fall apart.
3. Set your longest headline in the boldest weight you plan to use, on a 375px-wide screen. Check it wraps sensibly and nothing collides.
4. Type the awkward strings: a price list, an address with a postcode, an email, a phone number, an opening-hours table.
5. Try dark mode. Light text on a dark ground looks heavier, so the regular weight may need to come down a step.
6. Zoom to 200% and see whether the face still feels right when it's large.

If a face survives all six, you have a body font. Many sites then need nothing else: one family with a good range of weights can carry headings, body text and labels, with hierarchy coming from size and weight rather than from a second typeface. If you do add a second family, give it a clear, separate job, as described in font pairing for websites.

The seven faces Anticode uses

Anticode's design engine skips the font-picking step by tying each design system to one typeface that has already been chosen for a particular voice. The site uses that one family for everything.

You can switch the design system at any time and the type changes with it. The limit is that design-engine pages don't let you bring an eighth face: if your brand already has a licensed typeface, Anticode won't load it on those pages. Apps the model writes from scratch can use other families from Google Fonts, the one outside source their sandbox allows. Whatever you pick, test it with the steps above.

Questions people ask

How many fonts should a website use?

One family is enough for most sites, and two at most. More than that tends to look unplanned and slows the page.

Serif or sans serif for a website?

Both work on modern screens. Choose by voice and reading conditions rather than by rule; what matters more is x-height, spacing and weight at body size.

Are Google Fonts free to use on a business website?

The families on Google Fonts are published under open licences that allow commercial use. Check the licence shown on each family's page if you plan to modify or redistribute the files.

Can I use my brand font on an Anticode site?

Not on design-engine pages, which use the typeface of their design system. Pick the system whose face is closest to your brand's, or use an app build, which can load other families from Google Fonts.