Recommended Starting Points
Mobile Base 16px
Desktop Base 18 – 20px
Min Viewport 320 – 400px
Max Viewport 1280 – 1440px
Blog / Content 1.125 – 1.200
Marketing / Landing 1.250 – 1.333
Body Line Height 1.5 – 1.6
Heading Line Height 1.1 – 1.25
Use the same ratio on both mobile & desktop for uniform scaling. Or use a tighter ratio on mobile (e.g. Major Second 1.125) and a wider ratio on desktop (e.g. Minor Third 1.200) for more dramatic heading hierarchy on larger screens.
Minimum (Mobile)
At this minimum viewport width, font sizes are computed as base × ratiopower.
px
Maximum (Desktop)
At this maximum viewport width, font sizes are computed as base × ratiopower.
px
Type Scale Steps
Comma-separated step names in ascending size order. Choose your baseline step.
Variable Prefix
CSS custom property prefix. a-z, 0-9, _, -
Rem Value
Pixel value of 1rem. Defaults to 16px.
Viewport Unit
Unit for the preferred clamp value.
CSS Variables
Quick Copy
Preview your type scale
1280
StepMinMaxRenderedPreview
Min Viewport
Minimum screen width for clamp calculation.
px
Max Viewport
Maximum screen width for clamp calculation.
px
Rem Base
Pixel value of 1rem for conversion.
px
Label Min (px) Max (px) Generated Clamp
Generated CSS
Suggested Styles
Add typography rows to see suggestions