ZeroServer.tools

Modular Scale Calculator

Calculate a typographic modular scale and generate CSS custom properties for consistent, harmonious font sizes.

Base size (px)

Steps above & below

Ratio

Scale

Step	px	rem	Preview
+5	48.83px	3.052rem	Heading
+4	39.06px	2.441rem	Heading
+3	31.25px	1.953rem	Heading
+2	25px	1.563rem	Heading
+1	20px	1.25rem	Heading
+0	16px	1rem	Base
-1	12.8px	0.8rem	Small
-2	10.24px	0.64rem	Small
-3	8.19px	0.512rem	Small
-4	6.55px	0.41rem	Small
-5	5.24px	0.328rem	Small

CSS Custom Properties

:root {
  --scale--5: 0.328rem;
  --scale--4: 0.41rem;
  --scale--3: 0.512rem;
  --scale--2: 0.64rem;
  --scale--1: 0.8rem;
  --scale-0: 1rem;
  --scale-1: 1.25rem;
  --scale-2: 1.563rem;
  --scale-3: 1.953rem;
  --scale-4: 2.441rem;
  --scale-5: 3.052rem;
}

About Modular Scale Calculator

A modular scale is a sequence of numbers related by a consistent ratio, used to create harmonious typographic hierarchies. Each step is calculated as base × ratio^n. The Golden Ratio (1.618) is the classic typographic ratio; the Perfect Fourth (1.333) and Major Third (1.250) are popular modern choices. Rem values assume a 16px root font size.

Private & free — this tool runs entirely in your browser.