What is a fluid type scale?

A fluid type scale uses CSS clamp() to create font sizes that smoothly scale between a minimum and maximum value based on the viewport width. This eliminates the need for breakpoint-based media queries and produces smoother typography across all screen sizes.

What is a modular scale ratio?

A modular scale ratio is a number used to multiply the base font size to generate each successive step in the type scale. Common ratios include Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), and Golden Ratio (1.618). Higher ratios create more contrast between heading sizes.

How does CSS clamp() work for typography?

CSS clamp(min, preferred, max) takes three values: a minimum size, a preferred (fluid) size based on viewport width, and a maximum size. The browser uses the preferred value but never goes below min or above max. This creates smooth responsive scaling without media queries.

Can I use custom scale ratios?

Yes! While the tool provides popular presets, you can enter any custom ratio value. This lets you create a type scale that matches your exact design requirements.

Free & Open Source

Fluid Type Scale
Calculator

Generate responsive CSS typography with clamp(). Pick a scale ratio, set your viewport range, and copy production-ready custom properties in seconds.

📐

Scale Ratios

Choose from classic ratios like Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), Golden Ratio (1.618), and more.

📋

Copy-Ready CSS

One-click copy of CSS custom properties with clamp() values — paste straight into your stylesheet.

👁️

Live Preview

See every step of your type scale rendered in real-time with actual computed sizes at any viewport width.

Base Font Size

Min (px)

Max (px)

Viewport Range

Min (px)

Max (px)

Scale Ratio

Custom ratio (1.0 – 3.0)

Live Preview at 800px

Drag to simulate viewport width

320px1280px

Type Scale

--fs-3xl

54.9px

3XL — The quick brown fox

--fs-2xl

43.9px

2XL — The quick brown fox

--fs-xl

35.2px

XL — The quick brown fox

--fs-lg

28.1px

Large — The quick brown fox

--fs-md

22.5px

Medium — The quick brown fox

--fs-base

18px

Base — The quick brown fox

--fs-sm

14.4px

Small — The quick brown fox

Generated CSS

:root {
  --fs-sm: clamp(0.8rem, 0.7333rem + 0.3333vw, 1rem);
  --fs-base: clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem);
  --fs-md: clamp(1.25rem, 1.1458rem + 0.5208vw, 1.5625rem);
  --fs-lg: clamp(1.5625rem, 1.4323rem + 0.651vw, 1.9531rem);
  --fs-xl: clamp(1.9531rem, 1.7904rem + 0.8135vw, 2.4413rem);
  --fs-2xl: clamp(2.4413rem, 2.2377rem + 1.0177vw, 3.0519rem);
  --fs-3xl: clamp(3.0519rem, 2.7975rem + 1.2719vw, 3.815rem);
}

Size Reference

Step	Min (px)	Max (px)	Min (rem)	Max (rem)
`--fs-sm`	12.8	16	0.8	1
`--fs-base`	16	20	1	1.25
`--fs-md`	20	25	1.25	1.5625
`--fs-lg`	25	31.25	1.5625	1.9531
`--fs-xl`	31.25	39.06	1.9531	2.4413
`--fs-2xl`	39.06	48.83	2.4413	3.0519
`--fs-3xl`	48.83	61.04	3.0519	3.815

Frequently Asked Questions

Everything you need to know about Fluid Type Scale.

Fluid Type ScaleCalculator