Typography pairing guide
Keep your work
The tool makes no picture or file. What you keep is the CSS for the pair you chose.
| Button | What you get |
|---|---|
| Copy CSS | The text in the CSS output box, on the clipboard: a comment line, then a rule for h1, h2, h3 with the heading font stack and weight, and a rule for body, p with the body font stack, weight and Line height. |
Each font stack names the font first and then a fallback, such as 'Playfair Display', Georgia, serif, so the browser shows something close while the font loads or if it is missing.
The CSS leaves out Heading size, Body size and Letter spacing. Note them down from the panel and add them to your own rules.
The CSS names the fonts but does not load them. All ten faces are under the SIL Open Font License 1.1, whose text is at /lab/fonts/OFL.txt. It lets you use them and host the same font files on your own site: a self-hosted font needs no outside server. Add an @font-face rule for each file you host, and ship every weight you use; this tool serves one weight per face.
If the clipboard is not available, select the text in the CSS output box and copy it by hand.