Perfect Fourth Type Scale Generator
Build a bold hierarchy with more dramatic step changes for marketing, editorial, and statement-heavy layouts
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
* Perfect Fourth ratio (1.333)
* 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: 4.209rem; /* 67px */
--font-size-h1: 3.157rem; /* 51px */
--font-size-h2: 2.369rem; /* 38px */
--font-size-h3: 1.777rem; /* 28px */
--font-size-h4: 1.333rem; /* 21px */
--font-size-body-lg: 1.155rem; /* 18px */
--font-size-body: 1rem; /* 16px */
--font-size-small: 0.75rem; /* 12px */
--font-size-code: 0.866rem; /* 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
Perfect Fourth is where a type scale starts to feel clearly dramatic. With a ratio of 1.333, the jumps between steps are obvious enough that headings can command real attention. This makes the scale well suited to landing pages, editorial covers, bold campaign layouts, hero sections, and storytelling pages that want more visual tension than a utility-first product system normally needs.
The strength of this ratio is emphasis. It can make headlines feel decisive and give display typography more room to matter. That makes it useful for pages where messaging needs to lead, where art direction matters, or where the design is intentionally less dense. On these kinds of surfaces, a smaller ratio can sometimes feel too polite. Perfect Fourth gives the hierarchy more conviction.
The tradeoff is flexibility. Larger ratios are easier to love in a hero and harder to manage in compact UI. That is why a live generator is valuable. You can see immediately where the scale feels exciting and where it becomes impractical. Instead of committing blindly to a dramatic ratio, you can test it across contexts and decide whether it belongs everywhere or only in marketing layers.
Where This Type Scale Works Best
Use Perfect Fourth when you want typography to become a bigger part of the visual language. It is a strong option for premium marketing pages, editorial projects, campaign launches, manifesto pages, and design systems that need more pronounced hierarchy at the top end.
It is also useful when the brand itself is assertive. If a quieter ratio makes the page feel too generic, Perfect Fourth can create more separation between headline and body and help the page feel more designed. It is often a better fit for high-confidence messaging than for utility-first product screens.
- Creates powerful, highly visible hierarchy for marketing and editorial surfaces.
- Helps headlines feel more deliberate and memorable.
- Works well for storytelling pages and premium campaign design.
- Useful when a brand needs stronger display contrast.
How to Use the Generator Well
Preview this ratio in marketing mode first, because that is where it usually proves itself. Check whether the heading hierarchy feels compelling or simply oversized. Then test the same ratio in article or dashboard mode to identify where it stops being practical.
If you like the ratio for hero areas but not for everything else, that is a useful result. Many teams use a dramatic scale only in display contexts while keeping a calmer system for everyday UI. The generator helps you decide where that line should be and export a scale you can implement intentionally.
Cautions and Tradeoffs
- Can become impractical in dense interfaces or cramped layouts.
- May produce oversized jumps if used literally at every text level.
- Needs careful mobile testing because dramatic ratios compress quickly.
- Often works best when paired with a calmer implementation strategy in product UI.
Frequently Asked Questions
Is Perfect Fourth too large for most product UIs?
Often yes as a universal default, but it can be excellent for marketing layers, hero sections, and editorial moments within a broader product system.
When should I choose Perfect Fourth over Major Third?
Choose Perfect Fourth when you want more visible contrast and stronger display hierarchy. Choose Major Third when you want something bolder than subtle UI scales but still more broadly practical.