Typography Pairing
Heading and body fonts that work together, with the CSS.
Pairing
Type scale
| Role | px | rem | Line |
|---|
CSS
Open fonts
Pairings
Saved pairings
Nothing saved yet.
How this works
Every pairing here uses fonts your device already has, so nothing is downloaded and the preview is exactly what this device draws. The app checks each font by measuring a line of text set in it against the fallback it would otherwise get; a font that measures the same is not installed, and pairings that need it are not offered. Some browsers hide fonts you installed yourself so sites cannot use them to track you; on those, fewer fonts show up here.
The old version of this tool loaded Google Fonts from Google's servers, which tells Google who is looking. ThatOne.App loads nothing from anywhere else, so instead the Open fonts section of the details suggests the free Google Fonts that look closest to your pair, as a link you can copy into your own site. It is never loaded here.
The scale multiplies each size by the ratio: with 16 px text and 1.25, the steps are 20, 25, 31.25 px and so on. The CSS gives each step as a custom property in rem, the font stacks with fallbacks for other devices, line heights that tighten as headings grow, and a 65 character line length.
Try your own font takes the name of any font installed on this device, as it appears in your font list. Random picks another pairing in the chosen style; Space does the same unless you are typing. Undo steps back through your last 20 changes. Your pairing, saved pairings and fonts stay on this device only.
Saved on this device only. Nothing is sent anywhere.