In short
Choose a typeface by testing it in your real content at real sizes, not on a specimen page. Two families is usually the ceiling — one for text, one for display or code. Every weight is a separate file to download, so three or four weights total is a reasonable budget. Check the licence covers web use and the client's traffic before it ships, because licensing is the mistake that reaches the client.
Start with the text, not the headline
Most font decisions are made by looking at a specimen — a large word, beautifully set. That tells you almost nothing about how a face performs at 16px across a paragraph, which is where readers spend their time.
Test with your real content, at real sizes, on a real screen. Paste in an actual page of body copy. Look at it on a laptop and a phone. A face that is distinctive at 60px and muddy at 16px is a display face, and should be used as one.
What makes a text face readable
A few properties matter more than style.
Generous x-height. Taller lowercase letters read better at small sizes. This is why some elegant faces perform badly as body text.
Open apertures. The gaps in letters like c, e, a, s. Closed apertures make letters blur into each other at small sizes.
Distinguishable characters. Check I, l, 1 and O, 0 together. Faces where capital I and lowercase l are identical cause real problems in names, codes and passwords.
A proper italic, not a slanted roman — noticeable in any content with emphasis or citations.
Real numerals for the job. Tabular figures for anything in columns, so digits align.
How many families
One is fine. Two is the usual ceiling. A text face and a display face, or a text face and a monospace for code and data.
Three families almost always looks accidental. If you find yourself wanting a third, the problem is usually that you are not using weight, size and spacing hard enough within the families you have.
When pairing, aim for contrast rather than similarity. Two faces that are nearly alike read as a mistake; a clear difference in structure reads as a decision.
Weights cost money in load time
This is the part that gets skipped. Every weight and style is a separate file the browser downloads. Regular, medium, semibold, bold, plus italics, is six files before you have styled anything.
A reasonable budget for most sites is three or four weights total. That is enough for body text, emphasis, and headings.
Two things reduce the cost:
Variable fonts carry a range of weights in one file. When you genuinely need several weights, one variable file usually beats four static ones.
Subsetting strips characters you will never use. If your site is English-only, you do not need the full Cyrillic and Greek ranges. This can cut file size substantially.
And never synthesise weights. Letting the browser fake a bold by smearing the regular produces visibly worse letterforms than a real bold.
Loading without a flash
The visible problem is text that flashes invisible, or reflows once the webfont arrives.
Use font-display: swap so text renders immediately in a fallback and swaps when the webfont loads. Invisible text is worse than briefly different text.
Preload the one or two faces used above the fold. Not all of them — preloading everything defeats the purpose.
Pick a fallback with similar metrics, and tune it with the size-adjust and metric-override descriptors so the swap does not shift the layout. This is one of the cheapest layout shift fixes available.
Self-host where you can. It removes a third-party connection, avoids a privacy question in some jurisdictions, and is usually faster.
Licensing is where projects actually get hurt
This is the mistake that reaches the client, so check it before anything ships.
Desktop licences do not cover websites. Buying a font for the design tool does not grant the right to serve it as a webfont. These are separate licences, sold separately.
Webfont licences are often capped by traffic. Many are priced by monthly pageviews, and a successful site can exceed its tier without anyone noticing.
Free is not always free for commercial use. Check the specific licence — SIL Open Font License permits commercial use and embedding; "free for personal use" does not.
Hand the licence to the client with the rest of the deliverables, and say plainly whose name it is in and what it covers. A font licence registered to an agency that later parts ways with the client is a problem waiting to surface.
A workable default
One well-made variable text face, self-hosted and subset, with three weights. A second family only if the design genuinely needs it. Fallbacks tuned so the swap does not move the page. Licence checked, documented, and handed over.
That covers most projects, loads fast, and will not produce an awkward email in eighteen months.
If you are choosing type for a brand that has to work across a site and a product, book a call.
Common questions
How many fonts should a website use?
One or two families. A text face plus a display or monospace face covers nearly every requirement; three families almost always reads as accidental. If you want a third, the usual fix is using weight, size and spacing more decisively within the families you already have.
How many font weights do I need?
Three or four in total is a reasonable budget, because every weight and style is a separate file to download. A variable font carries a range of weights in one file and usually beats four static files. Never let the browser synthesise a bold — faked weights produce visibly worse letterforms.
Should I self-host fonts or use Google Fonts?
Self-host where you can. It removes a third-party connection, is usually faster, and avoids a privacy question that has been raised in some jurisdictions about sending visitor IP addresses to a third party. Self-hosting also lets you subset the file to the characters you actually use.
How do I stop fonts causing layout shift?
Use font-display: swap so text renders immediately in a fallback, preload only the one or two faces used above the fold, and choose a fallback with similar metrics — tuned with the size-adjust and metric-override descriptors so the swap does not move the page. It is one of the cheapest layout-shift fixes available.
Do I need a special licence to use a font on a website?
Usually yes. A desktop licence bought for a design tool does not grant the right to serve the font as a webfont; those are separate licences. Webfont licences are also often capped by monthly pageviews, and 'free for personal use' does not permit commercial work — check the specific terms and hand the licence to the client with the deliverables.
