Type Scale Calculator
Set a base size and ratio to generate a harmonious modular type scale.
Export
:root {
--text-xs: 0.5625rem;
--text-sm: 0.7500rem;
--text-base: 1.0000rem;
--text-lg: 1.3331rem;
--text-xl: 1.7769rem;
--text-2xl: 2.3687rem;
--text-3xl: 3.1575rem;
--text-4xl: 4.2088rem;
--text-5xl: 5.6100rem;
--text-6xl: 7.4787rem;
}How to Use the Type Scale Generator
- 1.Set your Base Size in pixels - typically 16px (browser default) or your body text size.
- 2.Choose a Scale Ratio - Minor Third (1.2) for tight scales, Perfect Fourth (1.333) for standard, Major Third (1.25) for gentle.
- 3.The live preview shows all 10 scale steps from XS to display size, with px and rem values.
- 4.Select an export format: CSS variables, Tailwind fontSize config, or SCSS variables.
- 5.Click Copy and paste the scale into your project.
What is a Type Scale?
A typographic scale is a systematic set of font sizes that work harmoniously together. Rather than picking sizes arbitrarily (12px, 15px, 18px, 22px...), a modular scale derives each size by multiplying or dividing a base by a constant ratio. This creates mathematically proportional relationships between heading levels, subheadings, body text, captions, and labels - resulting in consistent visual rhythm across a design. The concept of ratios borrowed from music (octave = 2x, perfect fifth = 1.5, major third = 1.25, etc.) where proportional relationships create harmony. Design systems like Material Design, Fluent, and Polaris all define type scales. Using a generator ensures your font sizes follow a consistent rule rather than being chosen case-by-case, which reduces visual inconsistency and speeds up design decisions.
Frequently Asked Questions
What ratio should I use for a blog?
For body-heavy content like blogs, the Major Third (1.25) or Perfect Fourth (1.333) ratios are most common. They create clear heading differentiation without extremes - a 16px base with Major Third gives 20px, 25px, 31px, 39px for headings, which reads naturally at typical viewport sizes.
Why use rem instead of px for font sizes?
Rem (root em) units scale relative to the browser's root font size. Users who set their browser's default font larger (for accessibility) will see all rem-based text scale proportionally. Px values are absolute and override user preferences, which can be an accessibility barrier.
How do I add a custom type scale to Tailwind CSS?
Copy the Tailwind export and paste it into theme.extend.fontSize in your tailwind.config.js. This gives you custom utilities like text-scale-xl alongside Tailwind's built-ins.