What is a modular type scale?

A modular type scale is a sequence of font sizes derived by multiplying a base size by a fixed ratio repeatedly. Each step is mathematically related to the others, creating visual harmony across headings, body text, and captions.

Which ratio should I choose?

Common choices are Perfect Fourth (1.333) for a gentle contrast, Perfect Fifth (1.5) for stronger hierarchy, and Major Second (1.125) for dense UIs where sizes should stay close together. Golden Ratio (1.618) creates dramatic contrast suited to editorial layouts.

What do the CSS custom properties look like?

Each step is exported as a CSS custom property such as --fs-0 for the base, --fs-1 for one step up, --fs--1 for one step down. You can reference them with var(--fs-2) in any CSS rule.

Can I use rem instead of px?

The tool calculates sizes in px and also shows the rem equivalent (assuming 1rem = 16px). The copied CSS outputs both px comments and rem values so you can use whichever unit your project requires.

How many steps should I generate?

Most projects need 3–4 steps above the base (for headings h1–h4) and 1–2 steps below (for captions and small labels). More than 6 steps above is rarely needed and can make the scale feel extreme.

Type Scale Generator

Name: Type Scale Generator
Availability: InStock
Author: Nham Vu

Pick a base font size and ratio to instantly generate a modular type scale with copy-ready CSS custom properties.

Scale Settings

Base size (px)

Ratio

Steps above base: 5

Steps below base: 2

CSS unit

Live Preview

Each row uses the scale size

CSS Custom Properties

Scale Reference

Step	Variable	px	rem	Preview

Copied!

Summary

Pick a base font size and ratio to instantly generate a modular type scale with copy-ready CSS custom properties.

How it works

Enter your base font size in pixels (default 16px).
Select a modular ratio such as Perfect Fourth (1.333) or Major Third (1.25).
Adjust the number of steps above and below the base.
Review the live preview to see how each scale step looks as real text.
Click "Copy CSS" to copy the generated CSS custom properties to your clipboard.

Use cases

Establish consistent heading sizes for a design system.
Find harmonious font sizes before writing your stylesheet.
Generate CSS custom properties for Tailwind or vanilla CSS projects.
Experiment with different ratios to match your brand typography.
Share a consistent type scale with designers and developers.
Quickly prototype the visual hierarchy of a landing page.

Frequently Asked Questions

Last updated: 2026-06-11 · Reviewed by Nham Vu