What Is Visual Hierarchy?
Visual hierarchy helps readers understand importance quickly. We do that with size, spacing, contrast, and emphasis.
In Level 3, we are still avoiding complex layouts. The goal is readability first.
Type Scale and Spacing
Headings should clearly step down in size: h1, then h2, then h3.
Paragraph spacing should create a comfortable reading rhythm.
Mini Example
This paragraph sits under an h3 heading and uses spacing rules from the stylesheet.
Example structure:
<h2>Section Title</h2>
<h3>Subsection</h3>
<p>Supporting text...</p>
Link and Focus States
Links should be clearly visible in their normal state and become more obvious on hover/focus. Try tabbing through this page to see keyboard focus styles.
Content Emphasis
Use emphasis blocks sparingly to draw attention to key instructions.
Assignment idea: duplicate this page as bareBones3b.html and tune only typography values.
Good hierarchy reduces cognitive load and improves comprehension.