Typography: Fluid & Readable

Scale type and spacing with viewport width while respecting min/max sizes. Stick to line‑length ~45–75ch.

Fluid Scale with clamp()

:root {{
  --step--1: clamp(0.80rem, 0.24vw + 0.74rem, 0.92rem);
  --step-0:  clamp(1.00rem, 0.44vw + 0.90rem, 1.10rem);
  --step-1:  clamp(1.25rem, 0.80vw + 1.05rem, 1.40rem);
  --step-2:  clamp(1.56rem, 1.20vw + 1.15rem, 1.80rem);
}}
h1 {{ font-size: var(--step-2); }}
p  {{ font-size: var(--step-0); max-width: 65ch; }}

Responsive Space Tokens

:root {{
  --space-1: clamp(0.25rem, 0.25vw, 0.5rem);
  --space-2: clamp(0.5rem, 0.5vw, 1rem);
  --space-4: clamp(1rem, 1.5vw, 2rem);
  --space-6: clamp(1.5rem, 2.5vw, 3rem);
}}