What makes a pairing work
The principle behind most successful pairings is contrast with a shared quality. Two typefaces that are similar but not identical look like a mistake, as though one failed to load — so the safest approach is either clear difference or deliberate unity.
The classic pairing of a serif with a sans-serif works because the difference is unmistakable while both can share proportions and era. Pairing two sans-serifs is harder and requires real difference in weight, width or character — a geometric sans against a humanist one can work; two neutral grotesques will not.
Superfamilies remove the problem entirely. Families designed with serif and sans variants share skeletons, proportions and metrics by construction, so they pair reliably and give a coherent system. Using one family across several weights is also a perfectly respectable choice, and often looks more considered than a mismatched pair.
Optical size, x-height and measure
The most common failure is not the pairing but the size relationship. Two typefaces set at the same point size rarely appear the same size, because x-height — the height of lowercase letters relative to capitals — varies enormously. A typeface with a large x-height looks noticeably bigger than one with a small x-height at identical point size, so pairings need optical adjustment rather than matching numbers.
Typefaces designed for display use have tighter spacing and finer details that fail at body size; text faces have more open spacing and sturdier forms that look clumsy very large. Using a display face for body copy is the most reliable way to make a page tiring to read.
Line length matters at least as much as typeface choice. The long-standing guidance of 45 to 75 characters per line exists because the eye loses its place returning to the start of an over-long line. Line height should rise with line length — around 1.5 for body text is a reasonable default, tightening for headings, where the default 1.2 or lower usually looks better than body line height.
Loading fonts without hurting the page
Every web font is a render-blocking-ish resource that delays text becoming visible, so restraint is a performance decision as much as an aesthetic one. Two families at two or three weights each is a sensible ceiling; loading five weights of two families is a common and expensive mistake, since each weight is a separate file.
Use font-display: swap so text renders immediately in a fallback and swaps when the web font arrives — the alternative is invisible text while the font loads. That swap causes a layout shift if the fallback's metrics differ, which is what size-adjust, ascent-override and related @font-face descriptors exist to fix: tune a local fallback to match the web font's metrics and the swap becomes nearly invisible.
Subsetting is the largest saving available. A full font file covers character sets most sites never use, and subsetting to Latin alone routinely cuts the file by more than half. Self-hosting with preload on the critical font, in WOFF2, avoids a third-party connection and is generally faster than loading from a font service. Variable fonts are worth considering where you need several weights, since one file covers a continuous range.
Reading the two numbers under the controls
A pairing you cannot read is not a pairing, so the previewer measures two things live. The first is the WCAG contrast ratio of the text against the background you set — computed on the composited colour, since the body copy carries slight transparency and measuring the raw value would flatter the result by a couple of tenths. The threshold moves with the type: WCAG treats 24px, or 18.66px at 700 and above, as large text and drops the requirement from 4.5:1 to 3:1, which is why a heading can pass at a ratio a caption fails at.
The second is characters per line, measured rather than estimated — the width of the rendered paragraph divided by the advance width of a digit in the exact font, weight and size on screen. This is what the familiar 45-to-75 guidance is actually about, and it moves as soon as you change the body font, because a condensed face fits far more characters into the same ch measure than a wide one. The measure slider is in ch units for the same reason: one ch is the width of a zero in the current font, so a fixed ch value keeps the line length roughly constant across typefaces where a fixed pixel width would not.
The weight menus list only the weights the family actually ships. Asking Google Fonts for a weight a family does not have is not an error — the API quietly clamps to the nearest available face and the browser synthesises the rest, so a preview can show a convincing fake bold that the copied font-weight: 900 will never reproduce. Nine of the families here have fewer than three weights, and two — DM Serif Display and Yeseva One — ship a single 400.