What different types of typographic scales exist?
TL;DR
Various typographic scales exist, each defined by specific ratios that influence the hierarchy and visual harmony of text elements. The most common typographic scales include:
- Modular Scale: Based on musical scales, where each step is proportional to the last. Common ratios include perfect fourths and major thirds.
- Golden Ratio (1.618): Provides a visually pleasing balance, often used in high-end and creative designs.
- Minor Second (1.067) and Major Second (1.125): Offer subtle and slightly more noticeable increments, respectively, suitable for dense text layouts.
- Minor Third (1.200) and Major Third (1.250): Provide moderate and clear increments, helpful in differentiating text levels in user interfaces.
- Perfect Fourth (1.333): Creates distinct visual hierarchy, ideal for varied content types needing balanced emphasis.
- Augmented Fourth (1.414): A dramatic scale useful for making strong visual impacts in promotional materials.
- Perfect Fifth (1.500): Offers the most significant size differences, excellent for designs requiring high contrast and visibility.
These scales help establish a clear hierarchy, improve readability, and ensure aesthetic appeal across different media.
Deep dive
There are different types of type scales. The most common ones are:
Modular scale
A modular scale is a classic typographic scale inspired by musical scales. Each step in the scale is proportional to the previous one, creating visual harmony in typography. This type scale uses ratios (the sequence of numbers) to create a rhythm in design.
Modular scales can be based on various ratios, such as perfect fourths or major thirds, which are derived from musical intervals. This makes it easier to establish a clear hierarchy and improve readability.
When applying a modular scale to the web, you typically start with a base number, such as the body text size. By multiplying or dividing this base value by the chosen ratio, you can determine the size of other elements.
If user feedback shows a preference for a visually pleasing and balanced app, using a modular scale is a smart choice.
Related reading:What is a classic type scale? How do mathematical principles and musical theory influence its design?
The most common ratios are:
Golden Ratio scale (1.618)
It uses the mathematical golden ratio (approximately 1:1.618) to size fonts.
It’s ideal for designs where visual harmony and aesthetic appeal are paramount, such as high-end websites, luxury brands, and artistic projects. The ratio is perfect for creative projects like portfolios, presentations, and magazines, where a unique and sophisticated look is desired. It’s also suitable for print design, such as brochures and posters.
Minor Second (1.067)
The Minor Second ratio increases text size by a factor of 1.067. This ratio provides very subtle increments between text sizes, making it suitable for designs where minimal variation is needed.
It’s particularly effective for documents, such as academic papers, legal documents, and detailed reports, or web pages with dense content.
Major Second (1.125)
The Major Second ratio increases text size by a factor of 1.125. It offers a more noticeable, yet still modest, progression between sizes.
It’s commonly used in web design to maintain a clean and structured layout while ensuring easy navigation and readability. The major Second ratio is effective for a variety of content types, including articles, blogs, and instructional materials.
Minor Third (1.200)
The Minor Third ratio increases text size by a factor of 1.200. This ratio offers moderate increments between text sizes, providing a balance between subtlety and emphasis.
It’s ideal for creating a clear hierarchy in documents, ensuring headings and subheadings stand out without overwhelming the body text. The ratio is also useful in user interfaces to differentiate between different levels of text, such as menu items, buttons, and form labels.
Major Third (1.250)
The Major Third ratio increases text size by a factor of 1.250. It provides noticeable increments, making it easier to create distinct visual hierarchies. It’s best for designs that require strong visual emphasis on certain elements, such as headers, subheaders, and key points. The ratio is perfect for diverse applications, websites, and presentations.
Perfect Fourth (1.333)
The Perfect Fourth ratio increases text size by a factor of 1.333. The 1.333 ratio provides enough contrast to make key information pop while maintaining overall balance. It’s suitable for pages with varied content types, such as blogs, news websites, and educational materials, where different text elements need to stand out distinctly yet harmoniously.
Augmented Fourth (1.414)
The Augmented Fourth is a slightly more dramatic step up ratio, increasing text size by a factor of 1.414.
It’s suitable for content that needs to make a strong impact, such as landing pages, promotional materials, and posters, where key messages must grab the viewer's attention. It’s also perfect for highlighting important sections or calls to action in web and mobile interfaces. This ratio is great for creative projects where dramatic text size variations can contribute to a dynamic and engaging design.
Perfect Fifth (1.500)
The Perfect Fifth ratio increases text size by a factor of 1.500, creating significant and noticeable differences between text sizes.
It’s ideal for designs that need clear and strong visual contrast between different text elements. The large increments make headings, subheadings, and body text easily distinguishable. This ratio is suitable for attention-grabbing designs like banners, posters, and advertisements, where the emphasis on key information is crucial. It also works well with infographics, instructional guides, and feature highlights in product descriptions.
Related reading: How do I establish a type scale for my project?
❓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.
- Who is the target audience? Are there specific age groups, accessibility needs, or cultural factors to consider?
- What is the primary purpose of the content? Is it for quick consumption, detailed reading, or visual impact?
- How important is readability? Will users be reading large amounts of text, or is the text primarily for headings and short blurbs?
- What type of content will be displayed? Is it dense and text-heavy, or sparse with large visual elements?
- What is the overall layout and design style? Is the design minimalist, or does it have a complex layout that requires clear differentiation between text sizes?
- Are there specific design principles or brand guidelines to follow?
- Will the typographic scale need to adapt to responsive design? How will text sizes change across different viewports, and what ratios will ensure consistency?
- How easy is it to implement the chosen type scale? Are there tools available to help maintain consistency across the design?
- How does the chosen scale enhance or detract from the intended user journey and experience?
⚠️ 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.
- Too small or large sizes: Choosing a scale that makes text too small or too large for the intended audience can hinder readability.
- Insufficient contrast: Using ratios that don’t provide enough contrast between text sizes can make it hard for users to differentiate between headings, subheadings, and body text.
- Lack of consistency: Failing to apply the chosen type scale consistently across the design can lead to a disjointed and unprofessional look.
- Too many sizes: Using too many different text sizes can overwhelm the user and make the design look cluttered. Stick to a limited set of sizes for clarity.
- Complex ratios: Overly complex or unconventional ratios can make the typographic system difficult to manage and implement.
- One-size-fits-all approach: Applying the same type scale and ratio universally without considering the specific context and content needs of each project.
- Weak hierarchy: Choosing a type scale that doesn’t provide a clear hierarchy can confuse users and make it difficult to navigate the content.
- Lack of testing: Failing to test the type scale on different devices and screen sizes can lead to unforeseen issues in real-world use.
🛠️ Useful tools
These tools will make your job easier and more effective.
- Modular Scale calculator – create harmonious and consistent typography by generating proportional typographic scales based on various preset or custom ratios.
- TypeScale – use another tool for generating harmonious and consistent typography by experimenting with different type scales and instantly previewing changes. This tool allows you to adjust font size, line height, and scale ratio.
- Golden Ratio Typography Calculator – achieve perfectly proportioned typography by calculating font sizes, line heights, and scale based on the Golden Ratio.
- TypeScales Plugin for Figma – streamline your typographic design process within Figma by generating consistent and proportional type scales. This plugin lets you set a base size and choose from various ratios to create and apply typographic scales directly in your Figma projects.
🤝 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!
- UX & UI Explained: Modular Scale by Tiago Alexandrino
- Exploring Responsive Type Scales by Joseph Mueller
- Typographic scaling: Definition, Figma tutorial, and examples by Chinwe Uzegbu