HTML / Typography / Accessibility
Good headings create effortless flow and clarity
Build a logical heading hierarchy, then choose a type scale that supports readable content.
Headings make a document easier to scan and help screen reader users navigate by topic. Their levels describe hierarchy, not visual size.
Structure before scale
Use one clear page title, followed by second-level headings for its main sections and third-level headings for subsections. Avoid skipping levels when opening a deeper section.
<h1>Building accessible forms</h1>
<h2>Labels</h2>
<h3>Visible instructions</h3>
<h2>Validation</h2>
Choose a readable scale
A modular scale with a ratio of 1.2 might use 1.2, 1.44 and 1.728 rem. This is not the golden ratio, which is approximately 1.618. No ratio automatically produces good typography.
Use responsive sizing with a sensible minimum, allow long headings to wrap and test at increased zoom. A heading should remain understandable without depending on its size or colour.