CalculateY
Quick Answer
A 16px base with a Major Third ratio (1.250) produces a scale of 12.8px (sm), 16px (base), 20px (lg), 25px (xl), 31.25px (2xl), and 39.06px (3xl).
Scale Settings
Common Examples
| Input | Result |
|---|---|
| 16px base, 1.250 Major Third, 4 steps | 16px, 20px, 25px, 31.25px, 39.06px |
| 16px base, 1.333 Perfect Fourth, 3 steps | 16px, 21.33px, 28.43px, 37.9px |
| 18px base, 1.200 Minor Third, 5 steps | 18px, 21.6px, 25.92px, 31.1px, 37.32px, 44.79px |
| 16px base, 1.618 Golden Ratio, 3 steps | 16px, 25.89px, 41.89px, 67.77px |
How It Works
A modular type scale creates a set of font sizes by repeatedly multiplying a base value by a fixed ratio. This produces sizes that share a mathematical relationship, creating visual harmony similar to musical intervals.
The Formula
size = base x ratio^step
Where:
- base is the root font size (commonly 16px)
- ratio is the chosen scale factor
- step is the position in the scale (0 = base, 1 = first heading size, -1 = smaller text)
Common Ratios
Each ratio is named after a musical interval:
- 1.067 Minor Second: very subtle differences, good for dense UI
- 1.125 Major Second: moderate contrast, popular for body-heavy content
- 1.200 Minor Third: balanced contrast, versatile for most designs
- 1.250 Major Third: classic web typography ratio, strong hierarchy
- 1.333 Perfect Fourth: pronounced contrast, common in editorial design
- 1.414 Augmented Fourth: high contrast between levels
- 1.500 Perfect Fifth: dramatic contrast, suited to hero-driven layouts
- 1.618 Golden Ratio: maximum contrast, best used with fewer steps
Worked Example
For a 16px base with a Major Third ratio (1.250) and 3 steps above:
- Step -2: 16 x 1.250^(-2) = 16 / 1.5625 = 10.24px (xs)
- Step -1: 16 x 1.250^(-1) = 16 / 1.250 = 12.8px (sm)
- Step 0: 16 x 1.250^0 = 16px (base)
- Step 1: 16 x 1.250^1 = 20px (lg)
- Step 2: 16 x 1.250^2 = 25px (xl)
- Step 3: 16 x 1.250^3 = 31.25px (2xl)
In rem (assuming 16px root): 0.64rem, 0.8rem, 1rem, 1.25rem, 1.563rem, 1.953rem.
The resulting CSS custom properties can be used throughout a project for consistent sizing:
:root {
--font-size-xs: 0.64rem;
--font-size-sm: 0.8rem;
--font-size-base: 1rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.563rem;
--font-size-2xl: 1.953rem;
}
Related Calculators
Frequently Asked Questions
What is the most popular type scale ratio for web design?
The Major Third (1.250) and Perfect Fourth (1.333) are the most commonly used ratios in web design. The Major Third provides clear hierarchy without excessive contrast between sizes, making it well suited to content-heavy sites. Tailwind CSS uses a custom scale that falls close to a Major Second (1.125) for smaller sizes and increases for larger headings.
How do I choose between different type scale ratios?
Smaller ratios (1.067, 1.125) work well for interfaces with many text levels that need subtle differentiation. Larger ratios (1.414, 1.618) create dramatic contrast and work better for marketing pages or designs with fewer heading levels. A good starting point is the Major Third (1.250), then adjust based on the number of distinct sizes needed.
What base size should I use?
16px is the browser default and the most common base size. It provides comfortable reading at typical viewing distances. Some designers prefer 18px for content-heavy sites or 14px for dense data interfaces. The base size should be your primary body text size.
Why use rem instead of px for the generated scale?
Rem units respect user browser font-size preferences. If a user sets their default size to 20px for accessibility, all rem-based values scale proportionally. Pixel values remain fixed regardless of user preferences. Using rem for your type scale ensures the entire typographic hierarchy adapts to user settings.
Can I use a custom ratio not in the preset list?
The presets cover the most common musical-interval ratios, but any positive number greater than 1 works as a ratio. Some designers use ratios derived from their layout grid or brand proportions. The formula (base x ratio^step) works with any ratio value.