25 curated Google Fonts pairings with the measurable parts measured: x-height and cap-height read off the loaded faces, weight menus offering only what each family publishes, and one link carrying exactly the weights the CSS uses
Initializing in your browser…
Visual layout builder for CSS Flexbox and Grid where the generated CSS is the same declaration list the preview applies, checked to the pixel: twelve presets, the track list read against the CSS Grid grammar, and anything the browser will drop named
Repackage a font between the bare TTF/OTF container, WOFF and WOFF2, with the result read back and checked before it is offered, plus a live preview and a correct @font-face rule
Build a CSS gradient and choose the colour space it is interpolated in, with the colour it keeps through the middle measured and shown.
You picked Playfair Display for headings but everything you try for body text either clashes or looks flat.
Heading font chosen
Playfair Display (high-contrast serif)
Suggested pairing
Body: Source Sans 3
Why: a clean humanist sans balances Playfair's dramatic
thick/thin strokes without competing for attention.
Google Fonts import + live specimen included.Good pairings usually combine contrast in category (a display serif with a neutral sans) but harmony in proportion and era. The tool proposes vetted matches and renders a real specimen with both fonts so you judge the actual pairing, not font names, then gives you the import line to use it.
A curated set of Google Fonts pairings, with the parts that can be measured measured: the x-height ratio of the loaded faces, the weights each family really publishes, and a link that carries exactly the weights your CSS uses.
The central claim of a font pairing tool is not measurable, and this page says so rather than dressing taste up as method. There is no standard for whether two faces go together, no conformance suite and no second implementation that could disagree, so the 25 pairings here are a curated list and nothing on the page is evidence for any of them. What IS measurable is everything around that claim, and all of it has a decider.
Under the preview is a panel of notes, each marked as a measurement or as a convention. The measurements are read off the faces the browser has actually loaded: the x-height and cap height as fractions of the em, taken from the drawn glyph bounds of `x` and `H`, and the ratio between the two faces, which is the one typographic number that decides whether a heading and a paragraph look like the same size. The conventions, such as pairing a serif with a sans-serif, are labelled as conventions.
The rest is against the Google Fonts CSS API, which answers for itself: a family it does not serve is a 400, and so is a weight a family does not publish. All 46 families the tool names are real, which was already true and is now checked family by family. Two things were not. **Every family was offered the same seven heading weights and five body weights**, so Bebas Neue, which publishes 400 and nothing else, was offered six it does not have: 26 of the 46 families were offered at least one unpublished weight, 77 combinations in all. The selects now offer exactly what each family publishes and say what that is. And **the weight you chose never reached the link**: the tag asked for the pair's own weight while the CSS variables carried the select's, so 16 of 16 choices produced CSS asking for a weight the accompanying link never loaded, which a browser then fakes by smearing the outlines. Both weights go into one URL now.
One more, measured on the page itself. **Only the selected pair had a link**, so of eight families named on screen six rendered identically to the fallback: the browse list of pairings was largely a list of the same two fallback faces. Every family the list will draw is now loaded in one request, and the driver checks it by measuring a string against the fallback rather than by asking `document.fonts.check`, which is true for every family when the stack contains a generic.
Pick a readable body font paired with a distinctive heading font for content-heavy sites.
Find a bold display font that pairs naturally with a clean body font for marketing pages.
Choose fonts that project well together at both headline and bullet-point sizes.
Rapidly iterate on typographic direction by previewing dozens of pairings with your actual content.
Two is the usual answer, one for headings and one for body, and three is about the practical maximum. That is a convention rather than a measurement, and this page labels it as one.
Yes, and the weights matter more than the families. Each weight of each family is a separate file, so a link asking for nine weights downloads nine files. The URL this tool writes asks for exactly the weights the CSS uses and no others.
Nothing that can be checked. There is no standard and no reference implementation, so any tool claiming to apply rules is applying somebody's taste. What can be measured is the x-height ratio, which is shown here: two faces whose x-heights differ by much look mismatched at the same size whatever else is true of them.
Because most families do not publish it. Bebas Neue publishes 400 and nothing else; Oswald stops at 700. A browser asked for a weight a family does not have synthesises it by smearing the outlines, which is exactly what a typography tool should stop you doing, so the menu offers only what exists and says what that is.
The link tag, with the two preconnects, which is what the HTML export gives you. An @import inside a stylesheet is only discovered after that stylesheet has downloaded and parsed, so the font request starts later.
This runs as client-side JavaScript. Keys, tokens, payloads, and other inputs never leave your device.