Visual Weight
The perceived heaviness of a design element that determines how much it attracts the eye.
Plain English
Visual weight is what makes the eye go to one element before another. A dark, large, bold element has more visual weight than a small, light, thin one. Colour saturation adds weight. Isolation (lots of whitespace around something) adds weight. In a well-designed layout, the most important element has the most visual weight, guiding the user's eyes in the intended reading order. Poor layouts give everything equal weight, so nothing stands out.
Technical
Visual weight is affected by: size, colour value (dark = heavy), colour saturation (vivid = heavy), font weight, contrast, isolation/whitespace, and position (centre or top-left reads as more important than corners). To reduce an element's weight: make it smaller, lighter in colour, lower weight, or less saturated. To increase weight: do the opposite. Visual weight is the mechanism by which typographic and spatial hierarchy is communicated.
Live Demo
No hierarchy — everything shouts
Create Your Account
Join thousands of users
Get started in seconds
Same size, same weight, same color
Clear hierarchy — natural reading order
Create Your Account
Join thousands of users
Get started in seconds — no credit card required
Varied size, weight, and color
Visual weight directs the eye. Vary size, weight, and color to create a clear reading order.
Usage
✓ Good usage
The product headline at 48px/700 in ink-900 has the most visual weight on the page, directing the eye to it first before anything else.
✗ Bad usage
A page where the headline, navigation, body text, sidebar, and footer all use the same font size and weight — every element competes equally for attention.
Recommended values
- Primary headline: largest size + heaviest weight + highest contrast = maximum weight
- Secondary content: medium size + regular weight + muted colour = medium weight
- Metadata/captions: smallest size + lightest weight + lowest contrast = minimum weight
- CTA button: accent colour + semibold + adequate padding = strong weight
- Icons: match their visual weight to their functional importance
Common mistakes
- Accidentally giving metadata (timestamp, category tag) more visual weight than the main content.
- Using too many bolded elements — bold loses weight when everything is bold.
- Low-contrast primary content competing with high-contrast decorative elements.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Design a clear visual weight hierarchy: the product name at maximum weight (large, bold, dark), the description at medium weight (regular, slightly muted), and the metadata at minimum weight (small, light grey). The CTA button should be the second-highest weight element after the headline.