How to Choose Fonts for Your Website
Typography makes up most of what people actually see on a website. Choose the right fonts and the page feels clear and trustworthy before anyone reads a word; choose the wrong ones and even great content feels hard work. Here is the process we use when picking fonts for templates and client sites.
Start with the reading, not the headline
It is tempting to fall in love with a striking display face first. Start with the body font instead, because it carries most of the page. Look for a generous x-height, open letterforms and clear differences between similar shapes such as I, l and 1. Set a few real paragraphs at 16–18px and read them on a phone, not just on a large monitor.
Limit yourself to two families
One family for headings and one for body text covers almost every website. Many projects work beautifully with a single family in several weights. Every extra family adds download weight and visual noise, so it has to earn its place.
Pair fonts by contrast, not by similarity: a characterful serif headline next to a neutral sans body reads as a deliberate choice, while two similar sans serifs just look like a mistake.
Check the family before you commit
A beautiful typeface is no use if it lacks what your content needs. Before you commit, check that the family has:
- the weights you need (at least regular, medium or semibold, and bold)
- matching italics, if your writing uses emphasis
- the character sets for every language you publish in
- tabular figures for prices and tables
Mind performance
Fonts are render-blocking assets, so treat them like images. Self-host them in WOFF2, load only the weights you use, and use a variable font when you need more than three weights – one variable file is often smaller than three static ones. Add font-display: swap so text appears immediately in a fallback font, and pick a fallback with similar proportions to keep the layout from jumping.
Set the rhythm
Good fonts still need good settings. Keep body text between 16 and 20px, aim for 45–75 characters per line, and give paragraphs a line height of about 1.4–1.6. Headings can be tighter, around 1.1–1.3. Create a small type scale – five or six sizes – and stick to it across every page.
Read the license
Fonts are software, and each comes with its own license. Families under the SIL Open Font License, like most on Google Fonts, can be self-hosted and bundled with websites and templates. Commercial fonts may limit page views, domains or embedding, so check the terms before you build a template that other people will use.
Test in context
Finally, put your choice in a real layout with real content: navigation, buttons, forms, long articles and small print. Fonts that shine in a specimen can fall apart in a dense pricing table. If it reads well everywhere, you have found your pair.
