Loading page
About this tool
Build an H1 to H6 type scale with size, line height, weight and spacing, preview it live and copy the CSS.
The Heading Hierarchy Preview turns a base font size and a modular scale ratio into a complete H1 to H6 specification — size in px and rem, line height, font weight, and the space above and below each heading — and shows the whole ladder rendered together. Sizes follow the classical modular scale size = base × ratio^step using musical-interval ratios from the minor second (1.067) to the golden ratio (1.618); body spacing is checked against WCAG 2.1 success criterion 1.4.12, which expects text to stay readable at a line height of 1.5 and paragraph spacing of twice the font size.
Open Heading Hierarchy Preview on AltFTool — it loads instantly in your browser.
Add your input to the workspace.
Adjust the options until the result looks right.
Copy or download the output and put it to work.
Every level is rendered together, so hierarchy problems show up before you build.
Line height steps down as sizes grow instead of applying one number to display and body alike.
Flags body line height under 1.5 and body sizes under 16px against WCAG text-spacing expectations.
A major third (1.25) or perfect fourth (1.333) suits most websites: from a 16px body they give an H1 of about 61px and 90px respectively, with clearly separated intermediate levels. Smaller ratios like the major second (1.125) compress the levels until H1 and H2 stop reading as different, and the golden ratio (1.618) usually needs hand-tuning at the top.
Less than body text. Body copy wants around 1.5, but a 60px heading only needs about 1.15 — long body lines need leading to help the eye find the next line, while a two- or three-word heading does not. Step the value down as size rises rather than applying one figure everywhere.
More above than below. A heading belongs to the text it introduces, so a gap of roughly 0.75 of its own font size above and 0.35 below groups it correctly. Equal spacing on both sides leaves the heading floating between two blocks with no visible ownership.
No. H1 to H6 describe document structure and are what screen reader users navigate by, so they must run in order without skipping levels. If a section heading needs to look smaller, keep the correct tag and change the size with a class.