How to choose and pair fonts

Most font advice is adjectives. This is the small set of measurements that explains why fonts behave the way they do on a page, and how to use them.

Why "clean" and "modern" are useless words

Ask five designers to name a clean, modern sans and you get five different answers. The words describe a feeling, and feelings don't transfer between people. Worse, they don't help when a font that looked right in a mockup turns out to be unreadable at 15px on a phone.

Typefaces do have properties you can measure, and a handful of them explain most of what goes wrong in practice. Every number on this site is taken from the font's own outlines, so the same measurement means the same thing across all 1,055 families here.

Why one font looks bigger than another at the same size

The x-height is how tall lowercase letters are, expressed as a share of the font size. It is the single most useful number in typography, because almost all the text people read is lowercase.

Two fonts set at 16px can look wildly different in size. A face with a 55% x-height puts far more ink on the line than one at 45%, even though both are nominally 16px. This is why swapping a font can silently break a layout: the size didn't change, the apparent size did.

Practically: if you are replacing one font with another and the page suddenly feels cramped or airy, compare x-heights before you touch the font size. Usually you need to adjust by a pixel or two, not redesign anything.

Insider Software's Selecting Fonts: X-Height X-Factors covers the same ground from a print perspective and is worth reading, particularly its point that a high x-height improves legibility at small sizes but can make a paragraph look cramped. Bigger is not simply better.

Stroke contrast: how a font behaves when it gets small

Contrast is the ratio between a font's thin strokes and its thick ones. A value near 1.0 means the strokes barely vary, as most workhorse sans-serifs do. A value around 0.2 means dramatic thick-to-thin modulation, the look of a classical display serif.

High contrast is beautiful large and fragile small. Those hairline strokes are the first thing to disappear on a low-resolution screen or a cheap print run. That is why the convention of "display serif for headings, low-contrast face for body" exists. Legibility drives it.

If a headline font looks stunning at 48px and muddy at 16px, check its contrast before blaming the screen.

Average character width: the one that breaks your layout

Two fonts with identical x-heights can still occupy very different amounts of horizontal space, because their letters are drawn at different widths. This is what determines how many words fit on a line, and it is the measurement most likely to wreck a design when you substitute a font.

A narrower face fits more per line, which sounds good until lines get too long to track comfortably. The usual target for body text is somewhere around 60 to 75 characters per line. If a font swap pushes you well outside that, the fix is the container width, not the font size.

How to pair two fonts

The working principle is contrast in category, harmony in proportion. You want the two faces to be obviously different in character (a serif heading over a sans body, say) so the hierarchy reads at a glance. But you want them to agree on x-height, so neither looks accidentally larger than the other.

Pairings fail in two predictable ways. Either the two fonts are too similar, in which case the page reads as an accident, or their proportions clash, in which case the body text looks shrunken beneath its own headings. Matching x-height solves the second problem outright, which is why the pairing suggestions here are ranked on exactly that.

Two faces from the same superfamily, a sans and serif designed together, are a reliable shortcut, because the designer already solved the proportion problem for you.

Replacing a paid font with a free one

Most requests to match a licensed font like Helvetica or Futura are really requests to match a feeling. Approached as measurements, the job is more tractable: find something in the same category, then match x-height first, character width second, and stroke weight third.

You will rarely get an exact match, and you should be suspicious of anyone claiming otherwise. What you can get is a substitute that behaves the same way in a layout: sets to a similar length, holds up at the same sizes, and needs no adjustment to line height. That is usually what people actually need.

One caution: matching metrics does not match personality. A geometric sans and a humanist sans can measure almost identically and still feel different. Measurements narrow the field to a handful of candidates; your eye picks between them.

What this site does not tell you

Measurements can't tell you whether a font suits a brand, whether it carries historical baggage, or whether its italics are any good. They also can't judge the quality of the drawing. A thoughtfully made typeface and a careless one can produce the same numbers.

Treat the numbers here as a way to shorten the list from a thousand candidates to a dozen worth actually looking at. Looking is still important. Find what feels right.

How do I get the fonts?

Every family on this site is on Google Fonts, which is free for commercial use: client work, products you sell, print, anything. You never need a license and there is nothing to buy.

There are three ways to get one, depending on what you're doing with it.

To use a font in a document or design app

1. Go to fonts.google.com and search for the family by name.
2. Open the family's page and click Get font.
3. Click Download all. You get a ZIP containing the font files, usually as variable .ttf files, plus the license.
4. Unzip it, then install: on macOS, double-click each file and choose Install Font; on Windows, right-click and choose Install.
5. Restart the app you want to use it in, because most only scan for fonts at launch.

To use a font on a website, the quick way

On the family's page, click Get font, then Get embed code. Google gives you a <link> tag for the <head> and the matching font-family CSS rule. Paste both in. Pick only the weights you actually use, because every extra weight is another file the browser downloads before text appears.

To use a font on a website, the better way

Self-host it. Download the ZIP as above, convert to .woff2 if it isn't already, and serve the files from your own domain with an @font-face rule. This is faster than Google's CDN in most cases, since browsers no longer share font caches between sites, and it means your typography doesn't depend on a third party staying up. It also sidesteps the GDPR question about visitor IP addresses being sent to Google, which has been litigated in Germany.

One caution whichever route you take: check the family's available weights and whether it has a real italic before committing to it. A font with no italic will be faked by the browser, and slanted upright letterforms look noticeably wrong next to a drawn italic.

Every font page on Compare Fonts shows these measurements. Start from sans-serif families or browse the front page.