Major Second Type Scale Generator
Use a balanced modular scale that feels gentle, practical, and broadly useful across digital products
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 Second ratio (1.125)
* 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: 1.802rem; /* 29px */
--font-size-h1: 1.602rem; /* 26px */
--font-size-h2: 1.424rem; /* 23px */
--font-size-h3: 1.266rem; /* 20px */
--font-size-h4: 1.125rem; /* 18px */
--font-size-body-lg: 1.061rem; /* 17px */
--font-size-body: 1rem; /* 16px */
--font-size-small: 0.889rem; /* 14px */
--font-size-code: 0.943rem; /* 15px */
}
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
A Major Second type scale sits in the sweet spot between very subtle and clearly structured. With a ratio of 1.125, it gives you more separation than a Minor Second without becoming obviously dramatic. That makes it a very practical default for product teams that want a typography system with enough hierarchy to feel intentional, but not so much that the interface turns into a stack of oversized headlines.
This ratio works especially well in SaaS products, content-heavy apps, dashboards, docs, and marketing pages that still need to feel product-led. It supports headings, body text, labels, and supporting copy in a way that feels smooth rather than abrupt. If you want a scale that adapts well across many screen types and many kinds of content, Major Second is often a strong candidate.
A live generator is useful here because balanced scales are easy to underestimate. On paper they can seem modest, but once you see them across real components and preview contexts, they often feel more refined than louder ratios. The tool helps you confirm that the hierarchy is strong enough, adjust font roles, and export something that is actually usable across a design system instead of just mathematically tidy.
Where This Type Scale Works Best
Use a Major Second scale when you need a dependable all-rounder. It is ideal for teams that want one ratio that can work across dashboards, landing pages, docs, and product surfaces without constant special cases. It tends to feel more polished than a flat system, but still grounded enough for interface use.
This ratio is also strong for teams that are still settling on a broader design language. If you are unsure whether your product needs subtle or expressive hierarchy, Major Second gives you a safer center point. You can then lean on weight, spacing, and font pairing to push the tone in one direction or another.
- Balanced enough for both UI and marketing surfaces.
- Creates clearer hierarchy than very subtle scales without feeling oversized.
- Easy to scale into design systems and reusable tokens.
- Good default choice when a team needs one adaptable ratio.
How to Use the Generator Well
Preview it in dashboard and marketing contexts to judge its versatility. A strong Major Second scale should feel useful in both. If the marketing view feels too quiet, try increasing heading weight before abandoning the ratio. If the UI feels too loud, tune body size and spacing first.
The key with this scale is consistency. Because the steps are moderate, it rewards disciplined implementation. Use it across headings, support text, and component tokens rather than letting every page invent its own sizes. Once it feels balanced in preview, export the system and document where each level belongs.
Cautions and Tradeoffs
- It can feel a little plain if your brand needs highly expressive typography.
- Some hero sections may still need larger display overrides on top of the scale.
- Consistency matters; ad hoc size jumps can weaken the benefit of the ratio.
- Always test the body size with your actual fonts, not just the math.
Frequently Asked Questions
Is Major Second a good default type scale?
Yes. It is one of the most practical default ratios because it stays usable across product UI, docs, and moderate marketing layouts.
How does Major Second compare to Minor Third?
Major Second is gentler and more interface-friendly. Minor Third introduces more visible separation and often feels more branded or more content-led.