Design a Type Scale That Survives Real Content
Pick a ratio, round the output sensibly, and check the extremes on small screens.
A modular scale multiplies a base size by a fixed ratio at each step, producing sizes that relate to each other rather than being chosen one at a time. The ratio you pick sets how dramatic the hierarchy feels.
Match the ratio to the density
Dense application interfaces work well at 1.125 to 1.2, where steps stay close and vertical space is scarce. Editorial pages can carry 1.25 to 1.5, where a large heading has room to breathe.
Round before you ship
Raw scale output produces values like 27.36px. Round to whole pixels or to a rem grid so rendering stays crisp and the tokens stay memorable.
Test both ends on a phone
The smallest step must stay readable and the largest must not overflow a narrow column. Scales usually break at the extremes, not in the middle, so check those first.