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'
}