Specimen sheet no. 1 / type metrics, measured on this device

Same font-size. Much bigger letters.

Set eight typefaces at exactly 52 px and their lowercase letters are not even close to the same height. Flip the switch to see what happens when you match the letters instead of the number.

...Loading the fonts and measuring them in your browser.

Can you match them by eye?

The top line is set in one font at 44 px. Drag the slider until the lowercase letters in the second font look the same size. Five rounds. Then see how a browser's default, "same font-size", would have scored.

Reference
Yours

Every font has its own x-height

The x-height is how tall a lowercase "x" is, divided by the font size. Tap a row to use it in the next block.

x-heightcap height (both as a share of font-size)

The CSS fix: font-size-adjust

When a fallback font or an inline snippet uses a different typeface, text jumps in size mid-line. The property font-size-adjust scales every font in the element to the same x-height ratio. Below, the sentence uses Inter with a second font mixed in.

Ship the tiny bug fix before lunch, then write sunrise gardens in the changelog.

      
 

      

    

  


  

    
How this was measured

    
Every number on this page is measured live in your browser. Each typeface is loaded, then the canvas TextMetrics of a lowercase "x" and a capital "H" at 100 px give the x-height and cap height ratios. Nothing is typed in by hand, so a font that fails to load simply drops out.

    
Sources: typefaces Inter, Lora, Playfair Display, Space Mono, Oswald, Quicksand, Josefin Sans and Caveat, Latin 400 weight, served by Fontsource packages (version 5.3.0, latest on the npm registry when this was built) through the jsDelivr CDN.