CSS clamp calculator

Build fluid clamp() sizes and type or spacing scales, with a live preview.

Viewport and unit

Minimum viewport

Maximum viewport

Unit

Root font size

Single value

Minimum size

rem

Maximum size

rem

CSS: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem)
Slope: 0.4348vw (0.004348 per px)
Intercept: 0.913rem

Preview

800px wide: 18.09px (1.1304rem)

The quick brown fox

Size at each viewport width
Viewport	Size	rem
320px	16px	1rem
550px	17px	1.0625rem
780px	18px	1.125rem
1010px	19px	1.1875rem
1240px	20px	1.25rem

Type scale

Base at minimum

rem

Base at maximum

rem

Ratio at minimum

1.2 minor third, 1.25 major third

Ratio at maximum

1.333 fourth, 1.5 fifth

Steps below

Steps above

Type scale CSS

:root {
  --step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
  --step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
  --step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
  --step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
  --step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
  --step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
  --step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);
}

Type scale
Name	Min	Max	At 800px
`--step--2`	0.6944rem	0.72rem	11.32px
`--step--1`	0.8333rem	0.9rem	13.89px
`--step-0`	1rem	1.125rem	17.04px
`--step-1`	1.2rem	1.4063rem	20.92px
`--step-2`	1.44rem	1.7578rem	25.69px
`--step-3`	1.728rem	2.1973rem	31.57px
`--step-4`	2.0736rem	2.7466rem	38.8px
`--step-5`	2.4883rem	3.4332rem	47.7px

Spacing scale

Space base at minimum

rem

Space base at maximum

rem

One-up pairs, such as s-m

Spacing scale CSS

:root {
  --space-3xs: clamp(0.25rem, 0.2391rem + 0.0543vw, 0.2813rem);
  --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7174rem + 0.163vw, 0.8438rem);
  --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
  --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);
  --space-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem);
  --space-2xs-xs: clamp(0.5rem, 0.3804rem + 0.5978vw, 0.8438rem);
  --space-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);
  --space-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem);
  --space-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
  --space-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem);
  --space-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
  --space-2xl-3xl: clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem);
}

Spacing scale
Name	Min	Max	At 800px
`--space-3xs`	0.25rem	0.2813rem	4.26px
`--space-2xs`	0.5rem	0.5625rem	8.52px
`--space-xs`	0.75rem	0.8438rem	12.78px
`--space-s`	1rem	1.125rem	17.04px
`--space-m`	1.5rem	1.6875rem	25.57px
`--space-l`	2rem	2.25rem	34.09px
`--space-xl`	3rem	3.375rem	51.13px
`--space-2xl`	4rem	4.5rem	68.17px
`--space-3xl`	6rem	6.75rem	102.26px
`--space-3xs-2xs`	0.25rem	0.5625rem	6.61px
`--space-2xs-xs`	0.5rem	0.8438rem	10.87px
`--space-xs-s`	0.75rem	1.125rem	15.13px
`--space-s-m`	1rem	1.6875rem	21.74px
`--space-m-l`	1.5rem	2.25rem	30.26px
`--space-l-xl`	2rem	3.375rem	43.48px
`--space-xl-2xl`	3rem	4.5rem	60.52px
`--space-2xl-3xl`	4rem	6.75rem	86.96px