Choosing fonts for your website: popular free pairings that work
How to choose website fonts: one for headings, one for body text, and eight popular free Google Fonts pairings from clean SaaS to editorial and luxury.
Type does more for how a website feels than almost anything else. The good news is that the best website fonts right now are free, and you only need two of them.
Two fonts is enough
Use one font for headings and one for body text, or one font for both. The heading font carries personality; the body font has one job, which is to be easy to read at 16 to 18 pixels for long stretches. A third font rarely adds anything but inconsistency.
What makes a good body font
- Clear letter shapes at small sizes: an open "a" and "e", and an "I" you can tell apart from "l".
- A generous x-height (the height of lowercase letters), which makes text feel larger and easier to read.
- Several weights, at least regular and bold. Variable fonts give you every weight in one file.
Clean sans serifs such as Inter, Manrope and Plus Jakarta Sans are popular body choices because they meet all three.
Popular pairings
- Clean SaaS: Geist + Geist. Crisp and technical; one family does everything.
- Startup: Plus Jakarta Sans + Inter. Friendly headings over a neutral workhorse.
- Editorial: Fraunces + Inter. A soft, characterful serif for headlines; modern sans for reading.
- Tech: Space Grotesk + Inter. Quirky, technical headings, calm body text.
- Luxury: Playfair Display + Manrope. High-contrast serif headlines with a geometric body.
- Studio: Instrument Serif + Instrument Sans. A matched pair: elegant and condensed.
- Bold creative: Syne + Manrope. Wide, gallery-style display type.
- Poster: Bebas Neue + Inter. Tall condensed capitals for punchy headlines.
All of these are free on Google Fonts.
Setting the type well
- Body text: 16px minimum, a line height around 1.5, and 60 to 75 characters per line.
- Headings: tighter line height (about 1.05 to 1.15) and slightly negative letter-spacing at large sizes.
- Limit weights to the ones you use (say, 400 and 700) to keep pages fast.
- Self-host the font files where you can. It's faster and avoids sending visitor data to a third party.
Display fonts belong in headings
Fonts like Syne, Bebas Neue and Playfair Display look great at 48px and tiring at 16px. Keep them for headlines and pair them with a plain body font. Contrast between the two is what makes a pairing work.
See them with your brand name
The free DevTrust brand kit includes a font picker with 18 popular free typefaces and these pairings. Each one is shown with your brand name, and you can preview it on a mock website in your colours. It exports the Google Fonts link and the CSS for your developer. Pair it with a colour palette that passes contrast checks.