Typography

Utilities that work from a typeface’s real metrics — x-height, cap height and units per em read from the font file — rather than its nominal point size. That distinction is the whole subject: point size describes the em box, not the letters, so two families set at the same size can differ by a third in the dimension your eye actually reads. Identifying a font from an image is the same kind of work: comparing measured letter shapes, not guessing from a name.

Typography held to the same standard as the colour: the minimum readable size for your actual typeface, a scale with real cap heights, and pairings with the correction that makes them work.

Font metrics vary enormously between families at the same nominal size. These tools read the real metrics rather than assuming 16px means the same thing everywhere.

The font finder turns the same measuring on a picture: crop a line of text and it compares each letter with the same letter in 1,956 free Google Fonts families, in your browser, without uploading the image.

A font’s point size describes its em box, not the letters. Two typefaces set at 16px can differ by a third in x-height, which is the dimension your eye actually reads. That is why a design that was comfortable in one family becomes cramped in another with no number changing.

The legibility checker corrects for this using the real x-height of the family you picked, and the scale generator reports the cap height you will actually get. Pairings carry the size correction needed to make the two fonts look like the same size, which is the thing that makes a pairing work or not.

• Metrics read out of the font file

  x-height, cap height, units per em and average advance width come from each font’s own OS/2 table by way of the Capsize metrics project. Where a file reports nothing credible, the family is left out rather than guessed at.

  872 Google Font families are measured. A further 48 are excluded because their files report no x-height, or one below 0.35 em, which is not believable for a text face.

• The APCA x-height correction, applied for you

  APCA’s own specification says to divide its reference x-height by the x-height of the font you are actually using and multiply the minimum size by the result. The arithmetic is in the spec; doing it automatically, against real metrics, is the unusual part.

  The reference is 0.52 em, close to Helvetica at 0.523. EB Garamond measures 0.400 em, so its minimum size is multiplied by 0.52 ÷ 0.400 = 1.3.

• Line length treated as part of the scale

  A body size only means something in relation to the column it sits in. Characters per line are counted from the font’s real average advance width at five viewports, not from the usual guess of half the font size, which is badly wrong for condensed and monospaced faces.

  WCAG 1.4.8 caps a block of text at 80 characters. Inter at 16px in a column set to 62% of the viewport reaches about 117 characters at 1440px.

• Pairings that carry their size correction

  Two families at the same nominal size rarely look the same size. Each pairing states the adjustment that makes them match and what it is for, so the list is a set of decisions rather than a mood board.

  40 pairs, 29 of them carrying a citation to the foundry, designer or specimen behind the recommendation.

• A font identified from a picture, never uploaded

  The font finder compares each letter you crop with the same letter in every font it knows, in a Web Worker on your device. Paid fonts cannot be matched, so they come back as documented free relatives, each labelled with the basis for the link.

  1,956 Google Fonts families. On 150 test screenshots the right family was first 82.7% of the time and in the top five 90.7%; on small, blurry text, in the top five 62.5%.

• Confidence in words, tied to a measured hit rate

  A match score is a distance, not a probability, so the font finder prints no percentage. It says “Very likely” only for scores that were the right answer 91% of the time on test images, and “Possibly” for scores that were right about half the time.

  Calibrated on 360 validation images: a first result scoring 1 or less was right 91% of the time (162 images), one scoring 3 to 10 right 48% (56 images).

1. 1

   Choose the typeface before the size

   The size question has no answer without the family, because the answer is set by x-height rather than by the nominal number. Fixing on 16px and then choosing a font is doing it in the wrong order.

2. 2

   Get the minimum size for the contrast you are shipping

   Minimum readable size depends on the colour pair as well as the face. A pair that only just clears AA needs more size than one that clears it comfortably, so feed in the colours you are actually using.

3. 3

   Build the scale with two ratios

   A ratio that looks confident on a desktop runs a heading off the edge of a phone. Use a flatter ratio at the narrow end and a fuller one at the wide end, and express each step as a clamp() with rem endpoints so a reader’s own default size still applies.

4. 4

   Check the measure at every breakpoint

   A percentage-width column sails past 80 characters on a wide screen with nothing visibly breaking. Read the character count at each viewport and cap the column rather than shrinking the text.

5. 5

   Trim the box

   Every line carries empty space above the capitals and below the baseline. text-box-trim removes it so the box matches the letters; it reached Baseline across all engines in August 2026, so it can be shipped rather than approximated with negative margins.

• You need a minimum body size for a specific font

  Type legibility checker

  It corrects for the family’s real x-height and for your contrast, both of which change the answer.

• You need a full scale for a design system

  Type scale generator

  Fluid steps with real cap heights, and line length checked against WCAG 1.4.8 at each viewport.

• You have a picture of text and want the font

  Font finder

  It matches the letters in your crop against 1,956 free families in your browser, and says in words how far to trust the answer.

• You are choosing two typefaces

  Font pairings

  Forty pairs, twenty-nine with a citation, each carrying the size correction that makes the two look like the same size.

• Metrics for 872 Google Font families are read from the font files themselves rather than estimated; 48 further families are excluded for reporting no credible x-height.

• APCA’s reference x-height is 0.52 em; a family above or below that needs its minimum size corrected by the ratio, which for EB Garamond at 0.400 em is a factor of 1.3.

• WCAG 1.4.8 sets 80 characters as the line-length ceiling for a block of text.

• text-box-trim reached Baseline across all browser engines in August 2026.

• The font finder’s shape database covers 1,956 Google Fonts families in 3.1 MB (gzip), downloaded once on the first search; the image you search with is never uploaded.

• Reference

  Font pairings

  Pairs that work, with the correction that makes them work.

• 9 tools

  Colour

  Check it, fix it, extract it, turn it into a system.

• 4 tools

  CSS

  Gradients and surfaces as CSS you paste, measured as they will paint.

• 3 tools

  Branding

  Marks, codes and sheets — the things that carry the brand.

• 6 tools

  Writing

  Resumes, cover letters, word counts and interface copy, held to the same standard as the pixels.

• 15 tools

  PDF

  Merge, split, protect and convert — none of it uploaded.

• 3 tools

  Video & audio

  Trim, extract and convert — decoded by your own browser, not a server.

• 14 tools

  Converters

  Change a file’s format or size, or a length’s unit, without anything leaving your device.