Sixteen pixels is not sixteen pixels
Set fourteen typefaces at the same size. Do they look the same size?
No. At the same font size, the lowercase of Merriweather is 37% taller than the lowercase of EB Garamond.
| Typeface | x-height | Size that matches Inter at 16 px | |
|---|---|---|---|
| Merriweather | 55.5% | 15.7 px | |
| Poppins | 54.8% | 15.9 px | |
| Inter | 54.6% | 16.0 px | |
| Open Sans | 53.5% | 16.3 px | |
| Roboto | 52.8% | 16.5 px | |
| Montserrat | 52.5% | 16.6 px | |
| Rubik | 52.0% | 16.8 px | |
| IBM Plex Sans | 51.6% | 16.9 px | |
| Playfair Display | 51.5% | 17.0 px | |
| Lato | 50.6% | 17.2 px | |
| Work Sans | 50.0% | 17.5 px | |
| Lora | 50.0% | 17.5 px | |
| Source Sans 3 | 48.6% | 18.0 px | |
| EB Garamond | 40.5% | 21.6 px |
How it was measured
- Each typeface was loaded from Google Fonts at regular weight (400).
- The height of the lowercase x was read from the glyph outline in the browser's canvas, at 1000 px, and divided by the font size.
- The last column is 16 × (Inter's x-height ÷ this typeface's x-height).
What this test does not cover
- One weight per typeface. Other weights and optical sizes differ.
- x-height is one part of apparent size. Width, weight and spacing also count.
What to do with it
- Choose body text size by eye, per typeface. A size that works in one face is too small or too big in another.
- When you swap EB Garamond for a sans, or the other way round, change the size too.
- Compare typefaces at matched x-height, not at matched point size.
Found a mistake? Write to @witchofdesign. Corrections to the tests are listed on the About page.