Fluid Typography Calculator

Create responsive font sizes that scale smoothly between breakpoints

Smallest size on narrow viewports (e.g., mobile phones) 💡 This is the floor—the value will never go smaller than this
Your design breakpoint size (often matching desktop design) 💡 Not used in the final clamp—uses a vw% instead for smooth scaling
Largest size on wide viewports (e.g., large desktop screens) 💡 This is the ceiling—the value will never grow larger than this
Percentage of viewport width (vw unit) đź’ˇ Controls scaling speed: 1-2 = subtle, 2.5-3 = balanced, 4-5+ = aggressive. Higher % = faster scaling with viewport

Quick Presets

CSS Output

font-size: clamp(0.875rem, 2.5vw, 1.5rem);

SCSS Mixin Output

@mixin fluid-size { font-size: clamp(0.875rem, 2.5vw, 1.5rem); }

Interactive Responsive Simulator

Drag the slider to test how your values scale across different viewport widths

The quick brown fox jumps over the lazy dog
320px 1024px 1920px
Viewport Width
1024px
Calculated Value
18px
Constraint Status
Scaling
Quick Breakpoints:

Advanced Settings

px
Viewport width where minimum size starts applying
px
Viewport width where maximum size caps out
Which CSS property to generate (changes the output prefix)
Use a CSS custom property instead of the default property