Typography Scale Generator
Build modular typography scales with Major Third, Perfect Fourth, and Golden Ratio ratios.
Loading tool...
What is Typography Scale Generator?
The Typography Scale Generator is a free browser tool that builds a modular type scale from a base font size and a ratio. It multiplies the base by the ratio for each step to produce a harmonious set of heading and text sizes, previews every level at its real pixel size, and exports the whole scale as CSS custom properties or a Tailwind fontSize config.
Key Benefits
- Mathematically harmonious font hierarchy with zero guesswork
- Eight classic ratio presets plus a fully custom ratio option
- Live preview of every size rendered at real pixel dimensions
- Copy any single size or export the entire scale at once
- CSS variables and Tailwind config outputs ready to paste
Common Use Cases
- •Setting up the font hierarchy for a new website or design system
- •Choosing between ratios like Major Third and Golden Ratio with a live preview
- •Generating consistent h1-h6 sizes and CSS variables for a component library
- •Converting a scale into Tailwind fontSize utilities for a utility-first project
How to Use the Typography Scale Generator
- Set your base size: Enter your body font size in pixels (16px is the browser default; 18-20px suits content-heavy sites).
- Pick a scale ratio: Choose a preset like Major Third (1.25) or Perfect Fourth (1.333), or switch to Custom and type any ratio greater than 1.
- Choose the number of steps: Use the slider to set how many levels above body text you need - 6 steps covers a classic h1-h6 hierarchy.
- Preview and copy: Check the live preview at real size, copy individual values per level, then export the whole scale as CSS variables or a Tailwind config and paste it into your project.
Key Features
- Eight classic ratio presets from Minor Second (1.067) to Golden Ratio (1.618), plus a custom ratio input
- Live text preview rendered at real pixel size for every level of the scale
- Per-level copy button that exports rem values with px comments
- Whole-scale export as CSS custom properties or a Tailwind fontSize config block
- Adjustable base size (8-64px) and 4-8 scale steps to match any design system
- Runs 100% in the browser - no uploads, no accounts, no data leaves your device
Frequently Asked Questions
What is a modular typography scale?
A modular type scale is a set of font sizes generated by multiplying one base size (usually 16px) by a fixed ratio. Each step up the scale is base x ratio^n. This creates sizes that are mathematically related, so headings, body text, and captions feel harmonious without any manual guesswork.
Which scale ratio should I choose?
It depends on how dramatic you want the hierarchy. 1.125 (Major Second) is subtle and suits dense UIs, 1.25 (Major Third) is the popular all-round default for websites, 1.333 (Perfect Fourth) gives a dramatic editorial feel, and 1.618 (Golden Ratio) creates very expressive display scales best paired with a smaller secondary scale for body text.
Why does the tool export rem values?
Rem units are relative to the root font size, so they respect user font-size preferences and browser zoom. The generator assumes the standard 16px root when converting, and includes the px equivalent as a comment so you can always see the rendered size.
How do I use the exported Tailwind config?
Copy the fontSize block into the theme.extend section of your tailwind.config.js. You can then use the sizes as utility classes like text-h1 or text-body alongside the default Tailwind scale.