Type Scale Calculator
Generate a modular type scale based on a base size and ratio.
px
Result
Type Scale
xs: 10.24px (0.64rem)
sm: 12.8px (0.8rem)
base: 16px (1rem)
lg: 20px (1.25rem)
xl: 25px (1.563rem)
2xl: 31.25px (1.953rem)
3xl: 39.06px (2.441rem)
4xl: 48.83px (3.052rem)
5xl: 61.04px (3.815rem)CSS Variables
--text-xs: 0.64rem;
--text-sm: 0.8rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.563rem;
--text-2xl: 1.953rem;
--text-3xl: 2.441rem;
--text-4xl: 3.052rem;
--text-5xl: 3.815rem;Tailwind Config
fontSize: {
'xs': '0.64rem',
'sm': '0.8rem',
'base': '1rem',
'lg': '1.25rem',
'xl': '1.563rem',
'2xl': '1.953rem',
'3xl': '2.441rem',
'4xl': '3.052rem',
'5xl': '3.815rem'
}About This Tool
The Type Scale Calculator generates proven font pairing suggestions for headings and body text based on design principles. Designers and developers use it to create harmonious typography systems quickly without manual research or guesswork.
Select your preferred heading font and the tool suggests complementary body fonts from curated pairings. You get preview samples at different sizes, viewing how combinations look in real context with proper hierarchy and readability.
Build consistent, professional typography in minutes. Everything runs in your browser with zero data transmission—no tracking, no signup, completely confidential.