1.067 Ratio

Minor Second Type Scale Generator

Build a restrained type hierarchy for interfaces and content where subtlety matters more than drama

Scale preview
Minor Second ratio at 1.067 with distinct heading, body, and mono roles.
1120px

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.

npm install pacgie-type-scale
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.
Scale steps
Each step inherits the role-appropriate font, weight, line height, and tracking.
display
22px
Launch with confidence
h1
21px
Build a stronger hierarchy
h2
19px
Readable, deliberate, scalable
h3
18px
Typography tuned to your project
h4
17px
Flexible heading step
body-lg
17px
Lead paragraph for onboarding and hero support text.
body
16px
Reliable body text for articles, settings, help text, and product descriptions.
small
15px
Meta information, labels, and helper copy.
code
15px
npm run build
Heading role
google
Inter
Clean, highly legible UI sans with a modern feel.
UIDashboardDocs
Body role
google
Source Serif 4
Serif optimized for rich reading experiences.
ReadingDocsEditorial
Mono role
google
JetBrains Mono
Developer-friendly mono with clear punctuation.
CodeDocsDashboard
Suggested pairings from current heading font

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.