What is a modular scale?

A modular scale is a sequence of numbers related by a constant ratio. In typography, each step is produced by multiplying (or dividing) the base font size by that ratio, so every size is mathematically proportional to every other.

Which ratio should I use?

For body-heavy content, Minor Third (1.200) or Major Third (1.250) gives subtle steps. For display-heavy designs, Perfect Fourth (1.333) or Golden Ratio (1.618) creates more dramatic contrast between sizes.

Should I use px, rem, or em?

rem is recommended for web projects because it scales relative to the root font size and respects browser accessibility settings. The tool outputs all three units so you can choose.

How many steps do I need?

Most projects need 4 to 8 steps above the base (headings) and 1 to 3 steps below (captions, labels). More steps than that often leads to sizes that are too extreme or too similar.

Can I use a custom ratio?

Yes. Enter any decimal ratio in the custom ratio field. Values between 1.10 and 2.00 are most practical. Ratios below 1.10 produce steps that are too similar; above 2.00 the jumps become very large.

What are CSS custom properties?

CSS custom properties (variables) let you define values like --font-size-xl once and reuse them throughout your stylesheet. The generated block is ready to paste into the :root {} selector of your CSS file.

Modular Scale Typography Generator

Name: Modular Scale Typography Generator
Availability: InStock
Author: Nham Vu

Pick a base size and a ratio to instantly generate a harmonious typographic scale with ready-to-copy CSS variables.

Scale Settings

Base Font Size

Ratio

Steps Above Base

1 6 10

Steps Below Base

0 2 6

Output Unit

Scale Preview

Perfect Fourth — 1.333

CSS Custom Properties

All Values

Step	Name	px	rem	em

Copied!

Summary

Pick a base size and a ratio to instantly generate a harmonious typographic scale with ready-to-copy CSS variables.

How it works

Enter your base font size in pixels (typically 16px).
Choose a named ratio or enter a custom ratio value.
Select how many scale steps to generate above and below the base.
The tool calculates each step by multiplying the base by the ratio raised to a power.
Copy individual values or the full CSS custom property block with one click.

Use cases

Establishing a consistent type hierarchy for a new design system.
Generating CSS custom properties (variables) for a web project.
Exploring different ratios to find the right visual rhythm for a brand.
Quickly converting a modular scale into rem or em units.
Teaching the concept of typographic scales to design students.
Auditing existing font sizes against a theoretical scale.
Creating harmonious scales for both mobile and desktop breakpoints.
Pairing with a color tool to finish a complete design token set.

Frequently Asked Questions

Related tools

Gradient Generator Css Color Contrast Checker Glassmorphism Generator

Last updated: 2026-05-28 · Reviewed by Nham Vu