Font Pairing Studio

Pair a display, body and code font from a curated Google Fonts list, see a live specimen at real modular-scale sizes, and copy the link tag and CSS.

Design & colourTypographyFontsScale
Font Pairing Studio screenshot

A modular scale multiplies the base size by a fixed ratio for each step, so every heading in the design is the same relationship to body copy. Steps shown: h1 = base x ratio³, h2 = base x ratio², h3 = base x ratio, body = base, small = base ÷ ratio.

Live specimen
Display
Design & craft
Body
The quick brown fox jumps over the lazy dog, then files the quarterly report. A pairing has to survive ordinary paragraphs, not just a two-word headline.
Code
.btn { background: #ff8fc7; }
CSS to paste
HTML link tag

More tools