Juli Living Showcase

Type scale

Fluid type steps from Utopia. Each clamp() interpolates across the viewport range recorded in primitives.css. Never hand-edit a clamp: change the calculator config and paste the output (ADR 0002).

The sample is rendered at the live value of its step, so resizing this window is the demonstration. Which step each element uses is settled in the base layer, not per component.

  1. --step--2The quick brown fox jumps over the lazy dogclamp(0.6944rem, 0.6926rem + 0.009vw, 0.7035rem)
  2. --step--1The quick brown fox jumps over the lazy dogclamp(0.8333rem, 0.8125rem + 0.1044vw, 0.9377rem)
  3. --step-0The quick brown fox jumps over the lazy dogclamp(1rem, 0.95rem + 0.25vw, 1.25rem)
  4. --step-1The quick brown fox jumps over the lazy dogclamp(1.2rem, 1.1068rem + 0.4663vw, 1.6663rem)
  5. --step-2The quick brown fox jumps over the lazy dogclamp(1.44rem, 1.2838rem + 0.7811vw, 2.2211rem)
  6. --step-3The quick brown fox jumps over the lazy dogclamp(1.728rem, 1.4815rem + 1.2327vw, 2.9607rem)
  7. --step-4The quick brown fox jumps over the lazy dogclamp(2.0736rem, 1.699rem + 1.8731vw, 3.9467rem)
  8. --step-5The quick brown fox jumps over the lazy dogclamp(2.4883rem, 1.9338rem + 2.7726vw, 5.2609rem)