TypeRamp

Settings

Fixed design sizes to responsive type tokens.

Font unit
Line-height unit

Define

Design sizes

NameDesignMinLine heightMaxWeightRatio

Results

Live scale

h1 · base 96px · current 90.13px

A sharper scale for real design handoff

h2 · base 72px · current 67.6px

Exact desktop sizes, fluid production values

h3 · base 48px · current 45.07px

Design tokens that respect the source layout

h4 · base 32px · current 30.04px

Clear ramps for every viewport

body-lg · base 22px · current 20.65px

Start with the pixel values from the supplied desktop design. The app calculates fluid clamp values that equal the design at the base viewport.

body · base 18px · current 16.9px

Optional min and max values keep the scale practical on small phones and large displays without forcing every type token into one modular ratio.

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);
}