Visual Hierarchy

Key Points

• •Not all elements are equal—establish 3 clear levels: primary, secondary, and tertiary
• •Visual hierarchy is the most effective tool for making something feel "designed"
• •When everything competes for attention, it feels noisy and chaotic
• •Tools for hierarchy: font size, font weight, color/contrast, and spacing
• •Size isn't everything—use weight and color to do the heavy lifting instead of extreme sizes
• •"Emphasize by de-emphasizing"—making surrounding elements less prominent is as effective as making the target louder
• •Labels are a last resort—the data itself is more important than the label describing it
• •Semantic importance ≠ visual importance—a destructive action doesn't need to be visually dominant
• •Don't use grey text on colored backgrounds—hand-pick colors based on the background hue instead
• •Stick to 2-3 text colors (dark primary, grey secondary, lighter tertiary) and 2 font weights (400/500 normal, 600/700 emphasis)
• •[FIGURE — Hierarchy before/after] Shows: Two versions of the same card—first with all text equally styled (chaotic), second with deliberate hierarchy applied (clear). Teaches: Deliberately de-emphasizing secondary info makes the design immediately more pleasing without changing colors or fonts. Reproduce as: Interactive toggle between flat vs hierarchical styling.
• •[FIGURE — Size vs weight comparison] Shows: Two headlines—one using extreme font sizes, one using weight/color for hierarchy at reasonable sizes. Teaches: Relying on size alone forces extremes; weight and color create hierarchy without tiny or enormous text. Reproduce as: Side-by-side comparison with same content.
• •[FIGURE — Grey on colored backgrounds] Shows: Grey text on colored background (washed out) vs hand-picked color with same hue (clear). Teaches: On colored backgrounds, reduce contrast by adjusting hue/saturation, not by using grey or reducing opacity. Reproduce as: Color picker demo showing technique.
• •[FIGURE — Emphasize by de-emphasizing] Shows: Nav bar where active item stands out only after inactive items are muted. Teaches: Sometimes you can't make something louder—instead, make everything else quieter. Reproduce as: Interactive nav with adjustable inactive item styling.
• •[FIGURE — Labels vs data emphasis] Shows: Form where labels are bold and data is muted (wrong) vs labels muted and data prominent (right). Teaches: Users care about the data, not the labels—de-emphasize labels to let values shine. Reproduce as: Settings panel with toggleable label styling.
• •[FIGURE — Document vs visual hierarchy] Shows: Semantic HTML heading (h1) styled small vs marketing page title (h3) styled large. Teaches: Visual hierarchy should serve the user's task, not HTML semantics—an h3 can look bigger than an h1. Reproduce as: Same content with semantic vs visual treatment.
• •[FIGURE — Weight and contrast balance] Shows: Icon with text where weight adjustments maintain visual balance between different element types. Teaches: Balance visual weight across different elements—icons may need different treatment than text. Reproduce as: Icon + text pairing with weight adjustments.
• •[FIGURE — Destructive action hierarchy] Shows: Settings page where "Delete Account" is styled as subtle tertiary action, not big red button. Teaches: Dangerous but infrequent actions should be de-emphasized to prevent accidental clicks. Reproduce as: Action button hierarchy comparison.

Guidelines

• ✓Start every page by deciding: what is the ONE primary element users should see first?
• ✓Use no more than 2-3 font sizes per component; vary weight and color instead
• ✓Make primary actions visually dominant (solid fills, high contrast) and secondary actions recessive (ghost buttons, muted text)
• ✓De-emphasize supporting text (timestamps, metadata, labels) with lighter color and smaller size
• ✗Avoid giving equal visual weight to all elements—if everything is bold, nothing is bold
• ✓Test hierarchy by squinting at the screen: the most important elements should still stand out when blurred

Related Topics