How do I establish a type scale for my project?

TL;DR 

To establish a type scale for your project, start by defining a base font size and a modular ratio that fits your audience and platform. For example, a good base size for web body text is 16px, while mobile might require a slightly larger size. Next, choose a modular ratio to ensure adequate contrast between text elements; popular ratios include Minor Third (1.2) for subtle contrast, Major Third (1.25) for moderate contrast, and the Golden Ratio (1.618) for high contrast. Apply these ratios to your base size to develop a consistent range of font sizes. Then, organize these typography scales into your design system, ensuring they are integrated and consistently applied across your application.

Deep dive

A clear typographic hierarchy helps users quickly understand the content’s structure and importance. By recognizing patterns, the brain processes information more easily. Hence, the interface feels intuitive and simpler to use.

Think of it like a musical scale where each note aligns to create harmony. A type scale works similarly. It's a predetermined set of font sizes used throughout your app, important for a consistent hierarchy and visual rhythm. It helps quickly differentiate headings, body text, labels, and buttons, making it easier for users to navigate.

Here’s how to set up a type scale for your project:

Define your base size and modular ratio

1. Base size: Start with a size that suits your audience and platform. For the web, 16px is a good starting point for body text, and mobile might need a bit larger.
2. Modular ratio: Choose a ratio that gives the right level of contrast. Here are some popular choices::

• Minor Third (1.2): Subtle contrast, suitable for text-heavy interfaces.
• Major Third (1.25): Moderate contrast, a versatile choice.
• Golden Ratio (1.618): High contrast, emphasizes visual impact.

Modular ratios for typographic scaling help set the relative sizes of elements like font sizes, line heights, and spacing systematically. These ratios create harmony among these elements, establishing consistency and visual balance in a design.

For instance, if your project starts with a 16px base and uses a Major Second (x1.125) scale, your font sizes might look like this:

• Heading 1: 32px
• Heading 2: 28px
• Heading 3: 25px
• Heading 4: 20px
• Body 2: 18px
• Body 1: 16px

Apply your chosen ratio to your base size to develop a full range of font sizes. Experiment to see what looks balanced. To help, you might use a Type Scale Calculator.

Source

Design for readability

1. Pick a clear, easy-to-read font that fits your brand. Sans-serif fonts are often a good choice for digital screens.
2. Establish a type scale. Use a consistent scale for sizing and organizing headings, body text, and labels.
3. Adjust line height. A line height of about 1.4 to 1.7 times the font size can greatly improve readability.
4. Use bolder font weights for headings to create contrast and make them stand out. Choose a font with a variety of weights.
5. Keep enough contrast between text and background colors to help users with visual impairments.
6. Use visual cues like size, color, and spacing to clearly mark differences between types of content like headings, body text, and labels.

Organize your typography scales into the system

When you're designing a business application interface, remember that you'll eventually need to make it work smoothly across different devices. Here are some practical tips on how to organize your typefaces for responsive versions.

• Set up a design system: Start by defining your base font size, line height, and letter spacing. This will ensure consistency across your application.
• Establish a hierarchy:  Implement headings (H1, H2, H3, etc.) and body text styles within your design system. Developers can then consistently apply your typography scale effortlessly.
• Use consistent text styles across all your artboards to maintain uniform typography.
• For responsive options: Create duplicate text styles with adjusted font sizes for different screen sizes. Use a scaling factor to keep the hierarchy consistent across devices. 
• Apply constraints to your text frames: Ensure that text resizes proportionally when you adjust the artboard size for different devices such as desktops, tablets, and mobile phones.

Source

Refine and test

Getting your typography right doesn’t end once you’ve set it up. It’s crucial to test and make sure your fonts look great on every device. Take the time to check your app on various devices, in different settings, and across different screen sizes, resolutions, and browsers. This proactive step helps catch any issues with readability or legibility early on, creating a smooth experience for your users.

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 primary content of the application? Is it data-heavy (dashboards, reports) or more text-heavy (articles, documentation)?
• Who are the primary users of the application? What are their needs and expectations?
• On what devices will the application primarily be used? Desktop, tablet, mobile?
• What is the brand personality we want to convey through the typography?
• Are there any existing brand guidelines or constraints we need to work within?

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.

• Using too many font sizes, which can create visual clutter and confusion.
• Not providing enough size contrast between levels, making the hierarchy unclear.
• Using a ratio that is too dramatic (e.g., 1.618) for content-heavy applications, which can lead to overly large headings that waste space.
• Failing to test the scale with real content across various screen sizes and devices.
• Not documenting the scale or not checking if it's used consistently across the application

Useful tools 

These tools will make your job easier and more effective.

• Modular Scale Calculator – Quickly generate a type scale using a base font size and your chosen ratio. This type scale generator represents the scale and even gives the corresponding CSS code, making it super easy to use in your projects.
• Type Scale – Generate a type scale based on a base size and ratio. This tool lets you see how the scale looks with different fonts and provides the CSS code for easy implementation.

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!

• What is a Typographic Scale? by Liam McKay
• Type scale Unleashed: Harnessing the Raw Power of Harmonious Letterforms in Design Systems by Ben Bugli
• Generate type scales with ease by Denislav Jeliazkov
• Typographic scaling: Definition, Figma tutorial, and examples by Log Rocket