Design Glossary
30+ terms every web designer should know, defined clearly and without jargon.
Baseline Grid
An invisible horizontal grid that all text sits on, creating consistent vertical rhythm across a page. Setting a baseline (e.g. 8px) and sizing all spacing to multiples of it makes layouts feel ordered even when they look complex.
Bleed
An element that extends to or beyond the edge of its container — most commonly a full-width background image or color block. On the web, a section with no horizontal margin that spans 100vw is described as bleeding to the edges.
Cascade (CSS)
The algorithm that determines which CSS rules apply to an element when multiple rules conflict. It weighs specificity, source order, and importance. Understanding the cascade prevents the common fix of adding !important to everything.
Contrast Ratio
A numeric measure of the luminance difference between foreground and background colors, expressed as a ratio (e.g. 4.5:1). WCAG AA requires 4.5:1 for normal text and 3:1 for large text or UI components. Measured using tools like the WebAIM Contrast Checker.
Design Token
A named variable that stores a design decision — a color, spacing value, font size, or radius — making it reusable across a system. In CSS, design tokens are implemented as custom properties (e.g. --color-accent: #4f46e5). Changing the token updates every instance.
Easing Curve
A function that describes how a CSS animation progresses over time. ease-in starts slow and accelerates; ease-out starts fast and decelerates; ease-in-out does both. Custom curves are defined with cubic-bezier(). Linear motion — no easing — looks mechanical and should be avoided for most UI transitions.
F-Pattern
A reading pattern observed in eye-tracking studies where users scan content in an F-shape: a horizontal sweep across the top, a shorter sweep below, then a vertical scan down the left edge. Content-heavy pages (articles, feeds) see strong F-pattern behavior. Place your most critical information along these axes.
Fluid Typography
Type that scales smoothly between a minimum and maximum size based on viewport width, implemented with CSS clamp(min, preferred, max). Eliminates the need for separate font-size declarations at multiple breakpoints.
Golden Ratio
A mathematical proportion (~1.618:1) found in nature and art, sometimes used to generate type scales or layout proportions. Its practical value in web design is modest — the principle matters more than the number. Use it as a starting point, not a rule.
Grid System
A set of invisible horizontal and vertical lines that structure a layout. On the web, implemented with CSS Grid or a utility framework. A grid creates consistency across pages and components, making designs feel considered rather than assembled by hand.
Hierarchy (Visual)
The arrangement of elements to communicate their relative importance. Size, weight, color, and position all contribute to hierarchy. A strong visual hierarchy means a visitor always knows what to look at next — the page is not a list, it is a sequence.
Kerning
The adjustment of space between specific pairs of letters. Fonts include kerning tables that handle common pairs (AV, Te, Wa) automatically. Web designers occasionally apply manual kerning via letter-spacing — most often for headlines or logotypes where optical consistency matters more than measured consistency.
Leading
The vertical space between lines of text — in CSS, line-height. The term comes from the strips of lead type setters placed between rows of metal type. A comfortable body text leading is 1.5–1.7× the font size. Headlines can go tighter: 0.9–1.1×.
Modular Scale
A type scale built by multiplying a base size by a consistent ratio. Common ratios: Major Second (1.125×), Major Third (1.25×), Perfect Fourth (1.333×), Golden (1.618×). A modular scale creates visual harmony between text sizes without trial and error.
Negative Space
The empty area around and between elements in a composition. Negative space is not nothing — it gives subjects room to breathe, prevents visual noise, and can itself create shapes and meaning. Generous negative space is one of the clearest signals of premium design intent.
Optical Alignment
Adjusting the position of elements so they appear visually centered, even when they are not mathematically centered. Circular icons often need to be shifted slightly from true center to appear balanced. Optical alignment trusts the eye over the ruler.
Proximity (Gestalt)
The Gestalt principle that elements placed close together are perceived as a group. On the web, this means a label and its value should be closer to each other than to the next label-value pair. Proximity creates grouping without borders, backgrounds, or explicit visual containers.
Rhythm (Visual)
The repetition of visual elements — spacing, size, color, shape — that creates a sense of pattern and movement. Good rhythm makes a page feel intentional and composed. Bad rhythm feels random. Consistent spacing tokens and a type scale are the primary tools for creating rhythm on the web.
Safe Area
The region of a screen guaranteed to be visible and unobstructed — especially relevant on mobile devices where notches, home indicators, and rounded corners can clip content. On the web, use CSS env(safe-area-inset-*) with viewport-fit=cover to respect device safe areas.
Tracking
The uniform spacing applied across a range of characters — in CSS, letter-spacing. Unlike kerning (which adjusts specific pairs), tracking adjusts the density of all letters equally. Uppercase text and small labels typically benefit from positive tracking (0.05–0.15em) to improve readability at small sizes.
Type Scale
A defined set of font sizes used consistently across a design system. Typically 6–8 steps — from display/hero sizes down to captions and labels. A type scale prevents arbitrary font sizes and ensures visual consistency across all components and pages.
Variable Font
A single font file containing an entire type family, with axes like weight, width, and slant that can be adjusted continuously in CSS using font-variation-settings. Variable fonts replace multiple static files with one, and enable smooth animated type transitions that were previously impossible.
Visual Weight
The perceived heaviness of an element in a composition, determined by size, color intensity, contrast, and detail. Darker, larger, and more saturated elements carry more visual weight. Balancing visual weight across a layout creates stability; imbalancing it deliberately creates tension and movement.
Whitespace
The empty space between and around design elements — also called negative space or breathing room. Whitespace does not need to be white; it refers to any unoccupied area. Generous whitespace signals confidence, premium positioning, and clarity of purpose. The best designs have more whitespace than anything else.
Z-Pattern
A reading pattern common on landing pages and marketing sites where visitors scan in a Z-shape: top-left → top-right → diagonal to bottom-left → bottom-right. This path naturally aligns with the typical placement of logos (top-left), navigation (top-right), hero content (middle), and call-to-action buttons (bottom-right).
See the principles in practice.
Every term in this glossary connects to one of the five principles. Ready to go deeper?
Read the Five Principles Typography, color, layout, whitespace, motion