Type Scale

Generate a modular type scale from a base size and ratio, with CSS rem variables.

A modular scale multiplies a base size by a ratio at each step, so sizes relate to each other rather than being chosen one at a time. 1.25 gives a gentle progression suited to dense interfaces; 1.5 or the golden ratio produce dramatic headings that need space around them to work.

Expressing the result in rem is what makes it respect the reader. A rem is relative to the root font size, so someone who has raised their browser's default because they cannot comfortably read 16px gets your whole scale enlarged proportionally. Fixing sizes in pixels overrides that choice silently, which is an accessibility failure that never shows up in your own testing.