Type scale generator

1. 4xl39.81→54.93px· h1

   Measure twice, cut once

2. 3xl33.18→43.95px· h2

   Measure twice, cut once

3. 2xl27.65→35.16px· h3

   Measure twice, cut once

4. xl23.04→28.13px· h4

   Measure twice, cut once

5. lg19.2→22.5px· h5, lead text

   Measure twice, cut once

6. base16→18px· Body text

   Measure twice, cut once

7. sm13.33→14.4px· Captions, labels

   Measure twice, cut once

8. xs11.11→11.52px· Fine print

   Measure twice, cut once

/* 16px→18px body, ×1.2→×1.25, 360px→1280px screens */
:root {
  --text-4xl: clamp(2.4883rem, 2.1186rem + 1.6433vw, 3.4332rem);
  --text-3xl: clamp(2.0736rem, 1.8103rem + 1.1704vw, 2.7466rem);
  --text-2xl: clamp(1.728rem, 1.5444rem + 0.8161vw, 2.1973rem);
  --text-xl: clamp(1.44rem, 1.3156rem + 0.5527vw, 1.7578rem);
  --text-lg: clamp(1.2rem, 1.1193rem + 0.3587vw, 1.4063rem);
  --text-base: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
  --text-sm: clamp(0.8333rem, 0.8072rem + 0.1159vw, 0.9rem);
  --text-xs: clamp(0.6944rem, 0.6844rem + 0.0444vw, 0.72rem);
}

Each size is body text × ratio to the power of its step, on both screens; clamp() slides between them as the window widens, so no media queries are needed. Sizes are in rem, so they follow the reader's browser font setting.