Scale Generator

Type Scale in Design Systems

How to integrate type scales as a foundational element of your design system to create consistent, harmonious typography across products and platforms.

The Role of Typography in Design Systems

Typography is one of the most fundamental elements of any design system. It serves multiple critical functions:

  • Communication: Typography is the primary vehicle for conveying information
  • Brand identity: Font choices and typographic styles reflect and reinforce brand personality
  • Visual hierarchy: Type scales establish clear relationships between different levels of content
  • User experience: Well-implemented typography improves readability and usability
  • Design cohesion: Consistent typography unifies the look and feel across products

A systematic approach to typography through a well-defined type scale ensures these functions are fulfilled consistently across all touchpoints.

What Makes a Good Type Scale System?

An effective type scale system for design systems should be:

1. Mathematically Sound

Based on a clear mathematical relationship (ratio) that creates visual harmony:

  • Common ratios include Major Third (1.25), Perfect Fourth (1.333), and Golden Ratio (1.618)
  • The ratio should align with the overall aesthetic goals of the design system
  • The mathematical foundation makes the system feel intentional and cohesive

2. Purposeful and Functional

Each size in the scale should have a clear purpose:

  • Defined roles for each size (e.g., body text, section headings, page titles)
  • Sufficient contrast between adjacent sizes to create clear hierarchy
  • Appropriate for the contexts in which it will be used

3. Flexible and Scalable

Adaptable to different contexts and platforms:

  • Works across various screen sizes and devices
  • Accommodates different product needs within the same ecosystem
  • Can evolve over time without breaking the system

4. Accessible

Meets accessibility standards and best practices:

  • Minimum sizes that ensure readability (typically 16px base)
  • Sufficient contrast with background colors
  • Scales appropriately when users increase their browser's font size

Structuring Typography in Design Systems

1. Typography as Design Tokens

In modern design systems, typography is often implemented as design tokens—named entities that store visual design attributes:

/* Example of typography tokens in CSS custom properties */
:root {
  /* Font families */
  --font-family-primary: 'Inter', sans-serif;
  --font-family-secondary: 'Merriweather', serif;
  --font-family-mono: 'Roboto Mono', monospace;
  
  /* Font sizes */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 1rem;       /* 16px - Base */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.875rem;  /* 30px */
  --font-size-3xl: 2.25rem;   /* 36px */
  --font-size-4xl: 3rem;      /* 48px */
  
  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;
  
  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Letter spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
}

2. Semantic Typography Styles

Build semantic styles on top of your tokens to create meaningful typography components:

/* Semantic typography styles */
:root {
  /* Text styles */
  --text-body-sm: var(--font-size-sm)/var(--line-height-normal) var(--font-family-primary);
  --text-body: var(--font-size-md)/var(--line-height-normal) var(--font-family-primary);
  --text-body-lg: var(--font-size-lg)/var(--line-height-normal) var(--font-family-primary);
  
  /* Heading styles */
  --text-heading-1: var(--font-size-4xl)/var(--line-height-tight) var(--font-family-primary);
  --text-heading-2: var(--font-size-3xl)/var(--line-height-tight) var(--font-family-primary);
  --text-heading-3: var(--font-size-2xl)/var(--line-height-tight) var(--font-family-primary);
  --text-heading-4: var(--font-size-xl)/var(--line-height-tight) var(--font-family-primary);
  
  /* Display styles */
  --text-display: var(--font-size-4xl)/var(--line-height-tight) var(--font-family-secondary);
}

/* Usage */
h1, .heading-1 {
  font: var(--text-heading-1);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
}

p, .body {
  font: var(--text-body);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-normal);
}

Implementing Type Scales Across Platforms

1. Web Implementation

For web platforms, CSS variables (custom properties) provide an excellent way to implement type scales:

/* CSS implementation */
:root {
  --base-size: 1rem; /* 16px */
  --ratio: 1.25;     /* Major Third */
  
  --scale-000: calc(var(--base-size) / var(--ratio) / var(--ratio));
  --scale-00: calc(var(--base-size) / var(--ratio));
  --scale-0: var(--base-size);
  --scale-1: calc(var(--base-size) * var(--ratio));
  --scale-2: calc(var(--base-size) * var(--ratio) * var(--ratio));
  --scale-3: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio));
  --scale-4: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio));
  --scale-5: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio));
}

2. Native Mobile Implementation

For iOS and Android, type scales can be implemented in platform-specific ways:

// Swift implementation for iOS
struct Typography {
    static let baseSize: CGFloat = 16.0
    static let ratio: CGFloat = 1.25
    
    static let scale000 = baseSize / ratio / ratio
    static let scale00 = baseSize / ratio
    static let scale0 = baseSize
    static let scale1 = baseSize * ratio
    static let scale2 = baseSize * ratio * ratio
    static let scale3 = baseSize * ratio * ratio * ratio
    static let scale4 = baseSize * ratio * ratio * ratio * ratio
    static let scale5 = baseSize * ratio * ratio * ratio * ratio * ratio
}

// Kotlin implementation for Android
object Typography {
    const val baseSize = 16f
    const val ratio = 1.25f
    
