Type Scale

Generate a fluid type scale with clamp() values. Configure the ratio, base size, and viewport range, then copy the CSS.

4xl

67.3px / 4.2087rem

3xl

50.5px / 3.1573rem

2xl

37.9px / 2.3686rem

28.4px / 1.7769rem

21.3px / 1.333rem

base

16px / 1rem

12px / 0.7502rem

9px / 0.5628rem

Drag right edge to resize

4xl: The quick brown fox

3xl: The quick brown fox

2xl: The quick brown fox

xl: The quick brown fox

lg: The quick brown fox

base: The quick brown fox

sm: The quick brown fox

xs: The quick brown fox

CSS Variables

:root {
  --font-size-xs: clamp(0.6498rem, 0.6804rem + -0.1307vw, 0.5628rem);
  --font-size-sm: clamp(0.8061rem, 0.8258rem + -0.084vw, 0.7502rem);
  --font-size-base: clamp(1.0000rem, 1rem + 0vw, 1.0000rem);
  --font-size-lg: clamp(1.2406rem, 1.208rem + 0.1389vw, 1.3330rem);
  --font-size-xl: clamp(1.5390rem, 1.4553rem + 0.3574vw, 1.7769rem);
  --font-size-2xl: clamp(1.9093rem, 1.7475rem + 0.6901vw, 2.3686rem);
  --font-size-3xl: clamp(2.3686rem, 2.0909rem + 1.185vw, 3.1573rem);
  --font-size-4xl: clamp(2.9384rem, 2.4911rem + 1.9085vw, 4.2087rem);
}