Pairing
Playfair Display 700 · Source Sans 3 400
Layout
Typography
Heading weight
Body weight
Theme
CSS output
What this is
Typography pairing sets one heading font beside one body font in four real layouts, so you judge a pair on a page rather than in a list. Two faces sit well together when their roles differ clearly but their proportions agree, such as the x-height, the height of a lowercase x. The ten faces here are open-license fonts served from this site.
How to use it
- Pick a font pair and a layout.
- Move the sliders to change size, line height and letter spacing.
- Copy the CSS, then host the same open-license faces on your own site.
Read the guide
Words: x-height · contrast · clipboard
Common questions
Why is there only one weight to pick?
Each of the ten faces ships in one weight, so the weight rows show only that one: 700 or 400 for headings, 400 for body text. The weights in the CSS match.
Does it work on a phone or tablet?
Yes. The controls sit in a bar at the bottom of the screen; tap it to open them. On narrow screens the preview has less padding, the cards stack, and the Dashboard numbers are smaller.
Is anything uploaded?
No. The preview is drawn in your browser, and nothing is sent anywhere. The fonts come from this site, not from an outside server.