Type Scale Calculator
Generate a harmonious type scale based on a base font size and ratio. Choose from classic ratios like Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), Golden Ratio (1.618), or enter a custom ratio. Preview all sizes from caption to h1 with pixel and rem values. Export as CSS custom properties for your design system. Essential for creating consistent typography hierarchies.
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
:root {
--font-size-xs: 0.563rem; /* 9px */
--font-size-sm: 0.75rem; /* 12px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.333rem; /* 21.33px */
--font-size-xl: 1.777rem; /* 28.43px */
--font-size-2xl: 2.369rem; /* 37.9px */
--font-size-3xl: 3.157rem; /* 50.52px */
--font-size-4xl: 4.209rem; /* 67.34px */
}How to Use
- 1
Set Base Size
Enter your base body text size in pixels (default 16px).
- 2
Choose Ratio
Select a modular scale ratio or enter a custom value.
- 3
Export Scale
Copy the generated type scale as CSS custom properties for your project.
Examples by Niche
Base: 18px, Ratio: 1.25 (Major Third) — produces sizes from 11.52px (xs) to 68.66px (4xl)
Base: 14px, Ratio: 1.2 (Minor Third) — tighter scale for data-dense interfaces
Base: 16px, Ratio: 1.333 (Perfect Fourth) — dramatic contrast for impactful headings
Frequently Asked Questions
What ratio should I choose?
Minor Third (1.2) works well for body-heavy content like blogs. Major Third (1.25) is a popular default. Perfect Fourth (1.333) creates more dramatic contrast. Golden Ratio (1.618) is best for display-heavy designs.
What is the base size?
The base size is your body text size, typically 16px (the browser default). All other sizes in the scale are calculated relative to this base using the chosen ratio.
Can I export the scale as CSS?
Yes, the tool outputs CSS custom properties (--text-xs, --text-sm, --text-base, --text-lg, --text-xl, etc.) that you can paste directly into your stylesheet or design system.
What is the most commonly used type scale ratio?
The most popular ratio for web design is 1.25 (Major Third), which creates a balanced progression that works well across screen sizes. Other common choices include 1.2 (Minor Third) for compact interfaces, 1.333 (Perfect Fourth) for content-heavy sites, and 1.618 (Golden Ratio) for dramatic editorial layouts.
Related Tools
AI Font Pair Suggester
Get AI-powered font pairing suggestions for headings and body text based on your project.
CSS Text Shadow Generator
Design CSS text shadows visually with live preview and instant code export.
Google Fonts Preview
Preview and compare Google Fonts with your own text, sizes, and weights.
Related Articles
Free Typography Tools for Web Designers: Font Pairing, Type Scales, and Text Styling
A practical guide to free typography tools for web designers and developers. Learn how to pair fonts, calculate type scales, convert CSS units, and style text — all without paid software.
12 Free CSS Generators Every Web Designer Should Bookmark in 2026: Build Layouts, Shadows, Gradients, and More Without Writing Code
Discover 12 free, browser-based CSS generators and design tools for web designers in 2026 — gradients, shadows, grids, flexbox, patterns, and layout utilities that replace paid design software.