Typography Scale Calculator - CSS Export

Generate harmonious type scales for web design. Popular ratios with live preview and CSS custom properties export. Free design tool.

Scale +6
89.8px
5.6102rem
--font-size-6
Scale +5
67.3px
4.2087rem
--font-size-5
Scale +4
50.5px
3.1573rem
--font-size-4
Scale +3
37.9px
2.3686rem
--font-size-3
Scale +2
28.4px
1.7769rem
--font-size-2
Scale +1
21.3px
1.333rem
--font-size-1
Base
16px
1rem
--font-size-base
Scale -1
12px
0.7502rem
--font-size-sm-1
Scale -2
9px
0.5628rem
--font-size-sm-2
:root {
  --font-size-sm-2: 0.5628rem; /* 9px */
  --font-size-sm-1: 0.7502rem; /* 12px */
  --font-size-base: 1rem; /* 16px */
  --font-size-1: 1.333rem; /* 21.3px */
  --font-size-2: 1.7769rem; /* 28.4px */
  --font-size-3: 2.3686rem; /* 37.9px */
  --font-size-4: 3.1573rem; /* 50.5px */
  --font-size-5: 4.2087rem; /* 67.3px */
  --font-size-6: 5.6102rem; /* 89.8px */
}

Typography Scale Calculator - Harmonious Type Scales

Generate a harmonious typography scale for your web project using classic musical and mathematical ratios. Choose from presets like Minor Third, Perfect Fourth, or the Golden Ratio, or enter a custom ratio. The calculator shows 6 sizes above and 2 below your base size, with pixel values, rem values, and ready-to-use CSS custom properties.

A consistent type scale is the foundation of good web typography. Rather than picking arbitrary font sizes, a modular scale creates visual harmony by using a single ratio to derive all sizes from one base value. This tool makes it easy to experiment with different ratios and export the result as CSS variables.

The ratio you choose determines the visual contrast between heading levels. A Minor Third (1.2) produces subtle size differences suited for dense interfaces like dashboards and data tables. A Perfect Fourth (1.333) works well for most websites. The Golden Ratio (1.618) creates dramatic contrast ideal for editorial layouts, marketing pages, and portfolios.

Using rem units instead of pixels ensures your typography scale respects the user's browser font size setting. If a user sets their default to 18px instead of 16px, all rem-based sizes scale proportionally. This is an important accessibility consideration: approximately 30% of users change their browser's default font size.

After generating your type scale, apply it consistently across your entire project using CSS custom properties. Define variables like --text-sm, --text-base, --text-lg, and --text-xl, then reference them throughout your stylesheets. This approach makes global typography changes as simple as updating the base size or ratio in one place.

How the Typography Scale Calculator Works

  1. 01Set your base font size in pixels (default is 16px)
  2. 02Choose a scale ratio from presets like Perfect Fourth or Golden Ratio, or enter a custom value
  3. 03View 9 sizes - 6 above and 2 below your base - with pixel and rem values
  4. 04See a live preview of each size with sample text
  5. 05Copy all sizes as CSS custom properties with one click

Modular Type Scales in Web Design

A modular type scale uses a consistent ratio to generate all font sizes from a single base value. This creates natural visual rhythm and hierarchy. Popular ratios include the Perfect Fourth (1.333) for compact interfaces, the Major Third (1.25) for balanced readability, and the Golden Ratio (1.618) for dramatic contrast. Start with a 16px base (the browser default) and adjust based on your design needs. Use the generated CSS custom properties for consistent sizing across your entire project.

When to Use a Typography Scale Calculator

Use this calculator at the start of any web design project to establish a consistent type hierarchy. It is essential when creating a design system, setting up CSS custom properties for a new codebase, or evaluating whether a different scale ratio would improve the readability and visual rhythm of an existing site.

Common Use Cases

  • Establishing a consistent type hierarchy for a new website or design system
  • Generating CSS custom properties for font sizes to use across an entire project
  • Experimenting with different scale ratios to find the right visual rhythm for a layout
  • Pairing with a font selection to preview heading and body text size relationships Typography Scale Calculator - CSS Export

Expert Tips

  • Use rem units in production - they scale with the user's browser font size setting, improving accessibility for users who need larger text.
  • For responsive typography, consider using a smaller ratio on mobile (1.2) and a larger one on desktop (1.333) via a CSS media query.
  • Limit your type scale to 6-8 distinct sizes. More than that creates visual noise and makes it hard to maintain a clear hierarchy.

Frequently Asked Questions

Which scale ratio should I choose?→
For most websites, the Major Third (1.25) or Perfect Fourth (1.333) works well. Use a smaller ratio like Minor Third (1.2) for dense interfaces with many text levels. Use larger ratios like the Golden Ratio (1.618) for editorial or marketing pages with dramatic headlines.
What base font size should I use?→
16px is the browser default and the most common base size. Use 18px for content-heavy sites where readability is paramount. Using rem units based on the browser default (1rem = 16px) ensures your scale respects user preferences.
How do I apply the generated scale in my CSS?→
Copy the CSS custom properties output and paste them into your stylesheet's :root block. Then use variables like var(--text-lg) or var(--text-xl) in your component styles instead of hardcoded pixel values.

Related tools

12 suggested

From the blog

Further reading