TypeClamp

Settings

Fixed design sizes to responsive type tokens.

TYPECLAMP helps designers and developers turn fixed font sizes from Figma and other design tools into production-ready responsive CSS tokens. Keep every design value exact at your base viewport, then generate clean clamp values that scale down to mobile and expand beyond desktop with optional limits.

Font unit
Line-height unit

Results

Live scale

h1 · base 96px · current 90.13px

h2 · base 72px · current 67.6px

h3 · base 48px · current 45.07px

h4 · base 32px · current 30.04px

body-lg · base 22px · current 20.65px

body · base 18px · current 16.9px

Export

CSS output

:root {
  --text-h1: clamp(80px, 74.15px + 1.561vw, 96px);

  --text-h2: clamp(60px, 55.61px + 1.1707vw, 72px);

  --text-h3: clamp(40px, 37.07px + 0.7805vw, 48px);

  --text-h4: clamp(26.67px, 24.72px + 0.5203vw, 32px);

  --text-body-lg: clamp(18.33px, 16.99px + 0.3577vw, 22px);

  --text-body: clamp(15px, 13.9px + 0.2927vw, 18px);
}

@media (min-width: 1400px) {
  :root {
    --text-h1: clamp(96px, 44.31px + 3.6923vw, 115.2px);
    --text-h2: clamp(72px, 33.23px + 2.7692vw, 86.4px);
    --text-h3: clamp(48px, 22.15px + 1.8462vw, 57.6px);
    --text-h4: clamp(32px, 14.77px + 1.2308vw, 38.4px);
    --text-body-lg: clamp(22px, 10.15px + 0.8462vw, 26.4px);
    --text-body: clamp(18px, 8.31px + 0.6923vw, 21.6px);
  }
}

.text-h1 {
  font-size: var(--text-h1);
}
.text-h2 {
  font-size: var(--text-h2);
}
.text-h3 {
  font-size: var(--text-h3);
}
.text-h4 {
  font-size: var(--text-h4);
}
.text-body-lg {
  font-size: var(--text-body-lg);
}
.text-body {
  font-size: var(--text-body);
}