    val scale000 = baseSize / ratio / ratio
    val scale00 = baseSize / ratio
    val scale0 = baseSize
    val scale1 = baseSize * ratio
    val scale2 = baseSize * ratio * ratio
    val scale3 = baseSize * ratio * ratio * ratio
    val scale4 = baseSize * ratio * ratio * ratio * ratio
    val scale5 = baseSize * ratio * ratio * ratio * ratio * ratio
}

3. Design Tool Implementation

In design tools like Figma, type scales can be implemented as text styles:

  • Create a text style for each size in your scale
  • Name them consistently (e.g., "Heading/H1", "Body/Regular")
  • Document the mathematical relationship in your design system documentation
  • Consider using plugins or scripts to generate your type scale automatically

Type Scale Documentation

Thorough documentation is crucial for the successful adoption of your type scale system:

1. Core Documentation

Document the fundamental aspects of your type scale:

  • Mathematical basis: Explain the ratio used and why it was chosen
  • Base size: Document your base font size and its significance
  • Complete scale: List all sizes in the scale with their pixel/rem values
  • Font families: Detail which fonts are used and why

2. Usage Guidelines

Provide clear guidance on how to use the type scale:

  • Semantic roles: Define what each size should be used for
  • Hierarchy examples: Show examples of proper typographic hierarchy
  • Do's and don'ts: Illustrate correct and incorrect usage
  • Responsive behavior: Explain how the scale adapts across devices

3. Technical Implementation

Include technical details for developers:

  • Code snippets: Provide ready-to-use code for different platforms
  • Integration guides: Explain how to integrate with existing codebases
  • Performance considerations: Address font loading and performance
  • Accessibility requirements: Detail how to ensure accessibility

Case Studies: Type Scales in Major Design Systems

1. Google Material Design

Material Design uses a type scale based on the 1.2 ratio (Minor Third):

  • Base size of 16px (1rem)
  • 13 distinct type styles organized by semantic function
  • Responsive adjustments for different breakpoints
  • Roboto as the primary typeface (now evolving to include more variable fonts)

Material Design's type scale is relatively conservative, prioritizing readability and information density.

2. Apple Human Interface Guidelines

Apple's typography system uses dynamic type with text styles:

  • Scales automatically based on user preferences
  • SF Pro as the system font, designed specifically for screen legibility
  • Text styles (e.g., "Title 1", "Body") rather than explicit sizes
  • Emphasis on accessibility with large content size options

Apple's approach focuses on adaptability to user needs and system integration.

3. Atlassian Design System

Atlassian uses a modular scale with a ratio of 1.414 (Augmented Fourth):

  • Base size of 14px (smaller than typical to accommodate dense UIs)
  • Clear separation between heading and body text scales
  • Integration with spacing system (8px grid)
  • Charlie Sans as the custom typeface, designed for clarity in complex interfaces

Atlassian's scale balances information density with clear hierarchy for complex enterprise applications.

Common Challenges and Solutions

1. Balancing Consistency and Flexibility

Challenge: Different products or contexts may require variations in the type scale.

Solution: Create a core scale with allowed extensions or modifications:

  • Define a "safe zone" where teams must adhere strictly to the system
  • Allow controlled extensions for specific use cases
  • Document the process for requesting additions to the scale

2. Responsive Adaptation

Challenge: Type scales need to adapt across device sizes while maintaining hierarchy.

Solution: Create device-specific modifiers:

  • Define how the scale transforms at different breakpoints
  • Consider using different ratios for mobile vs. desktop
  • Provide clear examples of responsive typography in action

3. Legacy Integration

Challenge: Integrating a new type scale into existing products can be disruptive.

Solution: Create a migration strategy:

  • Map legacy sizes to the closest match in the new scale
  • Implement changes incrementally, starting with new features
  • Provide tools to identify and update non-compliant typography

4. Cross-Platform Consistency

Challenge: Maintaining visual consistency across web, iOS, Android, and other platforms.

Solution: Focus on perceived size rather than absolute measurements:

  • Adjust platform-specific implementations to achieve visual parity
  • Account for differences in how fonts render across platforms
  • Test cross-platform implementations side by side

Evolving Your Type Scale System

1. Measuring Success

Evaluate the effectiveness of your type scale system:

  • Adoption metrics: Track how widely the system is being used
  • Consistency audits: Regularly check for deviations from the system
  • User feedback: Gather feedback on readability and usability
  • Accessibility testing: Ensure the system meets accessibility standards

2. Iterative Refinement

Continuously improve your type scale based on real-world usage:

  • Collect feedback from designers and developers using the system
  • Identify gaps or pain points in the current implementation
  • Make targeted adjustments rather than wholesale changes

3. Versioning and Change Management

Manage changes to your type scale system carefully:

  • Version your design system, including typography changes
  • Communicate changes clearly to all stakeholders
  • Provide migration paths for major updates
  • Consider backward compatibility for critical applications

Building Your Type Scale with TypeScale Generator

Our TypeScale Generator can help you create a solid foundation for your design system's typography:

  1. Experiment with ratios: Try different scale ratios to find one that matches your brand aesthetic
  2. Set your base size: Determine the appropriate base size for your primary content
  3. Preview with your fonts: Test how your actual brand fonts look at different scale sizes
  4. Export to code: Generate CSS or SCSS that you can integrate into your design system
  5. Document your choices: Use the mathematical basis of your scale in your design system documentation

Remember that a type scale is just the beginning—you'll need to build semantic styles, usage guidelines, and implementation details on top of this foundation.

Further Resources