Question 1

Medium-contrast ratios

Accepted Answer

are the most common in standard web design. These include the Minor Third (1.2), the Major Third (1.25), and the Perfect Fourth (1.333). These ratios provide a clear, undeniable visual distinction between a paragraph, a subheading, and a main title, without the largest headings becoming unmanageable on smaller screens. They are the ideal choice for marketing websites, standard blogs, e-commerce product pages, and corporate landing pages. The contrast is high enough to guide the user's eye, but restrained enough to fit comfortably within standard layout containers.

Question 2

High-contrast ratios

Accepted Answer

include the Augmented Fourth (1.414), the Perfect Fifth (1.5), and the famous Golden Ratio (1.618). In these scales, the font sizes explode in size exponentially. By Step 4 on a Golden Ratio scale (base 16px), your heading is already a massive 109px. These extreme variations are almost never used for application UI or mobile design. Instead, they are reserved for highly artistic, editorial, and print-inspired web designs where dramatic typography is the primary visual element. Furthermore, modern CSS has introduced the concept of Fluid Typography Scales. Instead of picking one static ratio, developers use the CSS clamp() function to interpolate between a low-contrast ratio on mobile devices and a high-contrast ratio on desktop screens. This method ensures that headings shrink proportionally on small screens while expanding to dramatic, eye-catching sizes on ultra-wide monitors, all without requiring complex media queries.

Question 3

What is the best ratio for a standard website?

Accepted Answer

There is no single "best" ratio, but the Major Third (1.25) and the Perfect Fourth (1.333) are the most widely recommended for standard marketing websites and blogs. These ratios provide excellent, clear contrast between headings and body text without causing the largest titles to become unmanageable on standard desktop screens. For data-heavy applications or dashboards, a much tighter ratio like the Major Second (1.125) is preferred to conserve screen space.

Question 4

Should I round my pixel values to whole numbers?

Accepted Answer

No, you should not manually round your calculated pixel values when building a modern digital scale. Browsers are highly capable of rendering sub-pixel values (like 31.25px) accurately. Rounding numbers breaks the mathematical integrity of the exponential scale, leading to compounding errors where the sizes are no longer truly proportional. Maintain the exact decimal values by converting them directly into rem units in your CSS.

Question 5

How does a typography scale interact with an 8px grid?

Accepted Answer

A typography scale dictates the size of the font itself, while an 8px grid dictates the spacing and layout of the page. To make them work together, you must adjust the line height (leading) of your typography scale to align with the grid. If your modular scale generates a font size of 25px, you would assign it a line height of 32px (a multiple of 8). This ensures the text elements fit perfectly into the spatial rhythm of the overall page design.

Question 6

Why do we use musical intervals for typography?

Accepted Answer

Musical intervals, such as a Perfect Fifth (3:2 ratio) or a Major Third (5:4 ratio), represent mathematical relationships that the human brain inherently perceives as harmonious. Just as these frequencies create pleasing chords in acoustics, they create pleasing proportions in visual design. Using these established ratios relies on centuries of proven aesthetic theory, ensuring your text sizes feel naturally related rather than random.

Question 7

Can I use multiple base sizes in one scale?

Accepted Answer

While a standard modular scale uses a single base size (usually 16px), complex design systems sometimes employ a dual-base scale. This involves running two separate mathematical sequences simultaneously (e.g., one starting at 16px and another starting at 18px) and interleaving the results. This technique provides more available font sizes (a denser scale) while maintaining mathematical relationships, though it requires significantly more effort to manage and document.

Question 8

How do I handle line heights in a modular scale?

Accepted Answer

Line height should ideally decrease proportionally as the font size increases. Body text (16px) usually requires a line height of 1.5 (150%) for readability. However, applying a 1.5 line height to a massive 64px heading will result in enormous, awkward gaps between the lines. A best practice is to tighten the line height multiplier as you move up the scale steps, often reducing it to 1.2 or even 1.1 for the largest H1 elements.

Typography Scale Calculator

Command Palette