📑 Type Scale Calculator

Set a font size and modular-scale ratio at a minimum and maximum viewport. Each step fluidly interpolates between them with a CSS clamp().

Min viewport
px
px
Max viewport
px
px

👀 Preview

780px
  • Step 5“Less, but better” — Dieter Rams52.91px
  • Step 4“Less, but better” — Dieter Rams43.08px
  • Step 3“Less, but better” — Dieter Rams35.08px
  • Step 2“Less, but better” — Dieter Rams28.59px
  • Step 1“Less, but better” — Dieter Rams23.30px
  • Step 0“Less, but better” — Dieter Rams19.00px
  • Step -1“Less, but better” — Dieter Rams15.50px
  • Step -2“Less, but better” — Dieter Rams12.65px

💻 Code Snippet

:root {
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
}
Simulate color blindness