Build a harmonious type scale from a base size and a ratio. Get the sizes in px and rem, plus ready-to-use CSS custom properties.
It is a set of font sizes generated by repeatedly multiplying a base size by a fixed ratio, the same idea as musical intervals. Because every size relates to the next by the same proportion, the result feels harmonious rather than arbitrary.
Smaller ratios (minor or major second) give gentle, subtle steps good for dense interfaces; larger ratios (perfect fourth, golden ratio) give dramatic contrast good for marketing pages and big headings. Try a few and look at the preview.
Copy the CSS custom properties into your :root and reference them, for example font-size: var(--step-2). They are in rem so they respect the user's browser font-size setting.