One hundred words every designer should know.
Interface, typography, and foundational principles — in plain language.
100 terms
A
- AccessibilityDesigning so people with a wide range of abilities can perceive, understand, navigate, and interact with an interface.Interface
- AffordanceA cue in an object’s form that suggests how it can be used — a handle invites pulling, a button invites pressing.Interface
- AlignmentThe deliberate lining-up of elements along shared edges or axes so the layout reads as ordered rather than scattered.Principles
- Analogous ColorColors adjacent on the color wheel — such as blue, blue-green, and green — that create calm, cohesive palettes.Color
- AnalogyExplaining a new interface through a familiar real-world counterpart — folders, desktops, shopping carts.Interface
- AscenderThe part of a lowercase letter that rises above the x-height, as in b, d, f, h, k, and l.Typography
- Aspect RatioThe proportional relationship between width and height of a frame, image, or screen — expressed as width:height.Layout
B
- BalanceThe distribution of visual weight so a composition feels stable — symmetrically equal, or asymmetrically resolved.Principles
- BaselineThe invisible line on which most letters sit; the reference for vertical type alignment.Typography
- Baseline GridA vertical rhythm system where text and often other elements snap to evenly spaced horizontal lines.Layout
- BreakpointA viewport width (or condition) at which a layout changes structure, spacing, or component behavior.Layout
C
- Call to ActionThe primary action you want a user to take on a screen or in a flow — usually expressed as a button or link.Interface
- Cap HeightThe height of capital letters measured from the baseline to the top of flat capitals like H or E.Typography
- Cognitive LoadThe mental effort required to understand and use an interface at a given moment.Interface
- Color HarmonyA pleasing relationship among colors, often built from structured schemes like complementary, analogous, or triadic.Color
- Complementary ColorColors opposite each other on the color wheel — for example, blue and orange — that create strong contrast when paired.Color
- ConsistencyUsing the same patterns, language, and visual treatment for the same kinds of things throughout a product.Principles
- ContainerA width-constrained wrapper that keeps content readable and centered within a larger viewport.Layout
- ContrastDifference between elements — in size, color, weight, texture, or form — used to create emphasis and clarity.Principles
- Contrast RatioA numeric measure of luminance difference between foreground and background, used for accessibility checks.Color
- CroppingSelecting a portion of an image or composition and discarding the rest to strengthen focus or fit a frame.Layout
D
- DensityHow tightly information and controls are packed into a given space.Layout
- DescenderThe part of a lowercase letter that drops below the baseline, as in g, j, p, q, and y.Typography
- Design SystemA shared set of principles, components, patterns, and tokens that keep products coherent as they scale.Interface
- Design TokenA named design decision — color, space, type size, radius — stored as data so products share the same values.Interface
E
- EmphasisMaking one element stand out so the viewer knows where to look first.Principles
- Empty StateThe screen shown when there is no content yet — a new inbox, a cleared filter, a first-run workspace.Interface
- Error PreventionDesigning flows so mistakes are unlikely — constraints, confirmations, and clear defaults — rather than only offering recovery later.Interface
F
- FeedbackA system’s response that confirms an action was received and shows what happened as a result.Interface
- Figure–GroundThe perceptual separation of a subject (figure) from its surroundings (ground).Perception
- Fitts’s LawA model predicting that the time to acquire a target rises with distance and falls with target size.Interface
- Flat DesignA visual approach that minimizes skeuomorphic depth cues in favor of simple shapes, solid color, and typography.Interface
- Focal PointThe area of a composition that draws the eye first and anchors the reading order.Principles
- FontA specific delivery of a typeface at a particular weight, width, and style — historically a set of metal sorts, today often a file.Typography
G
- Gestalt PrinciplesA set of perceptual rules describing how humans group visual elements into wholes — proximity, similarity, continuity, closure, and more.Perception
- GlyphA specific drawn form of a character — the shape you see for A, a, or @ in a given font.Typography
- GridA structure of columns, rows, and gutters that organizes content into a predictable spatial system.Layout
- GutterThe space between columns in a grid, separating content without needing heavy borders.Layout
H
- Hick’s LawThe observation that decision time increases as the number and complexity of choices increase.Interface
- HierarchyThe ordered ranking of importance among elements, guiding what is noticed and read first.Principles
- HueThe attribute of color that we name — red, green, blue — independent of lightness or intensity.Color
I
J
K
L
- LayeringStacking surfaces or content in depth — cards over backgrounds, sheets over pages — to express structure.Layout
- LeadingThe vertical distance from baseline to baseline between lines of type; also called line height.Typography
- Letter SpacingUniform adjustment of space across a range of characters — often used interchangeably with tracking.Typography
- LigatureA single glyph that combines two or more characters, such as fi or fl, for smoother letterfit.Typography
M
- MarginThe outer space between content and the edge of a page, screen, or container.Layout
- MeasureThe length of a line of text, typically counted in characters or words per line.Typography
- Mental ModelA user’s internal idea of how a system works — which may or may not match the actual system model.Interface
- MicrocopyThe small bits of interface text — labels, hints, errors, empty states — that guide action and reduce uncertainty.Interface
- ModalA dialog that interrupts the main flow and requires interaction before returning to the underlying screen.Interface
- Modular ScaleA sequence of type sizes (and sometimes spacing) generated from a ratio, such as 1.25 or 1.333.Typography
- MotionPurposeful animation that explains state change, guides attention, or expresses brand character.Interface
N
O
- OnboardingThe experience that helps a new user understand value and reach their first success in a product.Interface
- OpacityHow opaque or transparent an element is, from fully solid to fully see-through.Color
- Optical AlignmentAdjusting elements by eye so they look aligned, even when geometric centers or edges are mathematically off.Typography
- OrphanA short first line of a paragraph left alone at the bottom of a column or page.Typography
P
- PaddingThe inner space between a component’s edge and its content.Layout
- PaletteThe curated set of colors used in a brand or product, usually organized by role rather than as a flat list of swatches.Color
- PatternA reusable solution to a recurring design problem — such as a searchable list, stepped form, or confirmation dialog.Interface
- PixelThe smallest addressable unit of a digital image or screen; in UI, also a CSS length unit that may map to device pixels differently.Interface
- Progressive DisclosureRevealing advanced options or detail only when needed, keeping the default view simple.Interface
- PrototypeAn interactive simulation of a product used to test ideas before full implementation.Interface
- ProximityGrouping related elements near each other and separating unrelated ones so relationships are obvious.Principles
R
- RagThe uneven vertical edge of unjustified text, usually on the right side of left-aligned paragraphs.Typography
- RepetitionReusing visual elements — colors, shapes, type styles, spacing — to unify a composition or product.Principles
- Responsive DesignBuilding layouts that adapt fluidly across viewport sizes rather than targeting a single fixed canvas.Layout
- RhythmA sense of paced repetition in spacing, type, or form that makes a layout feel musical rather than arbitrary.Principles
- RiversUnintentional light streaks that appear in justified text when word spaces align down a paragraph.Typography
S
- Sans SerifA typeface without serifs — typically cleaner on screens and common in interface chrome.Typography
- SaturationThe intensity or purity of a color — from vivid chroma to muted grayish tones.Color
- ScaleThe size of elements relative to each other and to the canvas, used to signal importance and create depth.Principles
- SerifA typeface style with small finishing strokes at the ends of letterforms, traditionally associated with print body text.Typography
- SignifierA perceivable indicator of where an action is possible — an underline on a link, a handle on a slider, a caret on a menu.Interface
- SimilarityThe Gestalt tendency to group elements that share visual attributes such as color, shape, or size.Perception
- SkeuomorphismInterface styling that imitates real-world materials and objects — leather textures, glossy buttons, wooden shelves.Interface
- SpacingThe system of distances between elements — margins, padding, gaps — that defines density and grouping.Layout
- StyleA variant within a typeface family such as italic, oblique, or display, distinct from weight alone.Typography
- SymmetryMirror-like balance across an axis, producing a formal, stable composition.Principles
T
- TextureThe visual or tactile quality of a surface — grain, pattern, noise — that adds depth and atmosphere.Perception
- TrackingThe uniform adjustment of spacing across a whole word, line, or paragraph.Typography
- Type ScaleThe set of named text sizes used in a product — from caption to display — often derived from a modular scale.Typography
- TypefaceThe designed family of letterforms as a whole — the creative work — independent of a particular weight file.Typography
U
V
W
- WayfindingCues that help people orient themselves and navigate a space — digital or physical.Interface
- WeightThe thickness of letter strokes, typically labeled thin, regular, medium, bold, and black.Typography
- WhitespaceEmpty space intentionally left in a layout to improve clarity, grouping, and emphasis.Principles
- WidowA short final line of a paragraph that sits alone at the top of a column or page, looking stranded.Typography
- WireframeA low-fidelity structural sketch of a screen that prioritizes layout and hierarchy over visual style.Interface
X
Z
No terms match that search.