Use the free Modular Type Scale Calculator below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
One Ratio, Every Heading Size You Need
Picking heading sizes by eye usually produces a mess: an H2 barely bigger than the body text, an H3 bigger than the H2, and sizes that change from page to page. A modular scale fixes this with one rule. Start from a base size, multiply by a fixed ratio for each step up, and divide by the same ratio for each step down. Every size on the page is then related to every other size, and the whole page looks designed rather than assembled.
The tool above does the arithmetic. Enter your base size, usually your body text size, and pick a ratio. The table shows seven steps, from two steps below the base to four steps above it, with a live preview of each size. Copy the CSS variables and your headings, captions and small text all come from one system.
Which Ratio Should You Choose?
Small ratios give calm, subtle hierarchies. A ratio of 1.125, the minor second, suits dense documentation and interfaces where headings should whisper, not shout. A ratio of 1.25, the major third, is the most popular all-round choice: headings clearly outrank body text without dominating the page. It is a safe default for blogs, business sites and landing pages.
Larger ratios give drama. A ratio of 1.333, the perfect fourth, suits editorial and magazine layouts. A ratio of 1.5, the perfect fifth, suits posters, marketing pages and hero sections. The golden ratio, 1.618, creates striking contrasts but can produce enormous top headings, so use it when the design has room for a very large display size. If in doubt, start at 1.25 and move up only if your headings feel timid.
Map the Steps to Real Elements
A scale is only useful when each step has a job. A practical mapping is: two steps below the base for captions and footnotes, one step below for small labels, the base itself for body text, one step up for large body or lead paragraphs, two steps up for H3, three steps up for H2 and four steps up for H1. Adjust to your content, but keep the mapping consistent across the site.
Consistency is the real benefit. When every page uses the same scale, readers learn your hierarchy once and navigate every page faster. It also speeds up design work: instead of debating each new heading size, you pick the step that fits its rank. New team members can follow the system without guessing.
Base Size Matters More Than Ratio
The base size anchors the whole scale, so choose it carefully. For most websites the base is the body text size, commonly 16 to 18 pixels. A larger base lifts the entire scale, which suits sites with older audiences or long-form reading. A smaller base tightens everything, which suits dense tools and dashboards. Changing the base later shifts every heading, so set it deliberately at the start of a project.
Test the scale on a real page, not just in the table. A scale that looks elegant as a list can feel top-heavy once a large H1 sits above several paragraphs. If the top step feels overwhelming, drop one ratio notch rather than shrinking a single heading by hand: hand-tweaked exceptions are how a system quietly falls apart.
Responsive Scales Without the Chaos
On small screens, a full desktop scale often breaks: a four-step H1 can swallow a phone screen. The clean fix is a smaller ratio or a smaller base on mobile, applied through a media query, so the whole scale shrinks as one system. Avoid resizing individual headings for mobile while leaving the rest: that recreates the inconsistency the scale was built to remove.
Copy the CSS variables into your stylesheet and reference them everywhere: headings use the variables, never raw pixel values. When the brand or the audience changes, you update the base or the ratio in one place and the entire site re-scales coherently. That single point of control is the real power of a modular scale.
Related tools
- Calculadora de Escala Tipográfica Modular (Spanish version)
- Letter Spacing Tester
- Signature Pad Maker
Pingback: Calculadora de Escala Tipográfica Modular - Tamaños de TÃtulo Perfectos