Typography Hierarchy Generator
Generate consistent H1 through H6 font sizes from a base size and scale ratio. Outputs ready-to-paste CSS rules in rem units.
How to use
- Set the base body font size (16px standard).
- Choose the scale ratio.
- Copy the generated CSS rules for h1–h6.
Frequently asked questions
Why should heading sizes follow a scale?
A scale creates predictable visual rhythm. Random heading sizes look inconsistent and force readers to work harder.
Should H1 be huge?
Only one H1 per page. Its size should reflect its role — around 2–2.5× body size for most layouts, larger for hero sections.
What about responsive hierarchy?
Pair this tool with the Responsive Typography Calculator to scale H1–H6 fluidly across viewports using clamp().