What a modular type scale is
A modular scale multiplies a base size by the same ratio again and again: with a base of 16px and a ratio of 1.25 you get 16, 20, 25, 31.25 and so on, and dividing gives the smaller steps 12.8 and 10.24. Because every size is related by one ratio, headings, body text and captions look like they belong to the same family.
Why use two ratios
Small screens cannot fit a dramatic contrast between headings and text, while large screens look flat without it. This generator therefore takes one ratio for the minimum viewport and another for the maximum. A popular combination is a minor third (1.2) on phones and a major third (1.25) or perfect fourth (1.333) on desktops. Each step then becomes its own clamp() value that moves from the small scale to the large one as the viewport grows.
Using the exported variables
The export is a :root block with variables named --step--2 through --step-6. Assign them to elements, for example h1 to step 5, h2 to step 4, body text to step 0 and small print to step −1. Because the names describe positions on the scale rather than elements, you can retune the whole system later by changing only the base size and ratios.
Keep an eye on the largest steps: with a big ratio they can exceed the 2.5× zoom guideline from WCAG 1.4.4. The step table shows the size at both ends of the range so you can spot steps that grow too fast and lower the desktop ratio if needed.
Choosing a ratio
Lower ratios such as 1.125 or 1.2 suit dense interfaces, dashboards and documentation. Middle ratios like 1.25 and 1.333 are versatile for marketing pages and blogs. High ratios such as 1.5 or the golden ratio 1.618 create bold editorial contrast but need fewer steps to stay usable.