Fluid Typography Calculator

Generate responsive text that scales smoothly across all device sizes

Fluid Typography Generator

Using CSS clamp():

The clamp() function takes three values: a minimum value, a preferred value, and a maximum value. This allows text to scale fluidly between viewport sizes while maintaining minimum and maximum limits.

Minimum Screen Size

Maximum Screen Size

Minimum Font Size

Maximum Font Size

Output Units

REM EM PX

Base Font Size (for REM/EM conversion)

CSS Output

font-size: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);

Preview

This text will scale smoothly between your minimum and maximum font sizes based on the viewport width.

Breakdown

Minimum:	1rem	Applied at screen width of 320px
Preferred:	0.75rem + 1.25vw	Scales fluidly between min and max
Maximum:	1.5rem	Applied at screen width of 1200px

Typography Presets

Click to apply common typography presets:

How to Use Fluid Typography

Implement fluid typography in your CSS by applying the generated clamp() function to your font-size property:

/* Base styles */
:root {
  --fs-h1: clamp(2rem, 1.25rem + 3.75vw, 3rem);
  --fs-h2: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);
  --fs-body: clamp(1rem, 0.875rem + 0.625vw, 1.125rem);
}

/* Apply to elements */
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
body { font-size: var(--fs-body); }

Pro Tip: Using fluid typography with CSS variables makes your design system more maintainable and consistent across your site.

Why Use Fluid Typography?

Fluid typography automatically scales text size based on the viewport width, creating a smooth transition between minimum and maximum font sizes without requiring multiple media queries.

Benefits

Smooth Scaling: Text resizes progressively as the viewport changes
Fewer Media Queries: Reduce CSS complexity with one line of code
Better Typography: Text always maintains appropriate visual weight
Responsive: Works across all device sizes from mobile to large desktop

Understanding CSS clamp()

The clamp() function takes three parameters:

Minimum value: The smallest size allowed, regardless of viewport
Preferred value: The calculation used for scaling (typically includes a vw unit)
Maximum value: The largest size allowed, regardless of viewport

Browser Support: CSS clamp() is supported in all modern browsers (Chrome, Firefox, Safari, Edge) but not in Internet Explorer.