Type Scale Ratios Compared: Minor Third to Perfect Fourth

A type scale is a set of font sizes related by a ratio. Pick the wrong ratio and your hierarchy is too flat (headings do not stand out) or too steep (headings scream). This article compares the four most common ratios at the same base size, so you can see the difference side by side and pick the one that fits your project.

The Four Ratios

The four ratios most designers reach for are the minor third (1.2), the major third (1.25), the perfect fourth (1.333), and the golden ratio (1.618). Each one defines how much bigger each step in the scale is than the step below it.

The minor third is the smallest ratio. Each step is 1.2 times the previous one. The scale grows slowly, which gives a gentle hierarchy. The major third is slightly larger at 1.25. The perfect fourth is 1.333, a noticeable step. The golden ratio is 1.618, the largest of the four, which gives a dramatic hierarchy.

The Same Base Size, Four Ratios

If your base body text is 16px, here is what each ratio produces at the 2xl step (three steps above base):

• Minor third (1.2): 16, 19, 23, 28, 33px at 2xl
• Major third (1.25): 16, 20, 25, 31, 39px at 2xl
• Perfect fourth (1.333): 16, 21, 28, 38, 50px at 2xl
• Golden ratio (1.618): 16, 26, 42, 68, 110px at 2xl

The minor third 2xl is 33px. The golden ratio 2xl is 110px. The golden ratio is more than three times larger at the same step. That is the difference between a heading that sits comfortably next to body text and a heading that dominates the page.

When to Use the Minor Third (1.2)

The minor third is the ratio for dense, information-heavy interfaces. Dashboards, documentation, admin panels, and data tables all benefit from a gentle hierarchy because the page already has a lot of content and a dramatic scale would add visual noise.

Use the minor third when your headings need to be distinguishable from body text but not loud. Most enterprise SaaS interfaces use this ratio or something close to it.

When to Use the Major Third (1.25)

The major third is the ratio for general-purpose websites. Marketing sites, blogs, and product pages where the hierarchy needs to be clear but the page is not dominated by a single hero heading.

This is the ratio most designers default to when they are unsure. It is the "safe" choice: enough hierarchy to be useful, not so much that it feels dramatic.

When to Use the Perfect Fourth (1.333)

The perfect fourth is the ratio for editorial and content-first sites. Magazines, long-form blogs, and documentation that wants headings to clearly anchor sections. The step from body to h2 is noticeable, which helps readers scan.

Use the perfect fourth when your content is the hero and headings need to lead the eye down the page.

When to Use the Golden Ratio (1.618)

The golden ratio is the ratio for landing pages and hero sections. The step from body to hero heading is dramatic, which creates immediate visual impact. The tradeoff is that the rest of the scale also grows dramatically, so a 6xl heading can be 110px on a 16px base.

Use the golden ratio when you want a single hero heading to dominate the page, and accept that the rest of the hierarchy is also stretched. Most landing pages use the golden ratio or a close variant (1.5, 1.7) for the hero, then switch to a smaller ratio for body content.

Fluid Scales and Ratios

The ratios above assume a fixed scale. In a fluid scale (using clamp()), the ratio is applied to both the minimum and maximum sizes, and the viewport interpolates between them. The ratio you pick determines how much the hierarchy stretches at large viewports compared to small.

A common pattern is to use a smaller ratio (minor third) for the minimum sizes and a larger ratio (perfect fourth) for the maximum sizes, so the hierarchy is gentle on mobile and dramatic on desktop. The FontBlend fluid type generator supports this pattern.

Picking the Right Ratio

There is no universally correct ratio. The right choice depends on the project. For a dashboard, use the minor third. For a marketing site, use the major third. For an editorial site, use the perfect fourth. For a landing page hero, use the golden ratio.The FontBlend type scale calculator lets you switch ratios and see the result live. Pick a base size, switch between the four ratios, and watch the scale update. The fluid type generator does the same for fluid scales.

Where the Ratio Names Come From

The names are musical intervals, and the numbers are the frequency ratios of those intervals. A minor third in music is roughly a 1.2 frequency ratio, which is why the type scale ratio is 1.2. A major third is 1.25, a perfect fourth is 1.333, and the octave is 2.0. Type designers borrowed the naming because both systems describe the same feeling: intervals that are close together read as calm and continuous, and wide intervals read as dramatic leaps.

The musical heritage explains one practical quirk. Musicians hear a perfect fourth as a fixed interval no matter what key they start in, and a type scale ratio behaves the same way: 1.333 is 1.333 whether the base is 14px or 20px. What changes with the base is the absolute sizes, which is why the same ratio can feel restrained on a small base and generous on a large one.

The Ratios People Skip

The four famous ratios are not the only options. The minor second (1.067) and major second (1.125) are so gentle that they rarely appear in marketing copy, but they are the workhorses of dense interfaces.

Run the numbers on a 16px base. Four steps up, the minor second reaches just under 21px, barely larger than body text, and the major second reaches 25.6px. Compare that with the perfect fourth, which lands at 50.5px on the same four-step climb, or the octave at 256px. The seconds are for systems where a heading is a structural label rather than a statement, the kind of hierarchy a data table or an admin screen needs.

The Base Size Changes the Answer

Choosing a ratio without choosing a base is choosing half the system. A major third (1.25) on a 16px base climbs 16, 20, 25, 31, then 39px. Raise the base to 18px and the same ratio climbs 18, 22.5, 28.1, then 35.2px. The bigger base pushes the first steps closer to typical body sizes, which changes where the headings feel like headings.

The practical rule: pick the body size first, then pick a ratio whose upper steps land where your content needs anchors. If the ratio puts the h2 at 31px but the design brief calls for the section title to sit near 28px, adjust the base rather than rounding the ratio, because an odd ratio produces an odd scale at every step.

Leading Changes with the Ratio

A ratio describes size only, and sizes sit on lines. Small steps tolerate relaxed leading because the eye travels short distances, while display steps want tighter leading so a huge headline does not push the page apart. A minor third system can keep leading near 1.5 across the board, but a perfect fourth system should step leading down as the sizes step up, roughly from 1.5 at body to 1.1 at the top. Set the leading once with the ratio, not once per element.

Questions That Come Up

What should a documentation site use? A gentle ratio such as the major second or minor third. Doc pages are dense, and a dramatic scale competes with code blocks and callouts for attention.

Is the difference between 1.2 and 1.25 real? At the first step it is a pixel or two. After four steps it is the difference between 33px and 39px on a 16px base, which is enough to change whether a page feels flat or sectioned.

Should UI and marketing share one ratio? They can, but the jobs differ. A marketing hero wants a wider interval for impact, and the interface around it wants a narrow one for density. Many products run a larger ratio for the marketing pages and a smaller one for the app, which is a reasonable split as long as the base sizes match so the handoff feels continuous.

Related Tools

The type scale calculator builds a fixed modular scale with any ratio. The fluid type generator builds a fluid clamp() scale. The typography playground lets you test the scale against real layout presets.