Generator Tools

Fluid Type Scale Generator

Generate a fluid CSS clamp() typographic scale with two ratios, a viewport range, and live preview. Copy CSS variables, Tailwind config, or JSON tokens.

Starter presets

Pick a sensible default. Tweak everything below afterwards.

Base size

The size of the base step (body text). The min applies at the narrowest viewport, the max at the widest.

Min base (px)

Max base (px)

Scale ratios

The min ratio shapes the narrow-viewport ladder. The max ratio shapes the wide-viewport ladder. Pick a stronger max ratio for a more dramatic hero on desktop.

Min ratioCustom value (1.01 to 3)

Active ratio: 1.25

Max ratioCustom value (1.01 to 3)

Active ratio: 1.333

Viewport range

The viewports where each end of the ramp is reached. Outside this range every clamp value pins to its bound.

Min viewport (px)

Max viewport (px)

Steps and root

Steps above base

Steps below base

Root font size (px)

Output is in rem so it respects the user's root font size. The default browser root is 16 px.

Live preview

Drag the viewport slider to simulate any device width. Every step resolves with the same math the browser will use.

1024 px

Simulated viewport width

3201240

Sample text

4xl

48.8 to 75.8 px (69.4 px now)

Almost before we knew it

3xl

39.1 to 56.8 px (52.7 px now)

Almost before we knew it

2xl

31.3 to 42.6 px (40 px now)

Almost before we knew it

25 to 32 px (30.3 px now)

Almost before we knew it

20 to 24 px (23.1 px now)

Almost before we knew it

base (base)

16 to 18 px (17.5 px now)

Almost before we knew it

12.8 to 13.5 px (13.3 px now)

Almost before we knew it

10.2 to 10.1 px (10.2 px now)

Almost before we knew it

Export

Copy a copy-ready output. Everything below is generated locally.

:root {
  --fs-4xl: clamp(3.0518rem, 2.9271vw + 2.4663rem, 4.7348rem);
  --fs-3xl: clamp(2.4414rem, 1.9315vw + 2.0551rem, 3.552rem);
  --fs-2xl: clamp(1.9531rem, 1.2375vw + 1.7056rem, 2.6647rem);
  --fs-xl: clamp(1.5625rem, 0.7591vw + 1.4107rem, 1.999rem);
  --fs-lg: clamp(1.25rem, 0.4341vw + 1.1632rem, 1.4996rem);
  --fs-base: clamp(1rem, 0.2174vw + 0.9565rem, 1.125rem);
  --fs-sm: clamp(0.8rem, 0.0765vw + 0.7847rem, 0.844rem);
  --fs-xs: clamp(0.6331rem, -0.0119vw + 0.6424rem, 0.64rem);
}

Math summary

Each clamp() is derived from a linear interpolation between the min viewport and the max viewport, expressed in rem so the user's root font size still wins.

Label	Min px	Max px	vw coef	rem offset
4xl	48.83	75.76	2.9271	2.4663
3xl	39.06	56.83	1.9315	2.0551
2xl	31.25	42.63	1.2375	1.7056
xl	25	31.98	0.7591	1.4107
lg	20	23.99	0.4341	1.1632
base	16	18	0.2174	0.9565
sm	12.8	13.5	0.0765	0.7847
xs	10.24	10.13	-0.0119	0.6424

How to use

Pick a starter preset (Balanced design system, Marketing landing, Compact app, Editorial reading) to drop in sensible defaults, then tweak the controls below.
Set the Min base and Max base font sizes in pixels. The min applies at the narrowest viewport, the max at the widest. 16 to 18 is a common body text starting point.
Pick a Min ratio and a Max ratio. A stronger Max ratio (Perfect Fifth, Golden Ratio) produces a more dramatic hero on desktop while keeping mobile readable.
Choose the viewport range. 320 to 1240 covers most marketing and app layouts. Below the min and above the max, every clamp pins to its bound.
Adjust steps above (h1, h2, h3 territory) and below (sm, xs, captions) the base. Drag the simulated viewport slider to confirm every step reads well at every width.
Switch the Export panel between CSS variables, Tailwind config, JSON tokens, and a plain table, then click Copy to take the output into your codebase.

About this tool

Fluid Type Scale Generator builds a complete responsive typographic ramp using CSS clamp(), the modern approach popularized by Utopia.fyi and now standard in design systems shipping fluid typography. Set two base sizes (the body size at the narrowest viewport and at the widest), two ratios (one shaping the narrow ladder, one shaping the wide ladder so the hero can read more dramatic on desktop), the viewport range where the scale fluidly interpolates, and how many steps you want above and below the base. Every step is then expressed as clamp(min, A*vw + B*rem, max) where the middle term is the linear interpolation the browser will evaluate at every viewport width, and the bounds pin the value outside the range so the smallest viewports never get unreadably tiny and the largest never blow up. Pick from ten named ratios (Minor Second through Octave plus Golden Ratio), or type any custom ratio between 1.01 and 3 to match a brand or spec. Output is in rem so the user's root font size still wins, with a configurable root for the 62.5 percent trick and other system-wide adjustments. Four copy-ready exports cover the downstream cases: a CSS custom-properties block keyed by --fs-base through --fs-7xl for any vanilla CSS or framework that consumes design tokens, a Tailwind v3+ fontSize config that pairs each utility name with a [clamp, lineHeight] tuple ready for theme.extend.fontSize, a JSON tokens object shaped for Style Dictionary and the W3C design-token format with $value and $type metadata, and a plain px-and-rem table for documentation or a spec sheet. A live preview ladder renders every step at the resolved size for any simulated viewport, so the visual hierarchy you ship is the one you see. The math summary surfaces the per-step vw coefficient and rem offset so the linear interpolation is auditable by hand. Useful for kicking off a fluid design system, swapping a media-query ladder for a single clamp ramp, exporting tokens for engineers, drafting a Utopia-style hero, or just picking a coherent set of headings that scale smoothly from mobile to widescreen. Everything runs locally in your browser. The numbers and sample text you type here never leave your device.

Free to use. Works in your browser. No signup, no login.

Related tools

Fluid Type Scale Generator

How to use

About this tool

You may also like

Type Scale Generator

CSS Clamp Generator

Pixels to REM Converter

CSS Line Clamp Generator

CSS Line-Height Generator

Tailwind Palette Generator