How font pairing works
Most designs need two fonts: one with personality for headings and one that's easy to read for paragraphs. The trick is contrast with something in common. A high-contrast serif heading over a plain sans body is the classic mix, because the two are clearly different jobs but share a calm, even rhythm.
Avoid two fonts that are almost the same, like two geometric sans fonts. They look like a mistake rather than a choice. If you want one family only, use one font in two weights, like bold headings and regular text.
Choosing a pair by mood
Mood is a starting point, not a rule. Test a pair with your real words: a script that looks lovely with one word can be hard to read with five.
- Clean: sans headings and body. Modern and neutral, good for services, apps and shops.
- Elegant: refined serifs or scripts with a light sans. Suits beauty, weddings and fashion.
- Editorial: serif-led and bookish. Made for blogs, newsletters and writers.
- Friendly: round, open shapes. Feels approachable for coaches, food and kids.
- Bold: heavy or tall display fonts. Strong for fitness, music and events.
- Playful: scripts and bubbly fonts. Fun for a name or one big word.
- Techy: monospaced or quirky grotesques. Fits developers, tools and studios.
Sizes and weights that read well
Body text reads best at 16px or more on the web, with a line height of about 1.5. Headings can be two to three times the body size. Display fonts like Bebas Neue, Pacifico and Abril Fatface come in one weight and are meant for big sizes only, so never use them for paragraphs.
Load only the weights you use. Each extra weight is another file to download, which slows the page down. The snippets here ask for just the heading weight and two body weights.
Adding Google Fonts to your site
Paste the link tags into your page's head, or the @import line at the very top of your CSS file, then paste the CSS rules. In a website builder, look for a custom fonts or custom code setting and use the font names there.
Google Fonts are free under open licences, including for commercial use, logos and print. You can also download them from Google Fonts and host them yourself, which some privacy rules in Europe favour.
Frequently asked questions
What fonts go well together?
Pair fonts that differ in style but share a feel, like Playfair Display headings with Inter body text, or Fraunces with DM Sans. One font with personality and one quiet one is a safe rule.
How many fonts should a website use?
Two is plenty: one for headings and one for body text. A third, like a monospaced font for code or prices, is fine if it has a clear job.
Are Google Fonts free for commercial use?
Yes. Google Fonts are released under open licences, mostly the SIL Open Font License, which allows commercial use in websites, logos, products and print.
What font goes with Montserrat?
Lora is a popular body font under Montserrat headings, and Montserrat also works as the body font under Cormorant Garamond or Bebas Neue headings.
Should body text be serif or sans serif?
Both read well on today's screens. Sans serif feels more modern and neutral; serif feels more literary. Pick what suits your brand and keep the size at 16px or more.