How many fonts should I use in a single design?

Two is ideal. Three is the maximum before the system starts looking inconsistent. The exception is when the third font is purely a numerical or display accent (a slab serif for stats, for example) that never appears alongside the other two.

What's a good size for body text?

On screens: 15 to 16 pixels for product UI and marketing copy, with a line-height of about 1.5. For print: 9 to 11 points depending on the paper stock and the font's x-height.

Should I use serif or sans-serif fonts?

Sans-serif for modern product design, UI, and clean editorial work. Serif for long-form reading, traditional editorial, premium and heritage brands. Many strong systems use both: serif for headlines, sans for body or vice versa.

How do I pair Google Fonts together?

Pair fonts that contrast in style but share proportions. Inter (sans) with Lora (serif) is a strong pairing because both share a humanist feel. Playfair Display (high-contrast serif) with DM Sans (geometric sans) works because the contrast is clean and intentional.

Typography Rules for Google Fonts

Google Fonts gives you hundreds of typefaces. The rules below make those typefaces actually work in real projects, whether you’re designing a brand system, a website, a magazine layout, or printed materials. They aren’t strict rules so much as principles that have held up across decades of typographic practice.

Rule 01

Stick to two fonts maximum

One serif font and one sans-serif font, or one display and one neutral. More fonts than that and the system fights itself. Brands like the New York Times, Stripe, and Apple all run on two-font systems. The clean example here uses Playfair Display for the headline and Inter for the body, one of the battle-tested pairings in our library.

Four fonts, fighting

SUMMER SALE

limited time only!

Save up to 40% on selected items.

CODE: SUMMER40

Two fonts, working

Summer Sale

Save up to 40% on selected items through Sunday.

Use code SUMMER40 at checkout

Rule 02

Use weight to create hierarchy, not size alone

A 16px Bold reads more important than a 24px Light, even though the Light is larger. Pair size with weight changes to make your headlines hold their place visually. Workhorse sans serif fonts tend to ship the widest weight ranges, making them easier to build clean hierarchy with.

Annual Report

56px · light 300

Quarterly Update

36px · extrabold 800

Rule 03

Set body text between 14 and 18 pixels for screens

Below 14px the text starts feeling cramped. Above 18px it reads as oversized. The sweet spot for most product UI and marketing is 15-16px with a line-height around 1.5. Most sans serif fonts are tuned to read well in this range.

Body size16px

11px · cramped22px · reads as headline

Good typography is a quiet kind of attention. The reader doesn’t notice the type itself, only the words. The work disappears so the meaning can come forward, sentence by sentence.

Rule 04

Increase line height as line length increases

A long line of text needs more line-height so the eye can find the next line. For 60-75 character lines (the readable maximum), use 1.5 to 1.6 line-height. Serif fonts with editorial proportions and sans serif fonts tuned for body copy both benefit from generous leading at long line lengths.

Line height1.55

1.0 · tight2.2 · airy

Set across the full width with adjustable leading, the same paragraph reads completely differently depending on the line-height value. Drag the slider above to feel the difference. Tight leading reads like poetry; generous leading reads like a long-form essay.

Rule 05

Pick a font with the weight range you need

If your design needs Bold, ExtraBold, and Light to work, don’t pick a font that only ships Regular and Bold. Inter, Manrope, and DM Sans are good safe choices among sans serif fonts because they ship a full weight range from Thin (100) to Black (900).

100TypographyThin

200TypographyExtraLight

300TypographyLight

400TypographyRegular

500TypographyMedium

600TypographySemiBold

700TypographyBold

800TypographyExtraBold

900TypographyBlack

Rule 06

For print, design at the actual production size

Type that looks great at 72px on screen can look chunky and loud at 9pt on a business card. Always preview your fonts at the size you’ll actually print them. Coated and uncoated paper stocks affect stroke weight too. Serif fonts need extra care at small sizes, and condensed fonts benefit from slightly more tracking on uncoated stocks.

Atelier

96px · display setting

Atelier

12pt · business card scale

Pair them, then ship

Most of these rules collapse into one practical question: which two fonts work together. Pairing well is half typography, half taste. The font-pairing library collects the combinations designers actually reach for, with live previews you can preview side by side. Inter and Lora is the modern default for product sites. Playfair Display and Source Sans 3 is the editorial classic. Browse the rest when you need a starting point.

Headline in Lora

Body set in Inter, the workhorse for product UI and marketing copy. Modern serif for personality, modern sans for clarity.

Inter + Lora · product sites

Headline in Playfair

Body set in Source Sans 3, a quietly industrious sans that lets the editorial display serif lead the page.

Playfair Display + Source Sans 3 · editorial