Font Size Comparator — Compare Typography Scales
Compare the same text in different font sizes side by side. View stacked rows, grid cards, or typography scale with px/rem values and line height calculations.
Font Size Comparator
Compare the exact same text rendered at various typography sizes side-by-side or stacked. View typography scales in real-time, complete with calculated rem values and optimal line height calculations for design implementation. Fully customizable using system and web fonts.
Display Modes
- Stacked: Stacked rows vertically aligned for direct, baseline-by-baseline contrast of size, including pixel, rem, and line-height metadata.
- Grid Cards: Compact cards arranged in a grid with custom size bars that visually represent scale proportions.
- Typography Scale: An organized layout displaying the typography scale along with standard design names (e.g., base, xl, 3xl) to plan type systems.
Scale Reference
A reference mapping standard pixel sizes to named typography scale classes used in modern digital design systems:
| Size (Pixel) | Scale Name | Best Practice Usage |
|---|---|---|
| 10px | 2xs | Captions, micro-copy, status tags |
| 12px | xs | Secondary text, input labels, metadata |
| 14px | sm | Body small, list descriptions, buttons |
| 16px | base | Body text, main paragraphs, primary inputs |
| 18px | md | Lead body, emphasized text, small headers |
| 24px | lg | Subheadings, card titles, section headers |
| 32px | xl | H2 headings, modal titles, banner subtitles |
| 48px | 3xl | H1 page titles, hero subtitles, display type |
| 64px | 5xl | Hero headlines, marketing landing page banners |
How to Use
- Input Preview: Enter custom preview text to visually test letters and character widths.
- Select Font: Toggle between sans-serif, serif, and specific font families or weights.
- Switch Views: Click between Stacked, Grid, or Typography Scale buttons.
- Manage Sizing: Click the Add button to test custom sizes (8px-200px) or hit x to remove.
- Grab CSS: Click Copy CSS scale to get copy-paste ready custom CSS properties for your stylesheets.
FAQs
What is Font Size Comparator?
This tool lets you compare the same text rendered at different font sizes. You can view sizes in stacked rows, grid cards, or a complete typography scale with calculated rem values and optimal line heights.
What display modes are available?
Three display modes: Stacked (vertical comparison with metadata), Grid cards (compact card layout with size bars), and Typography scale (designed scale view with names).
How do I add or remove sizes?
Click the 'Add' button to add a new size (8-200px). Click the X on any size tag to remove it. Minimum 2 sizes required.
What is the Copy CSS feature?
Click 'Copy CSS scale' to copy a complete CSS custom properties block with all your active sizes converted to rem values.
Can I customize font family and weight?
Yes, choose from system fonts (sans-serif, serif, monospace), Google Fonts alternatives (Georgia, Times New Roman, Arial, Courier New), and font weights from light (300) to bold (700).