Visual Weight

The perceived heaviness or importance of a design element based on its size, color, contrast, and density — the force that pulls the eye toward or away from key content.

https://
FreeNo signup~1 minute

Visual Weight explained

Visual weight is the perceived "pull" of a design element — how much it attracts the eye relative to everything else on the page. Larger elements have more weight than smaller ones. Dark elements have more weight than light ones. Saturated colors have more weight than muted ones. Dense content areas (text blocks) have more weight than sparse areas (whitespace). A red button on a blue page has enormous visual weight because it breaks the pattern.

Understanding visual weight is understanding what controls attention on your page. Most landing page problems aren't about bad content — they're about the right content having the wrong visual weight. Your CTA should be the heaviest element in its section. Your headline should be heavier than your subheadline. Your primary offer should feel weightier than your secondary content.

Diagnosing visual weight problems

The squint test works perfectly here: squint at your landing page until everything blurs. The elements that still stand out are the ones with the most visual weight. If those elements are your headline and CTA, great. If what stands out is your stock hero image or a decorative sidebar element while your CTA disappears, you have a weight problem.

Common weight mistakes: hero images that overpower the headline (fix: add an overlay or reduce image saturation), secondary CTAs that match the visual weight of the primary CTA (fix: make the secondary one a ghost button), and navigation links that compete with in-page content (fix: reduce nav color contrast). Every weight adjustment is a choice about what matters most.

Related terms

Related reading

See these concepts in action

Analyze your landing page and get scored across all 8 dimensions.

https://