About CSS Typography Scale Generator
This tool generates a full typography scale from a base size using classic modular ratios (including golden ratio).
Key Features
- Base Size Setup: Build the full scale from one base value.
- Ratio Presets: major/minor third, perfect fourth/fifth, golden ratio, octave.
- Level Count Control: Choose how many size levels to generate.
- Live Preview: Inspect each level in real text context.
- CSS Export: Copy generated typography CSS quickly.
Steps
- Set base font size.
- Choose a scale ratio.
- Set the number of levels.
- Review preview and copy CSS output.
Use Cases
- Defining typography tokens in design systems.
- Standardizing heading/body hierarchy.
- Establishing typographic rhythm for content pages.
FAQ
Is a bigger ratio always better?
No. Large ratios can create overly aggressive jumps between levels.
Why do equal sizes feel different across fonts?
Different fonts have different metrics (x-height, glyph density, width), so final tuning should be font-specific.