Typography pairing guide

Start

The tool opens with Playfair Display and Source Sans 3 in the Hero layout, on the dark theme. The line under the pairs reads Playfair Display 700 · Source Sans 3 400.

What you need

• A current browser. Chrome, Edge, Firefox and Safari all work.
• Nothing else. There is no file to open; the sample text is built in.

Your first result

1. Open Typography pairing. The first pair is already set in the Hero layout.
2. Press a pair under Pairing. The preview and the line under the pairs change at once.
3. Press Hero, Article, Cards or Dashboard under Layout to see the pair in another kind of page. Scroll inside the preview if the text runs past the frame.
4. Under Typography, move Heading size, Body size, Line height and Letter spacing until the page reads well. Try Light under Theme too.
5. Open CSS output and press Copy CSS.

Good to know

• Copy CSS puts the text shown above the button on the clipboard. The keep page says what it holds and what it leaves out.
• Right after a pair is picked, its fonts may take a moment to arrive; until then the text shows in a stand-in font such as Georgia. See font loading.
• Reset puts every control back to how the page opened.
• On a phone the controls sit in a bar at the bottom of the screen. Tap the bar to open them.