5 Type Scales I Use in 2026 (And the One I Quietly Dropped)

Type scale is the quietest decision in a design system and the loudest one at scale. Pick wrong and every component fights you for the next two years. I have shipped four products this year on four different scales, and the pattern is clearer than I expected.

Type Scale 1: Major Third (1.250) for Product UI

The major third is my default for anything a user touches daily. Body sits at 16px. Caption drops to 12.8px (rounded to 13). H3 lifts to 20px, h2 to 25px, h1 to 31px. That is the entire ladder for most product surfaces, and it works because the steps are small enough that you never feel a jolt between heading levels.

I use 1.250 for the RAXXO shop, the dashboard inside the Statusline Builder, and every settings page I touch in remind.me. It survives dense forms. It survives long lists. It survives a sidebar with eight nav items and a footer with twelve. Nothing screams. Nothing whispers. The hierarchy reads as competent before it reads as designed, which is exactly what product UI should do.

The trick with 1.250 is that you cannot lean on size alone. A 25px h2 next to a 20px h3 is only 5px apart. You have to add weight contrast, color contrast, or letter-spacing to make the hierarchy land. I usually run h1 and h2 at 600, h3 at 500, body at 400, and caption at 400 with a slightly muted color (around 70 percent of #F5F5F7 on dark surfaces). That layered contrast does more work than any size jump ever could.

Where 1.250 falls apart is on hero sections. A 31px h1 looks fine in a settings header but lost on a landing page. For those moments I either jump to a hero-specific size (60 to 80px, picked manually) or I switch to a different scale entirely. The major third is a working scale, not a marketing scale, and pretending otherwise is how dashboards end up shouting.

Type Scale 2: Perfect Fourth (1.333) for Marketing

Perfect fourth is louder. Body 16px, h3 21px, h2 28px, h1 38px, hero 50px. Each step jumps about a third bigger than the last, and that is exactly what a landing page needs. The hero feels like a hero. The section heading feels like a section. The body feels like reading rather than scanning.

I run 1.333 on the raxxo.shop product pages, on every blog hub, and on the marketing surfaces inside Center This Div. It rewards short headlines (six to nine words) because the size carries the rhythm. Long headlines on 1.333 start to feel shouty. If I have a forty word hero, I drop back to 1.250 and let weight do the work.

The ratio also forces a conversation about line-height. At 38px h1 with default 1.2 line-height, a two-line headline takes 91px of vertical space. That is a lot. I tighten to 1.05 or 1.1 for hero text and let body breathe at 1.6. That asymmetry is the secret of a clean marketing page. Tight up top, loose down low.

One quiet benefit: 1.333 maps well to common breakpoints. At mobile I scale the whole ladder by 0.875 and the proportions stay intact. Body 14, h3 18.4, h2 24.5, h1 33.3, hero 43.8. I round to whole pixels and ship. No custom mobile scale, no separate type tokens, just one multiplier and the system handles itself.

The downside is that 1.333 needs space. Tight grids and dense components feel cramped because the headings demand room. If I am building a card grid with eight cards above the fold, I drop to 1.250 inside the cards and keep 1.333 only for the page-level scale. Two scales in one page is fine if the boundary is clean.

Type Scale 3: Augmented Fourth (1.414) for Dashboards

Augmented fourth is the data-heavy scale. Body 14px, caption 10px, h4 19.8, h3 28, h2 39.6, h1 56. Six clear levels with enough separation that even a tired eye at 11pm can read the hierarchy without thinking.

I built the ember finance dashboard on 1.414 because it has to handle six tiers of information density. Account balance at h1. Section header at h2. Card title at h3. Field label at h4. Value at body. Helper text at caption. Each level sits visibly apart from the next, so a glance is enough to map the layout. That separation matters when the user is scanning twelve cards for the one number they need.

The risk with 1.414 is the small end. A 10px caption is too small for sustained reading, so I only use it for metadata (timestamps, IDs, version numbers, secondary labels). Anything that needs to be read for content stays at 14px or above. If your dashboard uses captions for tooltips or empty-state copy, bump them to 12px and accept the tighter ratio at that end of the scale.

The big end of 1.414 is where it earns its keep. A 56px h1 on a financial overview page makes the primary number unmistakable. The eye lands there first, then drops to the supporting structure below. That single hierarchical anchor is what separates a useful dashboard from a wall of numbers.

I do not use 1.414 for marketing because it overshoots. A 56px hero is fine on a dashboard but feels aggressive on a homepage where the goal is invitation, not information. Match the scale to the intent. Dashboards inform. Marketing invites. The ratios should reflect that.

Type Scale 4: Golden Ratio (1.618) for Editorial

Golden ratio is for reading. Body 18px (yes, 18, not 16). H4 29, h3 47, h2 76, h1 122. The numbers look extreme on paper, and they are. That is the point. Editorial wants drama because the reader has chosen to be there.

I use 1.618 on the lab section of raxxo.shop and on long-form essay pages. The 18px body is a reading-first choice. At normal viewing distance (50 to 70cm on a laptop) 18px feels like a printed page. The eye relaxes. Comprehension goes up. I have no scientific data to prove this, but every essay I have read on a 16px scale and re-read on 18px landed harder the second time.

The huge headlines work because editorial pages use a lot of white space. A 122px h1 needs 200px of breathing room on every side. If your layout is tight, golden ratio will fight you. I keep editorial pages to single-column, max-width around 680px, and let the headlines spill outside the column on desktop. That breathing room is what makes 1.618 feel composed instead of chaotic.

Where it breaks: anything below 14px. The ratio compresses too aggressively at the small end (an 11px caption on golden ratio is unusable). I cap the small end at body and use a separate utility scale for metadata. Golden ratio for reading, fixed pixels for everything else. That hybrid is what makes the scale survive contact with a real product.

Bottom Line

The scale I quietly dropped this year is the minor second (1.067). It looked elegant in Figma and fell apart in production. The steps are so small that hierarchy depends entirely on weight and color, and once you start a layout with three weights and four colors, you have a maintenance problem before you ship. Minor second works for one page in one product, the kind of single-purpose splash where every pixel is composed by hand. Try to scale it across a real system, across components and breakpoints and dark mode and three product surfaces, and it collapses into noise within a quarter.

If you are picking a scale today, start with 1.250 for product, 1.333 for marketing, and add 1.414 or 1.618 only where the surface earns it. One scale per surface. Two if you must. Never three.

I built the type system inside the Statusline Builder around exactly this logic, and it is one of the calmer decisions in the whole product. If you want a starting point that already enforces a working scale, that is the easiest place to begin. Otherwise grab a free type calculator, pick your ratio, and ship the next page on it. The only wrong answer is no answer. Visit raxxo.shop for the rest.

Keep reading

frontendShopify Section Rendering API: 6 Patterns That Cut Storefront TTFB by 60% 8 min read

bunReplacing Webpack DevServer With Bun Hot Reload: 14 Lines, 3.2x Faster 8 min read

bloggingWhy I Ship Blog Articles in Clusters of 3 (Not Daily) 8 min read