CSS typography scaling guide

https://typescale.com/

root: {
  --base-size: 1rem;
  --scale: 1.25;
  --h5: calc(var(--base-size) * var(--scale));
  --h4: calc(var(--h5) * var(--scale));
  --h3: calc(var(--h4) * var(--scale));
  --h2: calc(var(--h3) * var(--scale));
  --h1: calc(var(--h2) * var(--scale));
}

h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
}

h3 {
  font-size: var(--h3);
}

h4 {
  font-size: var(--h4);
}

h5 {
  font-size: var(--h5);
}

small,
.text-small {
  font-size: calc(var(--base-size) / var(--scale));
}

For more dynamic font scaling, consider adjusting the base size. You can set it to 1.333 or 1.414 for a more pronounced effect.