Typeface Tester

Why typefaces look different even at the same size

Two fonts set at 32px are rarely the same visual size. The number you choose is the em box height, but how much of that box the actual letters fill — the x-height, the length of ascenders and descenders, and the width of each glyph — varies enormously between designs. That is why a paragraph in Inter looks larger and more open than the same paragraph in Merriweather at an identical pixel size. A tester exists precisely because specs on paper lie; you have to see your real words in the real font before you trust it. This tool loads its fonts directly from Google Fonts (a request goes out to fonts.googleapis.com when you pick one), then renders your text live so you judge the typeface, not a sample image.

The five controls and what they really affect

Note that the weight dropdown offers 100, 300, 400, 500, 600, 700, and 900 because those are the specific weights the tool requests from Google Fonts. Not every typeface ships every weight; if a chosen weight looks identical to 400, that font simply does not include it and the browser falls back to the nearest available one.

A worked example: tuning body text

Suppose you are setting article paragraphs. Start at 16–18px, weight 400. Body text almost always reads better with line height between 1.4 and 1.6 — the tool defaults to 1.4, which is a sensible floor. Set it too tight (1.0) and lines visually collide; set it too loose (2.5) and the eye loses its place jumping to the next line. Now set letter spacing to 0: at text sizes the font's designer already spaced the letters correctly, and adding tracking only hurts. Finally, test contrast — dark gray text such as #1f2937 on a near-white #f9fafb background (the defaults here) is easier on the eyes for long reading than pure black on pure white.

When letter spacing actually helps

The single rule worth memorizing: add tracking to uppercase, subtract it from nothing. All-caps words have no lowercase shapes to create rhythm, so a small positive letter spacing (0.5–2px) makes headings like OUR SERVICES breathe. Conversely, large display headlines often look better with slightly negative spacing (down to about -1px) because big type exaggerates the gaps the designer optimized for small sizes. Use the size slider to jump to 60px+ and watch the gaps open up — that is the moment to dial spacing back.

Comparing two fonts side by side

Tick Compare two fonts to reveal a second panel with its own independent controls. This is the tool's most useful mode: the shared text box feeds both panels, so the same words render in both typefaces at once. Use it to settle real decisions — pair a display font against a body font, or test whether your chosen heading face holds up against a safe fallback. Because both panels share your text, you are comparing the fonts on your content, not on a generic pangram.

Practical tips and common mistakes

• Test with your worst-case words. Replace the pangram with real strings you will use: a long product name, numbers, an email address. Fonts that look elegant in "Hamburgefonts" can stumble on rn (which reads as m) or on a zero versus a capital O.
• Don't judge weight by the label. One font's 700 Bold can be heavier than another's 900 Black. Look, don't read the number.
• Match line length to line height. Longer lines need more line height. If you plan wide paragraphs, push toward 1.6.
• Remember the network dependency. Each font you select is fetched from Google's CDN, so the very first render of a new font may flash a fallback for a moment before the real face arrives.
• Pick for the medium. Thin weights (100, 300) look refined on a crisp screen but can disappear in print or on low-resolution displays. When in doubt for body text, 400 is the safe default.