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.
: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
- Set your base font size in pixels (default is 16px)
- Choose a scale ratio from presets like Perfect Fourth or Golden Ratio, or enter a custom value
- View 9 sizes — 6 above and 2 below your base — with pixel and rem values
- See a live preview of each size with sample text
- Copy 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
- 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.
- 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.
- 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.
Which scale ratio should I choose?▾
What base font size should I use?▾
How do I apply the generated scale in my CSS?▾
Related Tools
Color Converter — HEX, RGB, HSL & CMYK
Convert colors between HEX, RGB, HSL, and CMYK instantly. Live preview, one-click copy. Free tool for designers and developers.
Color Picker — HEX, RGB & HSL Values
Pick colors from a visual spectrum and get HEX, RGB, and HSL values. Save history, view harmonies. Free online color picker.
Color Palette Generator — Harmonious Schemes
Generate harmonious color palettes based on color theory. Copy HEX codes instantly. Free design tool for beautiful color combinations.
Color Contrast Checker — WCAG Accessibility
Check color combinations against WCAG 2.1 AA and AAA accessibility standards. See contrast ratio and pass/fail status. Free tool.
CSS Grid Generator — Drag & Drop Builder
Build CSS grid layouts visually with drag-to-resize columns and rows. Live preview with ready-to-copy CSS. Free online tool.
CSS Flexbox Generator — Visual Builder
Build CSS flexbox layouts visually with live preview and ready-to-copy code export. Free online flexbox playground.