Type Scale
Type scale generator for modular typography. Choose a base font size and ratio to create readable heading, body, and label sizes.
Adjust the base size and scale ratio on the left, see the size ladder in the middle, and preview a simple page on the right.
Stronger hierarchy that is also widely used in design systems.
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
Design better interfaces with a clear type scale
Use this type scale to design typography systems for product interfaces. Adjust the sizes here, then reuse the tokens in Figma, code, or design handoff.
No credit card required. Adjust sizes here and copy the tokens into your design.