Type Scale Generator
Scale type
Fixed sizes
Fluid (clamp)
Base size
px
Ratio
1.067 · Minor second
1.125 · Major second
1.200 · Minor third
1.250 · Major third
1.333 · Perfect fourth
1.414 · Augmented fourth
1.500 · Perfect fifth
1.600 · Minor sixth
1.618 · Golden ratio
1.667 · Major sixth
1.778 · Minor seventh
1.875 · Major seventh
2.000 · Octave
Custom…
Small screen
Large screen
Viewport
px
px
Base size
px
px
Ratio
Custom ratio
Steps up
Steps down
Output unit
rem
px
Variable names
step-1, step-2
text-lg, text-xl
Snap line heights to a 4 px grid
Preview font
System sans
Georgia (serif)
Inter
Fraunces
Space Grotesk
Preview text
Preview at viewport width
820px
Export as
CSS custom properties
CSS + utility classes
SCSS variables
Tailwind theme (fontSize)
Design tokens (JSON)
Copy code
Download .css
Share scale
Type Scale Generator by ArtsInterstices