A typographic scale is a system of font sizes that follow a consistent ratio, helping you create visual harmony and hierarchy across your website. Think of it like a family of font sizes, where each size relates to the others in a pleasing way, rather than a random assortment.

Rather than trying to guess what size your headings, subheadings, and body text should be, a typographic scale provides you with a range of predetermined sizes that naturally work well together. This creates a visual rhythm that makes your content easier and more enjoyable to read, whether it's a landing page, a blog post, or even just the text in your pricing section.

How a typographic scale works

A typical typographic scale begins with a base font size (e.g., 16 pixels for your body text). You then take this base size and multiply it by a consistent ratio – common ones are around 1.25, 1.333, or 1.5. This multiplication generates the rest of the sizes in your scale. Let's illustrate that using a 1.25 ratio:

• Body text: 16px
• Small heading: 20px (16 × 1.25)
• Medium heading: 25px (20 × 1.25)
• Large heading: 31.25px (25 × 1.25)
• And so on...

This mathematical approach might sound technical, but it results in a natural flow and helps people easily understand the hierarchy of information on your page.

Why it’s important for web design

A well-defined typographic scale does wonders for readability. It establishes a clear visual hierarchy, leading your users through the copy and making it simpler to skim and comprehend. And even if your design is minimalist and sparse, consistent typography makes it seem more refined and professional.

When you pair a typographic scale with responsive design methods (with relative units such as rem or em), your text sizes adapt smoothly between various screen sizes. This means your headings and body text remain in proportion whether someone is looking at your site on a phone, tablet, or desktop.

Common ratios you might see

• 1.125 (Minor Second): Subtle differences, great for minimalist designs.
• 1.250 (Major Third): A nice balance, works well in many situations.
• 1.333 (Perfect Fourth): Creates a more noticeable contrast between text elements.
• 1.500 (Golden Ratio approximation): Offers a strong sense of hierarchy, often used in editorial design.

Tools like Modular Scale can be really helpful for playing around with different ratios to see what best suits your brand's aesthetic.

Setting it up on your site

You can definitely set up a typographic scale manually using CSS variables. You can use these variables throughout your CSS for headings, body text, buttons, and more, ensuring consistency.

Some frameworks, like Tailwind CSS, come with built-in font size utilities based on typographic scales. And if you're using a website builder, the design system often includes a responsive typographic scale automatically.

FAQs about typographic scale

Why should I use a typographic scale instead of picking font sizes manually?

Using a typographic scale ensures visual harmony and saves you the guesswork of trying to figure out which sizes look good together. It also makes it much easier to create a clear visual hierarchy that works well across all devices.

How does a typographic scale affect mobile design?

When you use relative units (like rem), a typographic scale adapts gracefully to different screen sizes. This, often combined with other responsive techniques, ensures your text remains readable on any device.

Is a typographic scale only for text-heavy websites?

Not at all. Even simple websites benefit from a structured approach to font sizes. It enhances the overall visual appeal and makes your content feel more refined.

What’s the best ratio for a typographic scale?

There's no single right answer. It really depends on the look and feel you're going for. Smaller ratios create subtle differences, while larger ones offer more dramatic contrast. Experiment to find what resonates with your brand.

Build a visually balanced website with B12

With B12’s AI-powered website builder, your site automatically uses clean, consistent typography. No need to worry about spacing, font size inconsistencies, or device responsiveness. Launch a professional-looking site in minutes today!