ffee All tools
EN 中文 FR DE

Modular Scale Calculator

Build a type or spacing scale from a base size and a ratio and see every step in px and rem.

Build a modular scale

Rem values assume the browser default root size of 16 px; the scale is calculated locally.

How to use the Modular Scale Calculator

  1. Choose a ratio preset or type your own custom ratio.
  2. Set the base size, the number of steps and the direction of the scale.
  3. Read every step in pixels and rem, then check the visual preview.

Features

Advertisement

More tools

Flexbox Generator CSS Grid Generator Button Style Generator CSS Animation Generator CSS Transition Generator CSS Transform Generator CSS Filter Generator Glassmorphism Generator Neumorphism Generator Breakpoint Preview Font Pairing Tool Line Height Calculator

Frequently Asked Questions

Common questions about the free online modular scale calculator.

A modular scale is a sequence of sizes built by repeatedly multiplying one base size by a fixed ratio, which keeps typography consistent.
Major Third 1.25 and Perfect Fourth 1.333 give clear steps for headings, while Minor Second 1.067 suits dense interfaces.
Each pixel value is divided by 16, the default root font size in browsers, so the result matches a rem unit in CSS.
Steps below zero are smaller than the base size. They are handy for captions, labels and other fine print.
Yes. Set the base size to your spacing unit in pixels and the same ratio gives a consistent set of margins and paddings.
Between two and twenty steps in each direction, which is enough for headings, body text, captions and fine print.
No. The whole scale is calculated in your browser, so nothing you type is ever sent anywhere.
Yes. The modular scale calculator is completely free with no account, no sign-up and no usage limits at all.

Last updated: October 10, 2026