font inspectorFont pairing playground
Compare heading and body typefaces with your own text, try more than forty open source families, then copy your pairing as CSS.
Good things take type.
Typography gives our words a voice. The right pairing sets a mood, creates a rhythm, and invites us to keep reading. Start with something simple. Give each typeface room to do what it does best.
0123456789 · The quick brown fox jumps over the lazy dog.
/* Load Fraunces and Inter first. Open source fonts can be self-hosted. */
h1, h2, h3 { font-family: "Fraunces", serif; }
body, p { font-family: "Inter", sans-serif; }How do you choose a font pairing?
Choose a clear role for each face: one for headings and one for body text. Test a real paragraph, not just a few letters. The playground loads more than forty open source families from this site, so every visitor sees the same result, plus a few system fonts that depend on your device. All the web fonts listed are free for commercial use.
Contrast is what makes a pair work. A serif heading over a sans serif body, or the reverse, gives an obvious difference in texture. Two similar sans serifs tend to look like a mistake. If you want calm, use one family in two weights instead.
Match the proportions. Faces with a similar x-height sit together comfortably at the same size. Then check the practical things: does the body face have a real italic and a bold, and does it cover the languages you need?
Two families are enough for almost every site, and each extra one costs a download. See font pairing basics for worked examples.
How many fonts should a website use?
Two is plenty for most sites: one for headings and one for body text. A third for code or data is reasonable. Every family adds files for the browser to download.
Can I pair two sans serif fonts?
Yes, if they differ clearly, for example a geometric display face over a humanist text face. If they are nearly alike, use one family in different weights.
How do I find the pairing used by a site I like?
Inspect its headline and its body text. Font Inspector also lists every font on the page, ranked by how much text each one sets.
See how real sites set their type.
Font Inspector shows the font, size, line height and spacing of any text on any website, then copies it as CSS. Free, no account.