Type Scale
Type scale generator for modular typography. Choose a base font size and ratio to create readable heading, body, and label sizes.
Generate a consistent type scale for your design system.
px
Stronger hierarchy that is also widely used in design systems.
RGB
RGB
Sample
Sizes
Aa
H1
76.29px4.768 rem
Aa
H2
61.04px3.815 rem
Aa
H3
48.83px3.052 rem
Aa
H4
39.06px2.441 rem
Aa
H5
31.25px1.953 rem
Aa
H6
25px1.563 rem
Aa
Body
16px1 rem
Aa
Small
12.8px0.8 rem
Aa
X-small
10.24px0.64 rem
Page preview
Design system
Modular typography for design systems
↕16 px
A consistent scale helps maintain visual hierarchy and rhythm across your interface.
↕40 px
↕8 px
Adjust values and copy tokens directly to your workflow.