Tools
Font Matrix
The font matrix lets you pick one primary font and see how it pairs against many candidates at once. Type the same sample text once, scan every pairing in a single grid, and copy the CSS for the combination that fits your project.
How to Use the Font Matrix
The workflow has four steps. Pick a primary font, add candidate fonts, scan the matrix, and copy the CSS for the winning pairing. Each step is visible on the page so you can change your mind without losing context.
- 1Pick the primary font from the dropdown. This is the font that plays the heading role in every pairing.
- 2Toggle candidate fonts in the grid below. The matrix holds up to 8 candidates at once, grouped by category.
- 3Edit the sample text and drag the size slider to match your real layout. Every row updates together.
- 4Click Copy CSS on the row that wins. The snippet includes the heading and body font-family stacks with fallbacks.
The matrix differs from the pairing compare page. The compare page shows curated pairing records, each with its own sample text and contrast score. The matrix starts from a font you choose and tests it against any other fonts in the library, so it works for exploratory work that the curated catalog does not cover.
Related Tools
The matrix connects to four other tools. The pairing generator builds a pairing from your constraints. The compare page shows curated pairings side by side. The playground puts any font into a real layout. The font browser lists all 38 families in the library.