Minor Second Type Scale Generator
Build a restrained type hierarchy for interfaces and content where subtlety matters more than drama
Install the package
Docs benefit from a quieter hierarchy: headings still need authority, but body copy and code need to stay effortless to scan for long stretches.
pnpm pacgie generate --tokens
- Use heading fonts for section labels and major page titles.
- Keep long paragraphs on the calmer body stack.
- Use the mono role for commands, variables, and snippets.
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 Second ratio (1.067)
* 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.383rem; /* 22px */
--font-size-h1: 1.296rem; /* 21px */
--font-size-h2: 1.215rem; /* 19px */
--font-size-h3: 1.138rem; /* 18px */
--font-size-h4: 1.067rem; /* 17px */
--font-size-body-lg: 1.033rem; /* 17px */
--font-size-body: 1rem; /* 16px */
--font-size-small: 0.937rem; /* 15px */
--font-size-code: 0.968rem; /* 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 Minor Second type scale is one of the most restrained modular scales you can use. With a ratio of 1.067, the steps between sizes are small, which makes the hierarchy feel calm and compact instead of dramatic. This is often exactly what you want in documentation, dashboards, settings panels, admin tools, dense product UIs, and systems where too much typographic contrast can make the interface feel noisy or oversized.
The reason this scale works so well in those environments is that it respects density. A lot of digital products do not need giant jumps between heading levels. They need labels, supporting copy, section headings, and body text to live close together while still feeling organized. A minor second scale gives you that organization without wasting space or making every heading feel like a hero headline.
This kind of generator is especially useful because subtle scales are hard to judge by math alone. On paper, the steps can seem almost too close together. In an actual interface, though, they often feel more natural than larger ratios. A live type scale tool lets you preview the sizes in docs and dashboard contexts so you can see where the scale feels efficient, where it feels too flat, and how much weight, spacing, and line-height need to do alongside the ratio.
Where This Type Scale Works Best
Use a Minor Second scale when the interface needs typographic discipline more than theatrical hierarchy. This ratio is particularly good for products with tight layouts, form-heavy screens, tables, documentation blocks, and help centers where readability and rhythm matter more than visual flourish.
It is also useful when the design system already has many hierarchy cues beyond typography, such as cards, borders, spacing, icons, tabs, and section framing. In those systems, type can afford to be quieter because the layout already does some of the structural work. A minor second scale supports that kind of environment very well.
- Excellent for dense UI, docs, settings pages, and admin tools.
- Creates hierarchy without wasting vertical space.
- Helps interfaces feel calm and system-driven rather than dramatic.
- Pairs well with strong spacing and component-based hierarchy.
How to Use the Generator Well
Preview this ratio in docs or dashboard mode first. That is where its strengths become clear. Check whether headings still separate sections enough, and then decide if weight or spacing needs to carry more hierarchy than size alone. This is normal with restrained scales.
If the system feels too flat, do not immediately jump to a larger ratio. First test stronger heading weights, slightly tighter tracking on headlines, and more deliberate spacing between sections. Often the ratio is fine, and the real issue is that the surrounding hierarchy is under-specified. When the scale feels efficient and readable, export the tokens and apply them consistently.
Cautions and Tradeoffs
- A restrained scale can feel too flat if font weight and spacing are not doing enough work.
- It is usually not the best choice for marketing hero sections or highly expressive brand pages.
- Test mobile layouts carefully because subtle scales can collapse further on small screens.
- Do not expect size alone to create separation between every heading level.
Frequently Asked Questions
When is Minor Second better than Major Third or Perfect Fourth?
Minor Second is better when you need compact, efficient hierarchy in dense interfaces or documentation. Larger ratios are better when you need stronger display contrast.
Does a Minor Second scale feel too subtle for most websites?
It can on marketing pages, but for docs, dashboards, admin products, and utility-first layouts it often feels more appropriate than larger, more dramatic scales.