Responsive Type Scales: Part 1

A type scale is a series of font sizes, similar to a musical scale in which notes rise from lower to higher pitches. In typography, it signifies a balanced sequence of font sizes ranging from small to large. The key element in a type scale is the ratio, determining the difference between font sizes.

For instance, using "Perfect Fourth Increments" with a ratio of 1.333, each font size is 1.333 times larger than the previous one. If the base font size is 20px, the H6 element would be approximately 27px (rounded off), and the H5 element would be 1.3 times larger than H6, and so forth.

By adjusting the ratio, we can create various scales. Conversely, for smaller font sizes than the body text, the value is divided by the ratio instead of multiplied. Understanding type scales allows us to develop systems with custom ratios or adopt popular harmonious scales.

Grouping Type Scales by Contrast

Type scales can be categorized based on the contrast between font sizes, such as low, medium, and high contrast scales.

Low Contrast Scales:

• Minor Second
• Major Second

Medium Contrast Scales:

• Minor Third
• Major Third
• Perfect Fourth

High Contrast Scales:

• Augmented Fourth
• Perfect Fifth
• Golden Ratio

Let's focus on the low contrast scales first.

✢ Low Contrast Scales

The Minor Second and Major Second scales follow a linear progression in font sizes, making them ideal for dashboards, mobile apps, and product websites. Their linear nature allows for flexible content display, enabling you to fit more information on the screen effectively.

✢ Medium Contrast Scales

When we move on to the Medium Contrast Scales, the Minor Third scale also exhibits a fairly linear progression. However, there is a noticeable increase in the difference between each font size within this scale.

The Major Third scale features a more significant difference between font sizes compared to the Minor Third scale.

The Perfect Fourth scale is perhaps the most popular choice as it establishes a distinct contrast between font sizes while maintaining a visually balanced appearance. These medium contrast scales are well-suited for blogs or websites with substantial informational content.

✢ High Contrast Scales

The Augmented Fourth, Perfect Fifth, and Golden Ratio are high contrast scales characterized by significant differences between the lower and higher font sizes. These high contrast scales are better suited for marketing websites where emphasis and visual impact are key.

How to decide which scale to use?

Understanding the purpose of your project is crucial when selecting the appropriate type scales. Elliot Dahl categorizes websites into three archetypes in his article on web typography: Marketing, Blog or Informational, and Product. By analyzing these archetypes, you'll discover that specific type scales are more suitable for different site categories based on their unique requirements and objectives.

In marketing sites, the primary goal is to showcase a product or service effectively and convert visitors into customers. Therefore, in these types of websites, it is essential to use type scales that enhance readability, create visual hierarchy, and emphasize key information to drive conversions and engagement.

For Blog or Informational sites, the primary focus is on textual content, making readability a critical factor. To ensure optimal readability, it can be suitable to use a medium ratio in type scales to avoid excessive contrast between font sizes.

Medium's website serves as an excellent example of this approach, where font sizes progress in a well-balanced manner, maintaining consistency and readability. By using a medium contrast scale, such websites can effectively present content with clear hierarchy and minimal disparity between titles and paragraphs, enhancing the overall reading experience.

Product websites aim to solve problems or provide access to tools for users. Linear scales, characterized by a more gradual progression of font sizes, are particularly well-suited for these websites. Unlike high-contrast scales, linear scales offer a more subtle variation between font sizes, which aligns with the functional and problem-solving nature of product websites. This approach ensures a cohesive and user-friendly design that enhances the overall user experience.

Ultimately, these guidelines are not strict rules that must be followed without exception. Depending on the specific goals and requirements of your project, you have the flexibility to deviate from traditional norms and choose type scales that align with your vision and objectives. It's essential to prioritize what feels right and works best for your project, allowing for creative freedom and customization to achieve the desired outcome.

How to make a type scale responsive?

There are two approaches to adjusting font sizes at different breakpoints:

1. Keeping the scale consistent but changing the base font size at each breakpoint.

2. Keeping the base font size consistent but adjusting the scale at each breakpoint.

I prefer the second approach, which involves maintaining the scale while modifying the base font size. This method resonates with me as it ensures consistency in the scale across breakpoints. However, depending on specific design considerations or project requirements, you may opt for the first approach of changing the scale at each breakpoint in certain cases. Flexibility in choosing the most suitable approach allows for customization based on the unique needs of each project.

In the example, a Perfect Fourth scale is depicted at two different breakpoints. For the desktop view, a body font size of 16px is used, maintaining the same ratio. In contrast, for mobile views, the body font size is adjusted to 14px while retaining the consistent ratio.

This demonstrates the flexibility in implementing font sizes across different breakpoints. While maintaining a consistent scale is important, variations in font sizes based on specific breakpoints allow for optimal readability and visual appeal across different devices and screen sizes.

Tools & Resources

Here are some resources and tools for diving deeper into the topic of type scales. I encourage you to explore these resources to enhance your understanding of type scales and typography principles. They provide valuable information that may not have been covered in this presentation. Especially “Kick start your typography system in Figma” and “8-point grid: Typography on the web” articles.

Also don't forget to check fountn.design for all kinds of design resources.

Resources

• Exploring Responsive Type Scales
• 8-Point Grid: Typography On The Web
• Typographic Scales
• Kick-start your typography system in Figma
• “Typography in Design Systems,” an article by Dan Mall
• A practical guide to creating a scalable scale type for your interfaces

Tools

• Type Scale - A visual calculator
• Archetype
• Modular Scale
• Gridlover
• Typescales Plugin for Figma

Thank you for reading 💛