Major Third Type Scale Generator
Use a confident modular scale that gives headings real presence while staying practical for digital products
Typography that makes your product feel designed, not just assembled.
Test bold hero headings, steady supporting copy, and a code voice that still feels connected to the rest of the brand.
Export Code
Includes font roles, stacks, scale steps, and hosted import guidance.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Source+Serif+4:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700;800;900&display=swap');
/* Type Scale
* Major Third ratio (1.25)
* Heading: Inter
* Body: Source Serif 4
* Mono: JetBrains Mono
*/
:root {
--font-heading: Inter, 'system-ui', 'sans-serif';
--font-body: 'Source Serif 4', Georgia, serif;
--font-mono: 'JetBrains Mono', 'SFMono-Regular', monospace;
--font-weight-heading: 700;
--font-weight-body: 400;
--font-weight-mono: 500;
--line-height-heading: 1.15;
--line-height-body: 1.6;
--letter-spacing-heading: -0.02em;
--letter-spacing-body: 0em;
--font-size-display: 3.052rem; /* 49px */
--font-size-h1: 2.441rem; /* 39px */
--font-size-h2: 1.953rem; /* 31px */
--font-size-h3: 1.563rem; /* 25px */
--font-size-h4: 1.25rem; /* 20px */
--font-size-body-lg: 1.118rem; /* 18px */
--font-size-body: 1rem; /* 16px */
--font-size-small: 0.8rem; /* 13px */
--font-size-code: 0.894rem; /* 14px */
}
body {
font-family: var(--font-body);
font-weight: var(--font-weight-body);
line-height: var(--line-height-body);
letter-spacing: var(--letter-spacing-body);
}
h1, h2, h3, h4, h5, h6, .display {
font-family: var(--font-heading);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
letter-spacing: var(--letter-spacing-heading);
}
code, pre, kbd {
font-family: var(--font-mono);
font-weight: var(--font-weight-mono);
}
.display { font-size: var(--font-size-display); }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
.text-body-lg { font-size: var(--font-size-body-lg); }
p { font-size: var(--font-size-body); }
small { font-size: var(--font-size-small); }
code { font-size: var(--font-size-code); }Other Type Scale Ratios
Why Use This Ratio
Major Third is one of the most common ratios used in modern type scale discussions because it offers an appealing mix of clarity and character. At 1.25, the steps are large enough to create a strong sense of hierarchy, but still practical enough for many real interfaces and design systems. This makes it a favorite for landing pages, marketing sites, feature sections, and product brands that want typography to feel deliberate without becoming too dramatic.
This ratio often works well when a team wants the type system to do a little more visual lifting. Headings gain noticeable authority, supporting text has clearer separation, and the whole page can feel more polished simply because the scale has stronger rhythm. It is a particularly good fit for startup homepages, product launches, case studies, and branded content that needs more structure than a subtle UI-first scale provides.
A generator helps because the difference between a Major Third scale that feels premium and one that feels oversized comes down to context. In a hero section, it can feel excellent. In a dense settings screen, it can feel too open. Seeing the ratio across real preview contexts makes it easier to decide where it should be your default and where you might want to tone it down.
Where This Type Scale Works Best
Use Major Third when you want a scale with more confidence than Major Second or Minor Third. It is a strong choice for branded product marketing, expressive content pages, and systems where headings should make a clearer statement. If your brand feels too quiet with flatter scales, this ratio often provides a useful boost.
It is also effective for teams trying to create a strong default hierarchy without inventing too many custom display sizes. A well-used Major Third scale can cover many headline and body relationships naturally, which reduces ad hoc sizing decisions across pages.
- Creates strong hierarchy for landing pages, marketing, and branded content.
- Often feels more polished and intentional than flatter scales.
- Works well as a robust default for expressive digital brands.
- Can reduce the need for one-off custom headline sizes.
How to Use the Generator Well
Start by previewing the ratio in marketing mode. Check whether the headline and supporting text feel proportionate, and then move into article or dashboard mode to see whether the scale still holds up in more practical contexts. This will tell you whether it should be your universal default or more of a marketing-led ratio.
If the hierarchy feels too loud in product UI, keep the ratio but limit how high up the scale you go in those contexts. Many systems do not need every display step everywhere. Use the tool to tune font pairings, line heights, and weights until the ratio feels powerful but still believable.
Cautions and Tradeoffs
- May feel too open or loud in dense admin-style interfaces.
- Needs restraint in component-heavy layouts where every heading does not need large size jumps.
- Should be tested carefully on mobile where the bigger steps compress more quickly.
- Pair it with disciplined spacing so the scale feels intentional rather than oversized.
Frequently Asked Questions
Is Major Third good for landing pages?
Yes. It is one of the better ratios for landing pages because it gives headings clear authority while still keeping the system coherent across supporting text.
Can Major Third still work in apps?
Yes, but often more selectively. Many teams use it for marketing and content surfaces while using fewer or smaller steps inside dense product UI.