Designing a website without a modular scale is like trying to build a house without a tape measure. You might get lucky with a few rooms, but the whole structure will feel off. The stairs will be too steep. The doorways will be too narrow. Nothing will quite fit together. That is exactly what happens when you pick font sizes and spacing by eye. One page looks great. The next page looks like it belongs to a different site. Your visitors notice this inconsistency even if they cannot name it. A modular scale fixes this problem by giving you a set of mathematically related values to use for everything from headings to margins. You stop guessing. You start building with purpose.
A modular scale is a sequence of numbers that grow by a consistent ratio, like 1.250 or 1.618. Using one for your font sizes, padding, margins, and element widths creates visual harmony across every page. This guide walks you through choosing a ratio, applying the values to your CSS, and avoiding the common mistakes that make sites feel disjointed.
What a Modular Scale Actually Does for Your Design
A modular scale works the same way a musical scale works. In music, notes are spaced at fixed intervals. If you play a C and then a G, your ear expects the next note to follow the same pattern. Your eyes work the same way with a website. When your H1 is 48 pixels and your H2 is 32 pixels, there is no relationship between those numbers. But when your H1 is 48 pixels and your H2 is 38.4 pixels (because both come from a scale with a ratio of 1.250), your brain registers the connection.
This is not about perfection. It is about consistency. A modular scale ensures that every typography size, every button padding, and every section margin shares a common mathematical parent. The result is a design that feels intentional.
Choosing the Right Ratio for Your Project
Not all ratios are created equal. The ratio you choose determines how dramatic the size jumps are. Here are the most common ratios and where they work best.
| Ratio | Value | Best Use Case |
|---|---|---|
| Minor Second | 1.067 | Tight, text heavy layouts like news sites or documentation |
| Major Second | 1.125 | General purpose, good for blogs and business sites |
| Minor Third | 1.200 | Balanced, works well for most corporate and portfolio sites |
| Major Third | 1.250 | Popular choice, great for content driven sites |
| Perfect Fourth | 1.333 | Bold headings, good for landing pages and marketing sites |
| Golden Ratio | 1.618 | Very dramatic, best for minimalist or artistic designs |
For most websites, a ratio between 1.200 and 1.333 is a safe starting point. If you are building a site with lots of long form content like articles or guides, go with 1.250. If you want bigger, more dramatic headlines, try 1.333. You can always adjust later.
How to Build Your Scale Step by Step
Building a modular scale is straightforward. You pick a base value (usually your body text size) and multiply it by your chosen ratio repeatedly. Here is the process.
- Set your base size. Start with 16 pixels for body text. That is the default in most browsers and a comfortable reading size for desktop.
- Multiply up for larger sizes. Multiply 16 by your ratio (say 1.250) to get 20. Multiply 20 by 1.250 to get 25. Keep going until you have enough heading sizes.
- Divide down for smaller sizes. Divide 16 by 1.250 to get 12.8. Round to 13 pixels. This gives you a caption or small text size.
- Apply the same values to spacing. Use the same numbers for margin bottom on paragraphs, padding inside cards, and gaps between sections.
- Document your scale. Write down every value in a table or CSS custom properties file so you never have to guess again.
Here is what a scale with a base of 16 pixels and a ratio of 1.250 looks like.
- Step 5: 39 pixels (H1)
- Step 4: 31 pixels (H2)
- Step 3: 25 pixels (H3)
- Step 2: 20 pixels (H4)
- Step 1: 16 pixels (body)
- Step 0: 13 pixels (small text)
That is a five step scale. It gives you everything you need for a typical website. If you need more levels, just keep multiplying.
Common Mistakes and How to Avoid Them
Even experienced designers trip up when they first start using a modular scale. Here are the most frequent mistakes and the simple fixes.
- Using too many steps. A scale with eight or nine steps looks chaotic. Stick to four or five for most projects.
- Mixing ratios on the same page. Do not use 1.250 for headings and 1.333 for spacing. Pick one ratio and use it everywhere.
- Forgetting to round. Your scale will produce values like 12.8 or 39.0625. Round to whole pixels. Browsers handle whole numbers better.
- Ignoring context. A 48 pixel heading might look huge on mobile. Adjust your scale at different breakpoints using clamp() or media queries.
- Applying the scale only to fonts. Your margins, paddings, and even border widths should follow the same scale. Consistency breaks when spacing does not match typography.
A modular scale is not a cage. It is a foundation. You can break the rules once you understand them. But if you break them in the first project, you lose the benefit of consistency.
Using Your Scale in Real CSS
The best way to implement a modular scale is with CSS custom properties. This keeps your values in one place and makes future changes painless.
:root {
--text-sm: 13px;
--text-base: 16px;
--text-h4: 20px;
--text-h3: 25px;
--text-h2: 31px;
--text-h1: 39px;
--space-xs: 8px;
--space-sm: 13px;
--space-md: 16px;
--space-lg: 25px;
--space-xl: 39px;
}
Now you can use these variables anywhere in your stylesheet.
h1 {
font-size: var(--text-h1);
margin-bottom: var(--space-lg);
}
.card {
padding: var(--space-lg);
gap: var(--space-md);
}
If you decide later that your scale needs to be tighter, you change the variables in one place and the entire site updates. That is the power of a modular scale combined with modern CSS.
When to Break Away From the Scale
Rules are made to be broken, but you need to know why you are breaking them. Here are a few situations where stepping outside your scale makes sense.
- Hero sections. A landing page hero might need a headline that is larger than your scale allows. That is fine. Just make sure the rest of the page follows the scale.
- Mobile adjustments. Your scale might produce a 39 pixel H1 that feels too big on a phone. Use clamp() to scale it down smoothly.
- Special components. A pricing table or testimonial card might need tighter spacing to fit content. Adjust the component, but keep the rest of the site on the scale.
The goal is not rigid adherence. The goal is a design that feels cohesive. If 90 percent of your site follows the scale, that 10 percent of exceptions will stand out for the right reasons.
Tools to Help You Get Started
You do not need to do the math by hand. Several free tools generate a complete modular scale for you.
- Type Scale by Jeremy Church. Enter your base size and ratio, and it generates all the values plus a live preview.
- Modular Scale by Tim Brown. This tool lets you compare multiple ratios side by side.
- Sass or PostCSS plugins. If you use a preprocessor, you can define your scale with functions that calculate values automatically.
These tools save time and help you experiment with different ratios before committing to one.
Putting It All Together for Your Next Project
A modular scale transforms how you approach web design. Instead of guessing whether 24 pixels or 22 pixels looks better for a subheading, you already have the answer. Instead of wondering if your card padding matches your button padding, you know it does because both come from the same scale.
Start small. Pick one ratio. Build a five step scale for your fonts. Apply the same values to your spacing. Use CSS custom properties to keep everything organized. Test the result and see how much more polished your site feels.
If you want to see how other design decisions affect your site’s overall feel, check out our guide on 7 typography mistakes that make your website look unprofessional. And when you are ready to pair your scale with a strong color strategy, read how to choose the perfect color palette for your website in 5 steps.
Stop Guessing and Start Measuring
You now have everything you need to use a modular scale in your next web design project. The math is simple. The tools are free. The results are immediate. Your typography will feel intentional. Your spacing will feel balanced. Your entire site will feel like one cohesive experience instead of a collection of random parts.
The next time you sit down to design a page, open your scale first. Let the numbers guide your choices. Trust the ratio. Your visitors will not know why the site feels right. They will just know that it does. And that is the mark of a designer who stopped guessing and started building with confidence.