Share
Modular type scale (golden ratio, perfect fourth, etc.).
:root {
--fs-2: 0.640rem; /* 10.2px */
--fs-1: 0.800rem; /* 12.8px */
--fs-base: 1.000rem; /* 16.0px */
--fs-1: 1.250rem; /* 20.0px */
--fs-2: 1.563rem; /* 25.0px */
--fs-3: 1.953rem; /* 31.3px */
--fs-4: 2.441rem; /* 39.1px */
--fs-5: 3.052rem; /* 48.8px */
--fs-6: 3.815rem; /* 61.0px */
--fs-7: 4.768rem; /* 76.3px */
}// tailwind.config.ts (or .css `@theme`)
fontSize: {
'xs': '0.640rem',
'sm': '0.800rem',
'base': '1.000rem',
'lg': '1.250rem',
'xl': '1.563rem',
'2xl': '1.953rem',
'3xl': '2.441rem',
'4xl': '3.052rem',
'5xl': '3.815rem',
'6xl': '4.768rem',
}Create a modular type scale for your design system. Pick a base size, ratio (minor second through golden ratio), and number of steps. Live preview with each step labeled and px values. Copy as CSS custom properties or Tailwind theme.
Share this tool