Minor Third Type Scale Generator
Create a classic, readable hierarchy with enough contrast for content without overwhelming the interface
Strong typography makes content easier to trust and easier to read.
A robust scale is more than ratios. It gives headings presence, keeps paragraphs comfortable, and gives code or metadata a clear supporting voice.
The best typography systems feel invisible when they work well. Hierarchy is clear, paragraphs are calm, and supporting text never feels like an afterthought.
The goal is not just bigger headings. It is a rhythm readers can move through without friction.
Pairing a sharper heading family with a more relaxed body face can dramatically improve tone without sacrificing consistency.
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
* Minor Third ratio (1.2)
* 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: 2.488rem; /* 40px */
--font-size-h1: 2.074rem; /* 33px */
--font-size-h2: 1.728rem; /* 28px */
--font-size-h3: 1.44rem; /* 23px */
--font-size-h4: 1.2rem; /* 19px */
--font-size-body-lg: 1.095rem; /* 18px */
--font-size-body: 1rem; /* 16px */
--font-size-small: 0.833rem; /* 13px */
--font-size-code: 0.913rem; /* 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
Minor Third is one of the most versatile modular scale ratios because it gives you visible hierarchy while staying very usable for real content. At 1.2, the jumps between sizes are clear enough to support articles, blog pages, feature sections, and product marketing layouts, but not so dramatic that the scale becomes hard to use in components or supporting UI.
This is a strong ratio for teams that care about content quality. It gives headings more presence than very subtle scales, which helps long-form layouts feel more considered. At the same time, it avoids the exaggerated staircase effect that can happen with larger display-oriented ratios. That balance makes it useful for editorial design, product storytelling, startup marketing, and hybrid systems where content and interface need to coexist.
A generator makes Minor Third especially practical because this ratio often becomes the basis of an entire system. Once you preview it across real contexts, you can decide whether it has enough energy for marketing and enough restraint for UI. Instead of guessing, you can use one tool to test the hierarchy, tune the fonts, and export a coherent starting point for implementation.
Where This Type Scale Works Best
Use Minor Third when your project needs visible structure and good reading rhythm. It is particularly effective for blogs, guides, articles, SaaS homepages, feature pages, and design systems that have to serve both interface and content use cases. If the product publishes meaningful copy, this ratio often feels more natural than flatter ones.
It is also a good ratio for teams that want typography to do a bit more expressive work without fully shifting into display territory. Minor Third keeps the system approachable. It feels designed, but not theatrical. That makes it easier to scale across many page types.
- Very strong middle-ground ratio for content-rich digital products.
- Supports articles, blogs, guides, and product marketing well.
- Feels more expressive than subtle UI scales without becoming theatrical.
- Useful as a primary design-system ratio when content matters.
How to Use the Generator Well
Preview Minor Third in article and marketing modes. This is where it tends to shine. Check whether headings feel distinct enough, whether the lead paragraph sits comfortably under the headline, and whether small text still feels usable inside metadata and labels.
If the scale feels slightly too strong for dense UI, keep the ratio and reduce the number of steps you actually use in the product area. Many teams use a richer ratio overall but deploy it selectively. Once you like the rhythm, export the scale and treat it as a system rather than cherry-picking sizes randomly.
Cautions and Tradeoffs
- Can feel slightly roomy in very dense dashboards if every heading level is used literally.
- Needs disciplined use of small-text styles so supporting copy does not feel oversized.
- Still requires good weight and spacing decisions to feel truly polished.
- Some highly branded hero sections may still want display overrides.
Frequently Asked Questions
Why is Minor Third so popular in typography systems?
Because it gives clear hierarchy without feeling too aggressive. It works especially well in digital products that publish meaningful content.
Is Minor Third better for articles than Major Second?
Often yes. It usually gives headings and lead text more presence, which makes long-form pages feel more intentional and easier to scan.