Visual hierarchy in web design is primarily achieved through CSS. The concepts - scale, contrast, whitespace, color, and typography - translate directly into CSS properties, and understanding which properties control which hierarchy signals makes intentional hierarchy a systematic process rather than a series of aesthetic judgments.
This article covers the specific CSS techniques that create each dimension of visual hierarchy, with patterns you can apply to your own projects.
Type Scale: Building a System That Communicates Structure
A type scale assigns specific font sizes to specific semantic roles. Without a scale, font sizes are chosen individually for each component, which produces inconsistent visual relationships between headings across different parts of an interface.
A modular type scale uses a consistent ratio to generate all sizes from a single base value. The most common ratios used in web type scales:
/* Major Third scale (1.25 ratio) - subtle, professional */
--text-xs: 0.64rem; /* 10.24px at 16px base */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 48.8px */
/* Perfect Fourth scale (1.333 ratio) - clear distinction */
--text-xs: 0.563rem;
--text-sm: 0.75rem;
--text-base: 1rem;
--text-lg: 1.333rem;
--text-xl: 1.777rem;
--text-2xl: 2.369rem;
--text-3xl: 3.157rem;
--text-4xl: 4.209rem;
The ratio controls how visually distinct adjacent levels are. A 1.25 ratio is subtle and appropriate for body text with moderate heading sizes. A 1.5 or 1.618 (golden ratio) produces dramatic distinctions between levels, appropriate for marketing pages or display typography.
Assigning scale steps to semantic roles creates consistency:
h1 { font-size: var(--text-4xl); font-weight: 700; }
h2 { font-size: var(--text-2xl); font-weight: 700; }
h3 { font-size: var(--text-xl); font-weight: 600; }
h4 { font-size: var(--text-lg); font-weight: 600; }
p, li { font-size: var(--text-base); font-weight: 400; }
small, figcaption { font-size: var(--text-sm); font-weight: 400; }
Contrast Through Color Variables
Color contrast is most reliably implemented through a token system that assigns semantic roles to color values. Tokens prevent the hierarchy failure that occurs when the same color appears in both primary action contexts and decorative contexts.
:root {
/* Semantic color tokens */
--color-action-primary: #0066cc; /* Only for primary CTAs */
--color-action-secondary: #5590c2; /* Secondary interactive elements */
--color-text-strong: #111827; /* Headings, high-emphasis content */
--color-text-default: #374151; /* Body text */
--color-text-subtle: #6b7280; /* Supporting text, captions */
--color-text-disabled: #9ca3af; /* Non-interactive labels */
--color-surface-elevated: #ffffff; /* Cards, modals */
--color-surface-default: #f9fafb; /* Page background */
--color-border-default: #e5e7eb; /* Structural borders */
--color-border-strong: #374151; /* High-contrast dividers */
}
The token names encode the hierarchy role, not the color value. When you apply --color-text-subtle to a caption, the intent is legible in the CSS. When the token is changed globally, the hierarchy relationship is preserved.
Button hierarchy through contrast:
/* Primary - highest contrast, draws the most attention */
.btn-primary {
background-color: var(--color-action-primary);
color: #ffffff;
font-weight: 600;
padding: 0.75rem 1.5rem;
}
/* Secondary - present but visually subordinate */
.btn-secondary {
background-color: transparent;
color: var(--color-action-primary);
border: 2px solid var(--color-action-primary);
font-weight: 500;
padding: 0.75rem 1.5rem;
}
/* Tertiary - minimum visual weight */
.btn-tertiary {
background-color: transparent;
color: var(--color-text-subtle);
font-weight: 400;
padding: 0.75rem 1.5rem;
}
These three buttons vary only in contrast and weight, not in size. The hierarchy is entirely created through the visual weight difference.
Whitespace as a Hierarchy Signal
Whitespace communicates grouping and isolation. CSS implements whitespace through margin, padding, gap, and line-height. The hierarchy principle: more whitespace around an element increases its visual prominence by isolating it.
A spacing scale ensures that whitespace relationships are consistent:
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-24: 6rem; /* 96px */
}
Applying hierarchy through spacing relationships:
/* Sections are separated by large spacing */
.page-section {
padding-block: var(--space-16);
}
/* Within a section, content groups are separated by medium spacing */
.content-group {
margin-block-end: var(--space-8);
}
/* Within a content group, related items are close */
.label + .value {
margin-block-start: var(--space-1);
}
/* Isolated CTA gets extra whitespace to increase prominence */
.cta-isolated {
padding: var(--space-16);
display: flex;
justify-content: center;
}
The Gestalt proximity principle means that elements separated by --space-1 read as intimately related, while elements separated by --space-16 read as distinct sections. The spacing values encode the relationship.
Photo by www.kaboompics.com on Pexels
Visual Weight Through Font Weight and Style
Font weight creates hierarchy within type without requiring size changes, which is valuable when you want to create emphasis inside a paragraph or within a card where size differentiation is not practical.
/* Within a card, use weight rather than size for hierarchy */
.card-label {
font-size: var(--text-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-subtle);
}
.card-title {
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-text-strong);
margin-block: var(--space-2);
}
.card-body {
font-size: var(--text-base);
font-weight: 400;
color: var(--color-text-default);
line-height: 1.6;
}
.card-meta {
font-size: var(--text-sm);
font-weight: 400;
color: var(--color-text-subtle);
}
Within this card, four distinct hierarchy levels exist despite all the text being within a small physical area. The label uses small-caps-like treatment to create a distinct visual register. The title uses maximum size and weight. The body uses standard reading weight. The meta uses the same size as the label but without the uppercase treatment, creating a different read.
Z-Index and Elevation for Depth Hierarchy
Depth hierarchy, where some elements appear to sit above others, creates a separate hierarchy dimension from visual weight. It is used to communicate layers: navigation over content, modals over pages, tooltips over controls.
:root {
/* Elevation scale - each layer must be higher than the layer below */
--z-base: 0;
--z-raised: 10; /* Cards, sticky elements */
--z-dropdown: 100; /* Dropdown menus */
--z-sticky: 200; /* Sticky navigation */
--z-overlay: 300; /* Overlays, drawers */
--z-modal: 400; /* Modal dialogs */
--z-toast: 500; /* Toast notifications */
--z-tooltip: 600; /* Tooltips, always on top */
}
/* Pair elevation with shadow to reinforce the depth signal */
.card-raised {
z-index: var(--z-raised);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.modal-dialog {
z-index: var(--z-modal);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), 0 24px 64px rgba(0, 0, 0, 0.12);
}
Shadow intensity correlates with elevation. Elements that appear highest should cast the deepest shadows (as if lit from above with more air between them and the surface below). This reinforces the depth signal from z-index positioning.
Auditing Hierarchy With Browser DevTools
Browser DevTools can be used to audit hierarchy problems in an existing interface. Two approaches are particularly useful:
Computed styles audit: Select each major text element and check its computed font-size, font-weight, and color. If two elements that should have different hierarchy levels share identical or near-identical values for all three properties, the hierarchy is ambiguous at best.
Contrast ratio check: Chrome DevTools includes a contrast ratio indicator in the color picker. Select an element's computed color and background, and DevTools reports the contrast ratio and whether it meets WCAG AA or AAA. Low-contrast elements are hierarchy candidates for de-emphasis (intentionally low contrast communicates low importance) but should not receive this treatment accidentally.
The MDN Web Docs provides comprehensive reference for the CSS properties discussed here. The W3C WAI maintains WCAG contrast guidelines that overlap with hierarchy principles. The Tailwind CSS documentation shows how a modern utility framework implements spacing, type, and color scales that align with hierarchy best practices.
For a comprehensive explanation of how scale, contrast, whitespace, color, and typography work together as hierarchy tools at the design level, this web design guide from 137Foundry covers the full framework including scanning patterns and common design problems that hierarchy fixes.
Photo by Elchinator on Pixabay
Putting the Techniques Together
A system that implements all of these techniques creates a design language where every element's visual weight reflects its importance. The type scale communicates structure. The color token system assigns hierarchy roles to colors. The spacing scale communicates grouping. Font weight creates micro-hierarchy within components. Elevation communicates layers.
The result is not a specific visual style but a set of constraints that ensure hierarchical consistency across the interface. Any component built within the system inherits the hierarchy rules without requiring custom decisions for each new element. That consistency is what makes complex interfaces navigable without explicit instruction.
Top comments (0)