Major Third

Major third is a modular scale built on the 1.25 ratio that keeps your entire typographic hierarchy tight and readable in dense digital products. You choose it early in the process right after you lock your base size. Most teams set body text at 16 pixels because that matches browser defaults and feels comfortable for long reading sessions. From there every larger size comes from multiplication. Sixteen times 1.25 equals 20. Twenty times 1.25 equals 25. Twenty five times 1.25 gives you 31.25 which rounds cleanly to 31. The ladder continues through 39, 49, and 61 pixels. These sizes map to your levels with intention. Body sits at 16 pixels regular weight and 1.6 leading. Small text for captions and labels drops to 13 or 14 pixels. Your H3 lands at 20 pixels medium. H2 takes 25 pixels semibold. H1 claims 39 or 49 pixels bold with leading tightened to 1.15 so it feels confident rather than airy. The entire system stays disciplined. No size exists outside this ladder. That single decision removes 90 percent of future arguments about whether a particular heading should be 27 or 28 pixels. Tools like type-scale.com spit out the full table in one click once you set the base and ratio.

Major third is not a replacement for thinking. It is not the flashy choice that makes designers hearts beat faster when they see a 110 pixel headline. It is not perfect fourth at 1.333 which delivers 16, 21, 28, 37, 50, 67 and creates more breathing room between steps. It is not golden ratio at 1.618 that produces 16, 26, 42, 68, 110 and turns your hero into theater. Major third is not arbitrary. If you find yourself nudging sizes by eye after generating the scale then you have already abandoned the system. It is not the correct tool for every context. Using it on a marketing homepage will leave your calls to action feeling anemic next to the hero image. It is not a set it and forget it decision. You still must pair it with strict rules around weight adjacency, leading per level, and 2 to 1 spacing ratios or the hierarchy collapses anyway.

Concrete example comes from the 2024 redesign of the Vercel dashboard. They published their scale openly on their design system documentation. Base sits at 16 pixels. The major third ladder generates body at 16 pixels with 28 pixel line height for their prose heavy changelogs. Sidebar navigation labels lock at 20 pixels with medium weight and 1.4 leading. Section titles throughout the UI use 25 pixel semibold tokens. When engineers view deployment logs the page headers hit 31 pixels bold. Project overview cards scale their titles to 39 pixels. The main dashboard header that greets you after login sits at 49 pixels with negative tracking of 0.025 em to keep it looking machined rather than loose. Captions under metrics sit at 13 pixels regular with loose tracking of 0.05 em to signal they are metadata. This mirrors the exact decision order from the typographic hierarchy guide. Base first. Ratio second. Weights third. Leading and spacing last. The team reports that bugs around inconsistent type sizing dropped to zero after they enforced the ladder in their token system. New hires open the Figma library and the scale is the first component they see. No one wastes time in critique sessions arguing that the heading feels too small. The ratio already answered. Linear followed the same playbook in their command bar and issue detail views the same year with identical results.

Reach for major third any time your product functions more like software than like media. Dense tools such as Notion, Linear, Raycast, and Arc browser all benefit from the compact steps. Administrative interfaces at companies like Shopify for their merchant admin or Stripe for their financial reports stay calm and scannable because no size jumps out aggressively. Use it when you have multiple columns of data, nested settings panels, or power user features that require 8 to 10 distinct text roles on one screen. It shines in dark mode interfaces where dramatic size contrast can create vibration. Combine it with variable fonts that deliver the three required weights from one 80KB file and you ship faster with fewer assets. Test it at mobile sizes early. The 1.25 steps compress without turning into a smear the way larger ratio jumps sometimes do. It directly counters the failure patterns of everything-is-bold and only-two-levels by giving you clear incremental rungs that pair cleanly with medium and semibold weights.

Leave major third in the drawer when you design editorial content, landing pages, or anything meant to evoke emotion before delivering information. The golden ratio powered the 2025 Apple Vision Pro launch page because that hero headline needed to feel larger than life. Perfect fourth remains the default for most SaaS marketing sites for good reason. It gives H2 enough presence to divide long form content without needing three different shades of gray to compensate. Avoid major third if your user testing shows people missing secondary headings. The steps may prove too subtle for certain audiences or use cases. Never apply it to body text below 16 pixels. That path leads to the exact readability failures the hierarchy checklist warns against. If your brand voice demands bold expressive typography then this ratio will fight you at every step. It wants to disappear into the interface not stand apart from it. Dropbox learned this the hard way in early 2023 when their tight-scale experiment on the homepage made feature headlines feel like body copy.

Major third turns invisible math into interfaces that feel effortless to scan at 3 a.m. during an incident review.