Content Glossary

Glossary of Design Terms

Plain definitions of design terms such as kerning, leading, bleed, margin, grid and hierarchy, written for people who are not trained designers.

On this page
  1. Speaking the same language as designers
  2. Typography terms
  3. Layout terms
  4. Color terms
  5. Image and production terms
  6. Using the terms

Speaking the same language as designers

Design has a compact vocabulary, and a few of its words are easy to mix up. Knowing them makes feedback clearer. “Make the text easier to read” is vague; “increase the leading” is something a designer can act on. These design terms are grouped into typography, layout, color and production.

Typography terms

Typeface and font. A typeface is a family of letter designs. A font is a particular size, weight and style within it. In everyday use the words are often swapped, and that is usually fine.

Serif and sans serif. Serifs are the small strokes at the ends of letters in some typefaces. Sans serif typefaces do not have them. Neither is automatically more readable; typeface choice depends on size, medium and the reader.

Weight. How thick the strokes of the letters are, from light to bold.

Point size. The size of type, measured in points on paper and in related units on screens.

Kerning. Adjusting the space between a specific pair of letters so the gaps look even. Some letter pairs, such as a capital “A” next to a “V,” usually need it.

Tracking. Adjusting the spacing across a whole word, line or block of text equally. Kerning works on pairs; tracking works on groups.

Leading. The vertical space between lines of text, measured from one baseline to the next. The word comes from the strips of lead once used in metal type. Too little leading makes lines feel crowded; too much makes them drift apart.

Line length. The number of characters in a line. Very long lines are tiring to follow, and very short ones chop up the reading.

Alignment. How text lines up, whether left, right, centered or justified. Left-aligned text is common for long reading in left-to-right languages.

Baseline. The invisible line on which most letters sit.

Widow and orphan. Awkward leftover lines, such as a single word on the last line of a paragraph or a lone line stranded at the top or bottom of a column. Definitions of which is which differ between sources.

Hyphenation and justification. Rules for breaking words and stretching lines to fill a column. Poor settings can leave uneven gaps.

Layout terms

Grid. A framework of invisible columns and rows that helps place elements consistently. Layout grids make pages feel organized.

Margin. The empty space between content and the edge of the page or screen.

Gutter. The space between columns.

Padding. The space between an element’s content and its edge, such as the space inside a button.

White space (negative space). Any empty area on a layout. It helps separate groups and gives the eye rest.

Visual hierarchy. The order in which a viewer notices elements, created by size, contrast, position and spacing.

Alignment and proximity. Two basic principles: line things up on shared edges, and place related things near each other.

Focal point. The part of a design that catches the eye first.

Balance. The sense that the weight of elements is distributed in a way that feels stable, whether symmetrical or not.

Contrast. A noticeable difference between elements, such as light against dark or large against small. Color contrast in particular affects readability.

Wireframe. A rough, simplified layout showing where things go, without final colors or images.

Mockup. A more finished visual representation of what a design will look like.

Responsive design. A layout that adjusts to different screen sizes.

Color terms

Hue, saturation and brightness. Hue is the basic color, such as red or blue. Saturation is how intense it is. Brightness is how light or dark it is.

Palette. The set of colors chosen for a project.

RGB. A color model for screens that mixes red, green and blue light.

CMYK. A color model for printing that uses cyan, magenta, yellow and black ink. Because screens and print work differently, colors may not match exactly between them.

Hex code. A short code, such as a six-character combination of letters and numbers, that identifies a color on screens.

Color blindness and accessibility. Many people see some colors differently, so designers avoid using color as the only signal. For more, see designing for color vision differences.

Complementary and analogous colors. Complementary colors sit opposite each other on a color wheel. Analogous colors sit next to each other. These are basic parts of color theory.

Image and production terms

Resolution. The amount of detail in an image, often described in pixels. Print generally needs more pixels per inch than a screen.

Vector and raster. Vector graphics are built from mathematical shapes and can scale without losing sharpness. Raster images are made of pixels and can look blurry when enlarged.

Bleed. Artwork that extends slightly past the final trim edge of a printed page so that there are no white slivers after cutting. A printer usually specifies how much bleed it needs.

Trim and safe area. The trim is where the page is cut. The safe area is the zone inside it where important content should stay so it is not cut off.

Crop. To cut away parts of an image or to frame it differently.

Aspect ratio. The proportion of width to height of an image or space.

Compression. Reducing file size, sometimes at the cost of quality. Choosing image formats involves this trade-off.

Proof. A sample or preview checked before final production.

Using the terms

You do not need to memorize these. Use the words when they help you give specific feedback, and ask a designer to explain anything unclear. A good designer or printer would rather answer a question than correct a file later.

Printing requirements and software behavior differ, so always confirm exact specifications, such as bleed size and color mode, with whoever will produce the final piece.

The complete guide to content glossary

Content Glossary: Key Terms Explained
Read the guide

Keep exploring

Guides from other topics

All topics →