What is Typography Tester?

Typography Tester lets you tweak font properties and see results in real time. Pick a font family, adjust size, weight, line height, and spacing, then copy the CSS straight into your project.

The tester lets you set font family, size, weight (100 to 900), line height, letter spacing, word spacing, alignment, text transform, and colour. Editable sample text means you can preview your actual headlines or paragraphs, and the CSS output panel is one click away from being pasted into a stylesheet or a styled component.

How to use

1. Enter or paste your sample text in the preview area.
2. Adjust typography controls: font family, size, weight, line height, letter spacing, and word spacing.
3. Copy the CSS output to use the typography settings directly in your project.

When to use

• Tuning blog post body type until 18 px Inter with 1.6 line height reads comfortably on a phone.
• Testing a long article in 16, 17, and 18 px to find which size keeps users reading.
• Checking whether bumped letter-spacing fixes the cramped look of an all-caps button label.

Result

A web designer tests 'Inter' at 18px with 1.6 line height and 0.02em letter spacing, then copies the CSS for their blog stylesheet.

FAQ

What's a good line height for body text?

For long-form paragraphs at 16 to 18 px, line height between 1.5 and 1.7 reads comfortably on screens. Headings benefit from tighter values, usually 1.1 to 1.3. Type the heading and the paragraph in the sample box to compare side by side.

Why does my letter spacing input use em instead of px?

Em scales with the font size, so a 0.02em tracking value looks proportionally similar whether the text is 14 px or 48 px. Pixel-based tracking, by contrast, looks correct at one size and wrong at the others.

Which font weights are actually safe to use on the web?

Modern Google Fonts and variable fonts support 100 to 900, but some self-hosted fonts only ship 400 and 700. If your chosen weight collapses to a default look in the preview, the font likely lacks that weight and the browser is substituting a faux style.

Can I test fonts that aren't pre-loaded by the page?

Pick from the built-in font menu — it has a search box plus Sans / Serif / Monospace / System filters, and any Google Font you choose loads automatically. Switch to Gallery view to see your sample text rendered in every font at once, or turn on Compare to put two faces side by side. Uploading a custom font file isn't supported here; for a self-hosted face you'd embed @font-face on your own site.

How do I copy the CSS into a React or Tailwind project?

Click Copy CSS to copy each property as a vanilla declaration. In React, paste into a styled-components template literal or convert each line to a camelCase key. In Tailwind, map size and weight to utility classes and keep custom letter/line spacing in arbitrary value syntax.

Related Tools