Visual Hierarchy & Layout Basics

1. What Is Visual Hierarchy?

Visual hierarchy is the arrangement of elements so that the most important content is noticed first. Visitors do not read web pages — they scan them. Your job is to make the most important information impossible to miss.

Every page should answer three questions instantly:

• Where am I? (Site identity / logo)
• What is this page about? (Main heading)
• What should I do next? (Call to action)

2. Size & Weight

Bigger and bolder means more important. This is instinctive to every reader.

• Use only one H1 per page — it is the most important heading and sets the page topic.
• Use H2 for major sections and H3 for sub-points. Do not skip levels (e.g., do not jump from H1 to H4).
• Body text should be at least 16px for comfortable reading. Do not go smaller to fit more content — edit the content instead.
• Bold text draws the eye. Use it sparingly for truly important terms; if everything is bold, nothing is bold.

3. Contrast

Contrast is the difference between elements — in color, size, or style. High contrast draws attention; low contrast recedes.

• A bright call-to-action button on a neutral background uses contrast to pull the eye.
• Light gray text on a white background has very low contrast and is hard to read — especially on mobile screens in sunlight.
• Use contrast purposefully: not every element needs to stand out. Let supporting content recede so primary content can lead.

Note: color contrast is also an accessibility requirement. See the Accessibility Basics tutorial for specific ratio guidelines.

4. Whitespace

Whitespace — the empty space on a page — is not wasted space. It gives content room to breathe and helps the eye group related items.

• More whitespace = more professional. Crowded pages feel cheap and are harder to read.
• Group related elements close together and separate unrelated ones with more space. This is called the Law of Proximity.
• Use margin and padding in CSS to control whitespace. Generous padding inside content blocks (1.5–2rem) is almost always the right call.

5. Alignment

Consistent alignment creates a sense of order and professionalism. Misaligned elements feel careless.

• Pick a primary alignment (usually left for body text) and stick to it throughout the page.
• Center alignment works for short headlines and hero sections. Avoid centering long paragraphs — they are hard to read.
• Align elements to an invisible grid. In CSS, a simple max-width with margin: 0 auto centers your content on the page and creates natural left/right margins.

6. Common Layout Patterns

You do not need to invent a layout from scratch. Most effective web layouts follow a small set of proven patterns:

Pattern	Best Used For
Single column	Blog posts, tutorials, articles — any reading-focused content
Two columns (sidebar + main)	Navigation-heavy pages, documentation
Card grid	Portfolios, product listings, photo galleries
Hero + sections	Homepages and landing pages