Typography Scale Calculator
Calculate harmonious modular typography scales for your web design system
Safe conversion with no data sent to server
CSS Output
:root {
--text-xs: 0.640rem;
--text-sm: 0.800rem;
--text-base: 1.000rem;
--text-lg: 1.250rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
--text-3xl: 2.441rem;
--text-4xl: 3.052rem;
}What is a Typographic Scale?
A typographic scale (or modular scale) is a series of font sizes systematically derived from a base size and a specific ratio. By consistently multiplying by a single ratio, you create a harmonious set of font sizes rather than picking random values.
How to Choose the Right Type Scale for Your Design
Different scales evoke different feelings. The Minor Second (1.067) creates subtle distinctions perfect for dense dashboards. The Major Third (1.250) offers bold, clear hierarchy typical for standard blogs. The Golden Ratio (1.618) provides extreme contrast for artistic, striking layouts.
Modular Scale in Web Typography
Modern CSS makes it incredibly easy to implement a typographic scale using Custom Properties (Variables). By defining sizes like --text-sm or --text-xl in your root block, you can maintain consistent responsive hierarchies easily. Our tool calculates these exact REM values for you automatically.