Micro Tools
Advertisement

Type Scale Calculator

Build a harmonious type scale for free. Set a base size and ratio, preview every step live, and copy the pixel and rem values for your CSS.

Scale settings

Set the base size and ratio, then copy the steps.

Type scale

Advertisement

What a modular scale is

A modular scale multiplies a base size by a fixed ratio for each step, producing sizes that feel related instead of arbitrary. Musical intervals like the perfect fourth (1.333) give the ratios their names.

The tool renders every step at real size with px and rem values, plus a CSS variables block you can paste into your stylesheet.

Choosing a ratio

Small ratios (1.125 to 1.2) suit dense interfaces where hierarchy should whisper. Larger ratios (1.333 to 1.5) suit marketing pages where headlines should shout. The golden ratio (1.618) is dramatic and best used sparingly.

Five steps above base cover most designs: hero, h1, h2, h3 and lead text, with one step below for small print.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

Type Scale Calculator FAQs

Should I use px or rem?
Use rem in production so text respects user font-size settings. The tool shows both; the copied CSS uses rem with px comments.
What base size should I pick?
16px matches the browser default and user expectations. Larger bases suit big-screen marketing sites; smaller bases suit dense dashboards.
How many steps do I need?
Five above base is a solid default. More steps create finer hierarchy but risk sizes that look accidentally similar.
Can I use a custom ratio?
Yes. Choose Custom and type any ratio between 1.01 and 3. Values near 1.2 to 1.33 are the safest starting points.
Is this the same as Tailwind's scale?
Similar idea, different numbers. This tool builds a true geometric scale from your base and ratio, while Tailwind uses hand-tuned steps.
Advertisement