What is Font Size Tester?

Type any text and see it at every size from 8px to 96px. Switch between px, rem, and pt units, and tweak line height and letter spacing to nail your typography.

Drop in any phrase and it renders simultaneously at 14 sizes, from a tiny 8 px caption to a 96 px hero. Switch the unit between px, rem, and pt; nudge line-height and letter-spacing live. Useful when you want to see exactly where text becomes uncomfortable to read, or how it'll look in a button at 14 px versus 16 px before you commit to CSS.

How to use

1. Step 1 — Type or paste the text you want to test.
2. Step 2 — Adjust the size range and unit (px, rem, or pt) to preview.
3. Step 3 — Compare all sizes side by side to pick the best option for your design.

When to use

• Picking a navigation label size that stays readable but doesn't crowd the bar.
• Comparing 14 px and 16 px body copy to settle a design-team disagreement.
• Translating a designer's px spec to rem so the page respects user font preferences.

Result

Testing a navigation label: type 'Dashboard' and compare it at 12px, 14px, and 16px to find the most readable size without wasting space.

FAQ

Should I use px, rem, or pt for web font sizes?

Use rem for body text and components: it scales with the user's root font size, which matters for accessibility. Reserve px for borders or very small icons that should stay exact. Pt is mostly a print-era unit; avoid it for screens.

What's a sensible body font size?

16 px (1 rem) is the de facto baseline for paragraphs on the web. Drop to 14 px only for secondary text like captions and labels. Sites that go below 14 px for primary text usually fail accessibility audits and frustrate readers on small screens.

How does line-height affect readability?

Aim for 1.4 to 1.6 for body text. Tighter values feel cramped; looser ones break the visual rhythm between paragraphs. Headings can run tighter (around 1.1 to 1.2) because the lines are usually short anyway.

When should I adjust letter-spacing (tracking)?

Open up tracking slightly (around 0.05 em) for all-caps labels, where the default kerning looks too tight. Pull it in (–0.01 to –0.02 em) for very large display headlines. Leave body copy alone — the font designer already optimised it.

Is the WCAG minimum font size really 16 px?

WCAG doesn't set a hard minimum, but it requires text to scale to 200% without breaking layout. In practice, starting body copy at 16 px and using relative units makes that easy. Smaller defaults force users to zoom, which most won't bother to do.

Related Tools