Golden Ratio Type Scale Generator
Explore a dramatic modular scale for bold brand expression, large display typography, and statement-driven 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
* Golden Ratio ratio (1.618)
* 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: 11.089rem; /* 177px */
--font-size-h1: 6.854rem; /* 110px */
--font-size-h2: 4.236rem; /* 68px */
--font-size-h3: 2.618rem; /* 42px */
--font-size-h4: 1.618rem; /* 26px */
--font-size-body-lg: 1.272rem; /* 20px */
--font-size-body: 1rem; /* 16px */
--font-size-small: 0.618rem; /* 10px */
--font-size-code: 0.786rem; /* 13px */
}
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
Golden Ratio is one of the most iconic names in design and mathematics, and in typography it creates a very dramatic modular scale. At 1.618, the distance between steps is large enough that the hierarchy becomes a major part of the visual composition. This is not usually the ratio you choose for routine product UI. It is the ratio you explore when you want display typography to lead hard, when branding needs more presence, or when a hero section should feel unmistakably intentional.
That is why Golden Ratio can be both exciting and risky. It can produce bold, memorable type hierarchies that feel premium or cinematic. But it can also become unwieldy if used across every text role literally. A display step may look fantastic in a landing page hero and completely unrealistic inside a card or dashboard. A robust generator helps you test that gap rather than relying on the romance of the ratio alone.
Golden Ratio is best thought of as a strategic tool, not an automatic default. It gives you a way to explore dramatic hierarchy, branding tension, and expressive display scales. With preview contexts and export controls, you can decide whether the ratio should drive the whole system, just the top display levels, or only special surfaces like campaign pages and brand moments.
Where This Type Scale Works Best
Use Golden Ratio when you want typography to become a visual event. This ratio is well suited to bold branding, expressive marketing, luxury layouts, art-directed editorials, keynote-style presentation pages, and hero sections that need to stop the scroll. It is less about quiet usability and more about impact.
It is also useful for experimentation. Even if you do not end up shipping a full Golden Ratio system, testing one in the generator can clarify what level of drama your brand actually wants. It gives you a useful upper bound. From there, you can pull back to Major Third or Perfect Fourth if needed with much more confidence.
- Creates dramatic, memorable display hierarchy.
- Excellent for branding, hero sections, campaigns, and art-directed layouts.
- Helps teams explore the upper end of typographic expression.
- Can produce striking visual identity when used strategically.
How to Use the Generator Well
Start in marketing mode and look at the display and h1 steps first. That is where the value of the ratio shows up. Then move down the scale and ask which levels are still practical and which ones should probably be treated as special display tokens rather than universal heading sizes.
Be especially careful with mobile and component contexts. Golden Ratio often works best when used selectively. The generator lets you test that strategy quickly by comparing contexts and refining the fonts before export. Think of it as a tool for defining expressive moments, not necessarily every paragraph and label in the system.
Cautions and Tradeoffs
- Usually too dramatic to use literally across every UI text role.
- Requires careful restraint and selective implementation.
- Can feel oversized quickly on mobile if not managed carefully.
- Best used as a display-led system or a source of hero-specific steps.
Frequently Asked Questions
Should I use Golden Ratio for a full app type system?
Usually not without adaptation. It is better suited to display-heavy surfaces, branding, and selected marketing contexts than to every compact UI element.
Why test Golden Ratio if I may not ship it?
Because it helps you understand the outer edge of how dramatic your typography could be. That makes it easier to choose a calmer scale with confidence if needed.