What is a type scale, and how to build one

What is a type scale?

A type scale is a system of type sizes that are mathematically related, typically using a specific ratio. This approach ensures that the typography has a consistent and harmonious appearance. The concept is inspired by musical scales, where each note has a mathematical relationship to the others. In typography, this means selecting a base font size and then using a ratio to derive the other sizes. Common ratios include the golden ratio (1.618), the perfect fourth (1.333), and the major third (1.25).

Why use a modular scale?

Modular scales help designers make consistent and aesthetically pleasing typography choices. By using a mathematical ratio, designers can avoid arbitrary font sizes and create a cohesive visual hierarchy. This is particularly important in web design, where content must be readable on various devices and screen sizes. Modular scales also help maintain consistency across different design elements, such as headings, body text, and captions.

Choosing the right ratio for your scale

The ratio you choose will significantly impact the look and feel of your typography. Here are some common ratios and their effects:

• Golden Ratio (1.618): Creates a harmonious and natural feel. Often used in classical design.
• Perfect Fourth (1.333): Provides a balanced and modern look. Good for web design.
• Major Third (1.25): Offers a subtle and elegant scaling. Suitable for print design.
• Minor Third (1.2): Delivers a gentle and soft scaling. Ideal for body text.

For web design, the perfect fourth (1.333) and the golden ratio (1.618) are often recommended due to their balance between readability and aesthetics. For print, the major third (1.25) and the minor third (1.2) can provide a more refined look.

Selecting fonts for your scale

Choosing the right fonts is key for implementing a successful type scale. Here are some free, open-licensed fonts from the Google Fonts library that work well with modular scales:

• Playfair Display: A high-contrast serif font that shines in headlines and titles. Its elegant design makes it a great choice for print and web.
• Source Sans 3: A versatile sans-serif font that is highly readable in body text. It works well for both web and print applications.
• Inter: A sans-serif font designed for computer screens. It is highly legible at small sizes and is ideal for web design.
• Fraunces: A serif font with a classic feel. It is suitable for headings and body text in print and web designs.
• Merriweather: A serif font designed for on-screen reading. It is highly readable and works well for body text in web design.
• Libre Franklin: A sans-serif font that is versatile and readable. It is a good choice for both headings and body text.

Building your type scale

To build a type scale, follow these steps:

1. Choose a base font size: Start with a base font size that is appropriate for your content. For web design, a common base size is 16px. For print, 12pt is often used.
2. Select a ratio: Decide on a ratio that fits the desired aesthetic. For example, the perfect fourth (1.333) or the golden ratio (1.618).
3. Calculate your type sizes: Multiply your base font size by the ratio to get the next size, and continue this process to create a set of type sizes. For example, if your base size is 16px and your ratio is 1.333, your sizes would be 16px, 21.33px, 28.43px, and so on.
4. Round to the nearest whole number: For practicality, round the calculated sizes to the nearest whole number or to a value that is easy to work with, such as 16px, 21px, 28px.
5. Select fonts: Choose fonts that complement your design and work well with the calculated sizes. Refer to the list of recommended fonts above.

Implementing your type scale in web design

Once you have your type scale, it’s time to implement it in your web design. Here are some tips:

• Use CSS variables: Define your type sizes as CSS variables to make it easy to manage and update your styles.
• Apply the scale consistently: Use the type scale for all text elements, including headings, body text, and captions.
• Test on different devices: Make sure your typography is readable and visually appealing on various screen sizes and devices.
• Consider accessibility: Use relative units like em or rem to allow users to adjust the font size according to their preferences.

Implementing your type scale in print design

In print design, implementing a type scale involves the following:

• Choose appropriate fonts: Select fonts that are suitable for print, such as serif fonts like Playfair Display or Fraunces.
• Set base font size: Establish a base font size that is comfortable for reading, typically between 9pt and 12pt.
• Apply the scale: Use the calculated type sizes for headings, subheadings, and body text.
• Consider layout: Make sure the typography fits well within the layout and enhances the overall design.

Frequently asked questions

What is the best ratio for a type scale?

The best ratio depends on the desired aesthetic and the medium. For web design, the perfect fourth (1.333) and the golden ratio (1.618) are popular choices. For print, the major third (1.25) and the minor third (1.2) can provide a more refined look.

Can I use different ratios for different elements?

Yes, you can use different ratios for different elements to create a more dynamic and varied typography system. However, it’s important to maintain consistency and ensure that the ratios complement each other.

How do I choose the right fonts for my type scale?

Choose fonts that fit the tone and purpose of your content. Consider the x-height, contrast, and weights available. Fonts like Source Sans 3 and Inter are versatile and work well for body text, while Playfair Display and Fraunces are excellent for headings and titles.

What if I want to use a different base font size?

You can adjust the base font size based on the needs of your project. For example, if you’re designing for a mobile device, you might choose a smaller base size. Just ensure that the calculated sizes are appropriate for your content and medium.