Golden Ratio Typography Calculator — Type Scale Generator
Generate harmonious font sizes for headings and body text using the golden ratio (1.618) or 7 other mathematical scales. Set your base size, pick a ratio, and get production-ready CSS with visual preview.
Type Scale
| Step | Use | PX | REM | EM |
|---|---|---|---|---|
| xs | Small text | 6.11px | 0.382rem | 0.382em |
| sm | Caption | 9.89px | 0.618rem | 0.618em |
| base | Body | 16px | 1rem | 1em |
| lg | H6 | 25.89px | 1.618rem | 1.618em |
| xl | H5 | 41.89px | 2.618rem | 2.618em |
| 2xl | H4 | 67.77px | 4.236rem | 4.236em |
| 3xl | H3 | 109.66px | 6.854rem | 6.854em |
| 4xl | H2 | 177.42px | 11.089rem | 11.089em |
| 5xl | H1 | 287.07px | 17.942rem | 17.942em |
Visual Preview
H1
H2
H3
H4
H5
H6
Body
Caption
Small text
CSS Output
:root {
--font-size-xs: 0.382rem; /* 6.11px */
--font-size-sm: 0.618rem; /* 9.89px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.618rem; /* 25.89px */
--font-size-xl: 2.618rem; /* 41.89px */
--font-size-2xl: 4.236rem; /* 67.77px */
--font-size-3xl: 6.854rem; /* 109.66px */
--font-size-4xl: 11.089rem; /* 177.42px */
--font-size-5xl: 17.942rem; /* 287.07px */
}
h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }Developer & Verifier
Developed by
Marcus Rodriguez
Full-stack developer specializing in web font implementation and performance optimization
Verified by
Sarah Mitchell
Typography expert specializing in font design, web typography, and accessibility
What is the Golden Ratio in Typography?
The golden ratio (φ ≈ 1.618) is a mathematical proportion that appears throughout nature, art, and architecture. In typography, it creates a modular scale where each font size is 1.618 times larger than the previous one. Starting from a 16px base: 16px → 25.89px → 41.89px → 67.77px — each step feels naturally proportional.
A type scale eliminates guesswork from heading sizing. Instead of picking arbitrary values, you choose a base size and a ratio, and the math produces a consistent hierarchy. This is the same principle behind tools like font size converters — systematic relationships between values rather than ad hoc decisions.
This calculator supports 8 preset ratios from Minor Second (1.067, subtle differences) to the Golden Ratio (1.618, dramatic hierarchy), plus custom values. Each produces a different feel: tighter ratios suit mobile and compact UIs, while wider ratios create bold editorial layouts. The generated CSS uses custom properties for easy integration with any CSS implementation.
Features
Scale Ratio Comparison
| Ratio | Value | H1 from 16px | Best For |
|---|---|---|---|
| Minor Third | 1.200 | 39.81px | Mobile, compact UIs |
| Major Third | 1.250 | 48.83px | General web, balanced feel |
| Perfect Fourth | 1.333 | 63.21px | Blog posts, articles |
| Augmented Fourth | 1.414 | 80.63px | Magazines, editorial |
| Perfect Fifth | 1.500 | 108px | Landing pages, marketing |
| Golden Ratio | 1.618 | 146.56px | Hero sections, dramatic headings |
Key Benefits
Why choose this tool for your document conversion needs
Mathematical Precision
Scale values calculated from precise ratios, not arbitrary sizing.
8 Preset Ratios
From Minor Second (1.067) to Golden Ratio (1.618), plus custom values.
Visual Preview
See how each size renders with actual text before copying CSS.
Ready-to-Use CSS
Generated CSS custom properties and heading rules. One-click copy.
Tool Statistics
Preset Ratios
From Minor Second (1.067) to Golden Ratio (1.618).
Output Formats
PX, REM, and EM values for every scale step.
Processing
Real-time calculation as you adjust inputs.
Best Practices
Tips for getting the most out of this tool
Start with Golden Ratio
The golden ratio (1.618) is a safe default for most projects. Adjust only if it feels too dramatic.
💡 Tip: Try Minor Third (1.2) for mobile-first designs where space is limited.
Use CSS Custom Properties
The generated CSS uses custom properties (--font-size-*) for easy maintenance.
💡 Tip: Reference these variables throughout your stylesheet for consistent sizing.
Test at Multiple Viewports
A scale that works on desktop may need adjustment for mobile.
💡 Tip: Consider using a tighter ratio for small screens and a wider ratio for large screens.
Troubleshooting Guide
Common issues and how to resolve them
Heading sizes too large or too small
Try a smaller ratio like Minor Third (1.2) or Major Third (1.25). The golden ratio (1.618) creates dramatic differences that may not suit all designs.
Scale doesn't match design mockup
Use the custom ratio field to enter the exact ratio from your design system. Adjust the base size to match your body text size.
CSS output uses wrong units
The CSS output uses rem units with px comments. Adjust your project's html font-size if your base is not 16px.
Frequently Asked Questions
What is the golden ratio in typography?
How do I use a type scale?
What ratio should I use for my project?
What is the difference between modular scale and golden ratio?
How does typographic hierarchy improve readability?
Can I use a custom ratio?
Related Tools & Guides
More ways to work with fonts and documents