Type Scale Calculator

How to use it

1. Enter the base size, which becomes the body text size and the anchor of the whole scale.
2. Pick a ratio. Small ratios such as Minor Second suit dense interfaces, larger ones such as Perfect Fifth suit editorial layouts.
3. Choose how many decimals you want in the output. Two decimals is a practical default.
4. Read the preview lines to see how each step compares, then copy the custom properties block.
5. Paste the block into your stylesheet and adjust any single step by hand if a heading needs more contrast.

Common use cases

• Starting a design system - derive eight consistent sizes from one decision instead of guessing values.
• Comparing ratios - switch between two ratios and watch how much the h1 step moves.
• Refactoring legacy CSS - replace scattered hard coded font sizes with one coherent set of variables.
• Typography workshops - show how a ratio compounds as the exponent grows.

Why it stays private

The scale is computed by a single power function on the numbers you enter. Nothing is uploaded, no account is needed, and the page keeps working offline.

FAQ

Q: Why are there eight steps and not six? A: Six heading levels plus a body size is the usual set, but a caption step below the body size is needed for helper text, captions and legal notes. The tool includes it so you do not have to extend the scale by hand.

Q: Which ratio should I choose? A: It depends on the content. Interfaces with dense data read well at 1.067 to 1.2, marketing pages often use 1.333 to 1.5, and large display headings can carry the golden ratio at 1.618. Compare the preview before you decide.

Q: Can I mix ratios in one page? A: Yes. Many teams use a small ratio above the body size on narrow screens and a larger one on wide screens. Generate two scales and switch them inside a media query.