Best Typography Scale Ratios for UI Design

In UI design, maintaining a consistent typographic hierarchy is essential for readability, visual balance, and efficient content scanning. This article outlines the recommended modular scale ratios for pairing headings with body text, highlights the industry-standard ratios for mobile and desktop interfaces, and provides a clear framework for implementing them into your design system.

The Standard UI Base Size

Before selecting a scale ratio, you must define the base font size for body text. In digital product design, the industry standard base size is 16px (1rem). This size ensures optimal legibility across varying display densities and serves as the baseline from which all headings and supporting text are mathematically derived.

Unlike print or editorial design, user interfaces require tight control over vertical space and component constraints. For this reason, moderate scale ratios are preferred over high-contrast ratios like the Golden Ratio (1.618), which create excessively large headings unsuited for functional screens.

1. Major Third (1.250) — Best Overall for Web UI

The Major Third is the most versatile and widely recommended ratio for web applications, dashboards, and enterprise software. It creates clear contrast between heading levels without causing large headings to break awkwardly across lines on smaller desktop viewports.

  • Body (Base): 16px
  • H4: 20px
  • H3: 25px
  • H2: 31.25px (rounded to 32px)
  • H1: 39px (rounded to 40px)

2. Minor Third (1.200) — Best for Mobile and Compact Interfaces

Mobile devices and data-dense interfaces (such as data tables or developer tools) have limited horizontal real estate. The Minor Third offers subtle, clean differentiation between text levels while conserving vertical height.

  • Body (Base): 16px
  • H4: 19.2px (rounded to 19px or 20px)
  • H3: 23px
  • H2: 27.6px (rounded to 28px)
  • H1: 33.2px (rounded to 33px or 34px)

3. Perfect Fourth (1.333) — Best for Content-Heavy and Marketing UI

If your interface is content-driven, such as a blog, documentation site, or landing page, the Perfect Fourth provides a bolder, more expressive typographic contrast that makes scanning long-form content effortless.

  • Body (Base): 16px
  • H4: 21.3px (rounded to 21px)
  • H3: 28.4px (rounded to 28px)
  • H2: 37.9px (rounded to 38px)
  • H1: 50.5px (rounded to 50px or 52px)

Best Practices for Implementing a UI Typographic Scale

  • Round to whole numbers: Mathematical scaling produces decimals. Round your calculated values to integers, ideally aligning with a 4px or 8px baseline grid to keep spacing and line-heights uniform.
  • Adjust line height inversely: As font size increases, line height (leading) should decrease. While body text requires a generous line height of 140% to 160% (1.4 to 1.6) for readability, large headings should use a tighter line height between 110% and 125% (1.1 to 1.25) to avoid fragmented visual grouping.
  • Switch ratios across breakpoints: A common responsive strategy is to use the Minor Third (1.200) for mobile viewports to prevent line wrapping, and dynamically shift to the Major Third (1.250) or Perfect Fourth (1.333) for desktop screens.
  • Use font weights to reinforce hierarchy: If a lower ratio (like 1.200) feels too subtle, increase heading weights (e.g., Semibold or Bold) rather than jumping to an oversized scale ratio that compromises screen real estate.