What is a classic type scale? How do mathematical principles and musical theory influence its design?

TL;DR 

• A type scale in typography is a system for organizing font sizes, ensuring visual harmony and rhythm. 
• It works similarly to a musical scale, where each font size is proportionally related to the others. 
• Outlined by Robert Bringhurst in "The Elements of Typographic Style," this scale features sizes like 6, 12, and 24 points, with a doubling ratio of 2, reflecting musical structure.
• The scale's main properties include the fundamental starting point (f0), such as 12 pt for print or 1 em for web design, and the number of font sizes (n), typically five within a range. 
• Adjusting the fundamental frequency (f0), the number of notes (n), or the ratio (r) allows for optimization across different mediums. 
• Other type scales use mathematical ratios like the Golden Ratio (approximately 1.618) or the Perfect Fifth (3:2)  for harmonious font size progressions.

Deep dive 

A type scale is a system used to determine typography sizes in a design, ensuring they are harmonious and visually appealing. It organizes font sizes progressively – each size is proportionally related to the others, creating a visual rhythm.

A classic type scale is a musical scale.

Here’s the classic type scale, outlined by Robert Bringhurst in "The Elements of Typographic Style":

Similar to how a musician selects notes from a musical scale, a typographer picks font sizes from this scale to create a cohesive look.

Main properties of a type scale 

Just like a musical scale, a typographic scale follows a specific rule: if a certain size 'f' is part of the scale, then 'rf', a size multiplied by the scale's ratio 'r', must also be a part of the scale.

In the classic typographic scale, you'll find font sizes like 6, 12, 24, and so on. Each subsequent size is double the previous one, giving the scale a ratio of two. This doubling concept mirrors the way scales are structured in classical music.

A key feature of any scale is its number of notes. In classical music, an octave consists of twelve notes. Similarly, classical typography typically has five font sizes within a given range. This makes sense since most documents don't require more than one or two levels of nested content, so a few size options suffice.

The third crucial characteristic of a scale is its fundamental starting point, known as the fundamental frequency, f0. It starts with the pica. Defined as 1 pica equals 12 points, this unit is the foundational font size in print design.

The point (pt) is the primary unit of measure in print typography, traditionally set at 1/72 of an inch. In digital typography, designers use ems and pixels (px) instead. Ems are scalable, relative to the font size set at the HTML or body level, making them ideal for responsive web design. Pixels, being fixed-size units, offer precise control crucial for digital clarity and pixel-specific design. 

The frequency fi for the i-th note in the scale can be calculated using this formula:

This formula lets us calculate every font size in the classic typographic scale:

How to work with a classic type scale 

When incorporating a classic type scale into design projects across different platforms, consider how the scale can be adapted and optimized for each specific environment. This involves understanding and manipulating the foundational aspects of the scale, such as the fundamental frequency (f0), the number of notes or font sizes (n), and the ratio between sizes (r). These elements can be adjusted to enhance readability and visual impact across print and digital formats.

Here are three distinct ways to adjust the scale in typography:

Change the fundamental frequency (f0): Modifying f0 allows you to tailor an existing scale to a new medium. For instance, setting f0 at 12 pt is ideal for print typography, whereas 1 em is suitable for web typography.

Modify the number of notes (n): By modifying the number of font sizes available (𝑛), you streamline your typographic toolkit. Opt for a minimal set of font sizes where each size has a clear purpose.

Optimize the ratio: The impact of your headings can dramatically shift with changes in the ratio (𝑟). On many websites, the headline is usually twice the size of the body text. There’s a notable ratio (𝑟) = 2, known as the musical ratio. Using this ratio in your typography means your title and body text will visually align like notes on a musical scale, one step apart.

Other type scales 

Musical scale is a classic type scale but there are also alternatives. 

Mathematical ratios like the Golden Ratio (approximately 1.618) or the Perfect Fifth (3:2) are often employed to create harmonious progressions in font sizes. 

Related reading: What types of typographic scales are there?

In some instances, a custom approach might be best. For instance, a website featuring consistently brief, impactful headlines could benefit from a larger ratio, like 𝑟 = 3. This setting would enhance the prominence of the headings without disrupting the overall balance of the page.

❓Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

• What is the purpose of the content? Understanding the content's goal helps determine how typography can guide the reader through the information, whether it's to inform, entertain, or persuade.
• Who is the target audience? Different audiences may have varying needs and preferences. For example, a larger type might be better for older readers, while a trendy font could appeal more to a younger demographic.
• What will be the reading environment? Considering whether the content will be read on mobile devices, desktops, or printed materials can influence decisions about size, spacing, and typeface choices.
• How much content needs to be organized? The amount and type of content (like long paragraphs vs. short bursts of text) can impact decisions on hierarchy and type scale.
• What are the brand guidelines? The type scale should align with the brand's identity and existing design guidelines to maintain consistency across all media.
• What emotional response do I want to evoke? Typography can significantly affect the mood of a design. Choosing a type scale that aligns with the desired emotional impact of the project is crucial.

• How does the type scale interact with other design elements? It’s important to consider how text sizes and styles will work with images, color schemes, and layout structures to create a cohesive design.

• What are the accessibility considerations? Ensuring that text is legible and accessible to people with disabilities, including sufficient contrast and easy-to-read font choices, is essential.
• How can the type scale be optimized for various devices and screen sizes while maintaining consistency?

⚠️ Common mistakes to avoid

Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.

• Overcomplicating the design with too many font sizes, leading to visual clutter and confusion.
• Neglecting the interplay between whitespace, line spacing, and font sizes, which can impact readability.
• Applying the type scale inconsistently, resulting in a fragmented user experience.
• Overemphasizing elements with excessive use of large or bold fonts, disrupting the overall hierarchy.

👥How to convince stakeholders

One of the most crucial skills for a designer is being able to explain and back up their ideas. If you're having a hard time convincing stakeholders, take a look at our tips to help you communicate better.

• Emphasize how a well-structured type scale directly improves readability, reduces cognitive load, and increases overall usability, leading to higher user satisfaction and engagement.
• Highlight how a clear typography hierarchy enables users to locate and process information efficiently, ultimately boosting productivity within the application.
• Demonstrate how implementing a classic type scale aligns with industry best practices and positions the company as a leader in providing exceptional user experiences.
• Stress the long-term benefits of establishing a consistent type scale early in the design process, as it streamlines decision-making, reduces revisions, and saves valuable time and resources.

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

The typographic scale by Spencer Mortensen