Type Scale Generator — Modular Typography Scale

Frequently Asked Questions

What is a modular type scale?

A modular type scale is a set of font sizes generated by multiplying a base size by a fixed ratio. Each step up is the previous size multiplied by the ratio; each step down is divided by it. The result is a harmonious, mathematically consistent progression of sizes.

Which ratio should I choose?

Perfect Fourth (1.333) is the most common choice for web interfaces — it creates clear hierarchy without sizes growing too fast. Minor Third (1.200) gives a subtler scale good for dense UIs. Major Third (1.250) and Golden Ratio (1.618) are popular for editorial and marketing sites where you want more dramatic contrast between sizes.

What is the base size?

The base size is your body text size — typically 16px, which is the browser default. All other sizes in the scale are derived from it. If your design uses a different body size, change the base to match.

What is the root font size used for?

The root font size (rem base) is the px value of 1rem in your project. It's 16px by default in all browsers. Changing it here adjusts the rem values in the output so they're correct for your specific setup.

What's the difference between the CSS Variables and Tailwind Config outputs?

CSS Variables outputs a :root { } block with custom properties like --text-lg: 1.333rem you can reference anywhere in your CSS. Tailwind Config outputs a fontSize object you can paste into the theme.extend section of your tailwind.config.js.

Can I use a custom ratio?

Yes. Select "Custom" from the ratio dropdown and enter any value above 1. Values between 1.1 and 1.5 are most practical — below 1.1 the size differences become too subtle to see, and above 1.618 sizes grow very fast.

Related Tools