Il1| O0o rn m g a & @ ? ! “” ’
Readability depends on more than the font: size, spacing and line length matter too. This paragraph is set at 17px with comfortable line spacing so you can judge each font as body text.
- Category
- Weights
- x-height ÷ cap height
- Relative width of sample
Metrics are measured in your browser from the loaded font files. Relative width compares how much horizontal space the same text takes; 100% is the narrowest font shown.
What to look for when comparing fonts
All fonts in the comparison share the same text and settings, so the differences you see come from the designs themselves. Focus on a few characteristics:
- x-height. The height of lowercase letters relative to capitals. A higher ratio usually makes text look larger and read more easily at small sizes. The tool measures it in your browser from the loaded font.
- Width. Wider fonts fit fewer words per line. The relative width figure shows how much horizontal space the same sample takes compared with the narrowest font shown.
- Ambiguous characters. The tricky characters row includes capital I, lowercase l, the digit 1 and the vertical bar, as well as O and 0. Clear distinctions matter for code, product names and data.
- Texture at reading size. The paragraph row is set at 17px so you can judge how each font behaves as body text, not just as a specimen.
If a font does not have the selected weight, it uses the closest available one and tells you which. When you have a winner, open it in the Font Playground or read serif versus sans-serif fonts for help deciding between styles.