Web Typography
CSS clamp() Generator
Scale Preview
800px
200px2000px
h151.1px
The Art of Typography
h242.0px
Hierarchy and Rhythm
h334.6px
Fluid Type Scaling
h428.5px
Responsive Design
h523.5px
Line Height Matters
h619.4px
Details Count
body16.0px
Good typography is invisible. Great typography speaks to the reader without ever being noticed. It carries meaning through form.
small12.8px
Caption and metadata text at smaller sizes.
Scale Configuration
0.75
Controls how much sizes compress at the minimum viewport. Lower = more compression for larger headings.
Generated CSS
/* small: 13.5px -- 12.8px */ --fs-small: clamp(0.8459rem, -0.0656vw + 0.859rem, 0.8rem);/* body: 16.0px -- 16.0px */ --fs-body: clamp(1rem, 0vw + 1rem, 1rem);/* h6: 18.9px -- 20.0px */ --fs-h6: clamp(1.1822rem, 0.0969vw + 1.1628rem, 1.25rem);/* h5: 22.4px -- 25.0px */ --fs-h5: clamp(1.3975rem, 0.2357vw + 1.3504rem, 1.5625rem);/* h4: 26.4px -- 31.3px */ --fs-h4: clamp(1.6521rem, 0.43vw + 1.5661rem, 1.9531rem);/* h3: 31.3px -- 39.1px */ --fs-h3: clamp(1.9531rem, 0.6975vw + 1.8136rem, 2.4414rem);/* h2: 36.9px -- 48.8px */ --fs-h2: clamp(2.3089rem, 1.0612vw + 2.0967rem, 3.0518rem);/* h1: 43.7px -- 61.0px */ --fs-h1: clamp(2.7296rem, 1.5502vw + 2.4195rem, 3.8147rem);