Best fonts for websites: how to choose type that does a job
There is no best font, but there are better and worse ways to choose one. This is how I pick type for a product or a marketing site, the pairings I keep returning to, and the settings that matter more than the typeface itself.
How to choose, in four questions
A typeface is a voice. Choosing one is not a matter of taste alone, it is a matter of what the site has to accomplish and where people will read it.
- 01
What does it have to do most?
Long reading, dense interface data, or large marketing statements. These are three different problems. A face that is beautiful at 96 pixels can be unusable at 13.
- 02
What should it feel like?
Write down three adjectives before you look at any font. Precise and technical points somewhere very different than warm and editorial.
- 03
How many weights and styles do you need?
Most sites need three or four: regular, medium, semibold, italic. A family with a real italic and a wide weight range is worth more than two families that half fit.
- 04
What is the budget, in money and kilobytes?
A licensed variable font from a good foundry is one of the cheapest ways to look unlike your competitors. Free faces are fine, and the popular ones are extremely well used.
Faces I actually use
| Typeface | Best for | Notes |
|---|---|---|
| Space Grotesk | Headlines, wordmarks, technical brands | Geometric with odd details that keep it from feeling anonymous. Weak for long body copy. |
| DM Sans | Body copy, interface text | Quiet, friendly, holds up at small sizes. A safe partner for a louder display face. |
| Inter | Dense product interfaces | Built for screens, superb small-size legibility, extremely common. Excellent tool, poor differentiator. |
| Söhne, Untitled Sans, Neue Montreal | Studio and product brands that want a point of view | Licensed. This is where a site starts to look like it was designed rather than assembled. |
| Instrument Serif, Fraunces | Editorial headlines, warmth, contrast against a neutral sans | One serif headline over a clean sans body is still the most reliable pairing in web design. |
| Source Serif, Newsreader | Long-form reading | Serifs still read better than sans for sustained reading on good screens. |
| JetBrains Mono, Berkeley Mono | Code, data, small technical labels | A mono used sparingly for labels and numbers signals precision without shouting. |
The settings that matter more than the typeface
Most sites with typography problems have chosen a perfectly good font and set it badly. These numbers are a reliable starting point, not a rule.
- Body size: 17 to 20 pixels on desktop, 16 to 18 on mobile. Almost every site that feels cheap is set too small.
- Line height: about 1.5 to 1.7 for body copy, 1.0 to 1.15 for large headlines.
- Line length: 60 to 75 characters. Constrain the text column even when the layout is wide.
- Letter spacing: tighten large headlines slightly, around minus 2 to minus 3 percent. Loosen small uppercase labels considerably, around 20 to 30 percent.
- Weight contrast: jump two steps rather than one, for example regular body against semibold headings, so hierarchy reads at a glance.
- Color: pure white text on pure black is harsh. Off-white on a slightly blue-black is easier to read for long stretches.
Nobody notices good typography, which is exactly the point. They notice that the page felt easy.
Performance and loading
- Use a variable font where you need several weights. One file often replaces four.
- Subset to the characters you actually serve. A Latin subset is a fraction of the full file.
- Self-host or preconnect, and always preload the one face used above the fold.
- Set font-display: swap, and pick a fallback with similar metrics so the swap does not shift the layout.
- Two families and four weights is a reasonable ceiling for a marketing site. Beyond that you are paying kilobytes for decisions you did not make.
What to avoid
- The default stack of the moment. When every startup uses the same two faces, type stops carrying any brand information.
- More than two families, unless you have a real editorial reason and the discipline to keep them separate.
- Thin weights for body copy, which fail on low-contrast screens and for anyone with imperfect vision.
- Faux italic and faux bold. If the family lacks a real italic, choose a different family.
- All-caps for anything longer than a short label.
- Type set for your monitor only. Check every heading at 375 pixels wide before you commit.