Briefle words · UI design
Visual weight
How strongly an element pulls the eye, driven by its size, boldness, color and contrast with what surrounds it.
Say it to an AI
Booking details panel as a two-column grid of key-value pairs. Muted labels above each value, small and grey, and the values carry the visual weight: larger, semibold, near-black, so seat, time and confirmation code are what you see first.
How an expert would brief the stronger version of “Booking details”.
See it
Try it as a puzzle →Trip page in an airline's app, opened on the way to the airport.
Why: B gives the most weight to the values (15px semibold, near-black); A gives it to the labels (14px bold black).
More ways experts use it
Four-item benefits list where the text leads and the icons are supporting icons: small, one muted color on a soft tinted tile, same style for all four. Keep their visual weight below the 15px semibold headings so the icons work like bullets, not decoration.
What's included · UI design
Related words
Room 2 · Hierarchy & emphasis
Learn “Visual weight” in a five-minute lesson