Don't like ads? Go Ad-Free Today 

Font Modular Scale Generator

DeveloperMathText

ADVERTISEMENT · REMOVE?

INPUT

Auto Process

Base

Base Size (px)

The 1rem reference size. Most browsers default to 16px.

Ratio

Each step in the scale is the previous step multiplied by this ratio.

Custom Ratio

Any value between 1.01 and 3.

Output

Unit

Decimals

Decimal places in the rendered values.

Format

Preview Text

Sample

OUTPUT

Client Side

ADVERTISEMENT · REMOVE?

Guide

Font Modular Scale Generator

The Font Modular Scale Generator builds a complete typographic scale from a single base size and a chosen mathematical ratio. Each step in the scale is the previous step multiplied by the ratio, so headings, body text, and small print stay in proportion across every screen.

How to Use

Set the Base Size in pixels (commonly 16px, which equals 1rem).
Choose a Ratio from the dropdown, or pick Custom and type in your own value.
Pick the output Unit (rem, em, or px) and the number of Decimals.
Pick an Export Format — CSS variables, SCSS variables, Tailwind config, or JSON.
Edit the Sample text to preview your own copy at every step of the scale.
Copy or download the generated code and drop it straight into your project.

Features

Nine classic ratios – Minor Second through Octave, including the Golden Ratio (1.618).
Custom ratio input – Enter any value between 1.01 and 3 for a bespoke scale.
Live visual preview – See the sample text rendered at every step from xs to 6xl.
Four export formats – CSS custom properties, SCSS variables, Tailwind fontSize config, or JSON.
rem, em, or px – Pick the unit that matches your design system.
Adjustable precision – Round generated values to 0–5 decimal places.
Client-side math – Everything runs in your browser, so nothing is sent to a server.

 FAQ

What is a modular type scale?

A modular type scale is a sequence of font sizes built from a single base size and a fixed multiplier. Each step is the previous step multiplied by that ratio, which keeps the proportional relationship between sizes consistent across the whole design.
Why use mathematical ratios instead of arbitrary sizes?

Ratios borrowed from music theory and classical proportion — Perfect Fourth, Perfect Fifth, the Golden Ratio — create relationships that the eye reads as harmonious. Arbitrary sizes tend to feel uneven and force more visual decisions on every screen.
Which ratio should I pick for body-heavy content?

Smaller ratios such as Minor Third (1.2) and Major Third (1.25) keep heading sizes close to body text, which works well for documentation, blogs, and content-heavy interfaces where the reader spends most of the time inside paragraphs.
Which ratio should I pick for marketing and editorial layouts?

Larger ratios such as Perfect Fifth (1.5) and Golden Ratio (1.618) produce dramatic size jumps between body and display text. They work well for landing pages, magazines, and hero sections where typography is the focal point.
What is the difference between rem, em, and px units?

px is an absolute pixel size. rem is relative to the root font size, so it scales when users change their browser default. em is relative to the nearest parent's font size, which makes nested elements compound. Most design systems prefer rem for global type scales because it respects user accessibility settings.