Design glossary

The words designers use, from kerning to bleed to auto layout, in plain English.

Typography

Typeface: A family of letters drawn to look alike, such as Inter or Garamond. A font is one style of it, like Inter Bold. Fonts on Stacks
Serif: The small strokes at the ends of letters. Serif faces have them; sans serif faces, like Helvetica, don’t.
Weight: How thick the strokes are, from Thin through Regular to Black. Often written as a number from 100 to 900.
Variable font: One font file that holds a whole range of weights or widths, so you can pick any point in between.
Kerning: The space between two particular letters, adjusted so pairs like “AV” don’t look too far apart.
Tracking: The space added evenly across a whole word or line. Small, light text often needs a little more.
Leading: The space between lines of text, also called line height. Body text usually reads best at about 1.4 to 1.6 times the size.
Hierarchy: Using size, weight and colour so the most important words are read first.
Measure: How long a line of text runs. About 50 to 75 characters is comfortable to read.
Widow and orphan: A lonely last word on its own line, or a single line left at the top or bottom of a column. Both look like mistakes.

RGB: Red, green and blue light mixed to make colours on screens. Hex codes like #FF6A2B are RGB written in short. Colour tools on Stacks
CMYK: Cyan, magenta, yellow and black inks mixed to print colours. Screens show more colours than CMYK can print.
HSL: A way to describe colour by hue, saturation and lightness, which is easier to adjust by hand than RGB.
Pantone: A numbered system of ready-mixed inks, so a brand colour prints the same everywhere.
Contrast ratio: How different text is from its background, from 1:1 to 21:1. Body text should be at least 4.5:1. Accessibility tools on Stacks
Palette: The small set of colours a design uses, usually a few neutrals, one or two main colours and an accent.
Gradient: A smooth blend from one colour to another, in a line (linear) or from a centre point (radial). Gradients on Stacks

Grid: Columns and gaps that elements line up to, so a page feels ordered. Twelve columns is common on the web.
Gutter: The gap between columns in a grid.
Whitespace: The empty space around and between things. It isn’t wasted; it groups related items and lets the page breathe.
Alignment: Lining elements up along a shared edge or centre, so the eye can follow them.
Visual weight: How strongly something pulls the eye, from its size, colour, contrast and position.
Above the fold: What shows before anyone scrolls. The term comes from the top half of a folded newspaper.
Breakpoint: A screen width where a responsive layout changes, for example from three columns to one on a phone.

UI and UX: UI is how a product looks and the controls you touch. UX is the whole experience of using it, including whether it makes sense.
Wireframe: A plain sketch of a screen’s layout in boxes and labels, made before any colour or style.
Mockup: A detailed still picture of how a screen or product will look. Also a ready-made scene, like a phone, to show a design in. Mockups on Stacks
Prototype: A clickable version of a design that behaves like the real thing, made to test ideas before building them.
Component: A reusable part, like a button or a card, built once and used everywhere. Change the main one and every copy updates.
Design system: The shared components, styles and rules a team uses so every screen feels like one product. UI kits and systems on Stacks
Design tokens: Named values for colours, sizes and spacing that design files and code both use, so they stay in step.
Auto layout: Figma’s way of making frames grow and space their contents by themselves, like flexbox in CSS.
Affordance: A clue in how something looks that tells you what it does, like a button that looks pressable.
Empty state: What a screen shows before there’s anything in it. A good one says what to do first.

Vector: Artwork made of shapes and paths, so it stays sharp at any size. SVG, AI and EPS are vector formats. Icons on Stacks
Raster: Artwork made of pixels, like a photo. It goes soft or blocky when enlarged. JPG, PNG and WebP are raster formats.
Resolution: How much detail an image holds, in pixels. For print it’s counted in dots per inch, and 300 is the usual target.
Lossy and lossless: Lossy formats like JPG drop detail to make files smaller. Lossless formats like PNG keep every pixel.
Alpha channel: The part of an image that stores transparency, so a logo can sit on any background. PNG and WebP have one; JPG doesn’t.
Export at 2x: Saving an image at twice its display size so it looks sharp on high-density screens.
Raw file: The untouched data from a camera sensor, edited in apps like Lightroom or darktable before it becomes a JPG.

Bleed: Extra artwork past the edge of the page, usually 3 mm, so nothing white shows after the paper is trimmed.
Trim and safe area: The trim is where the paper is cut. The safe area sits inside it, and keeps text away from the edge.
Crop marks: Thin lines at the corners of a print file that show the printer where to cut.
Spot colour: A colour printed with its own ready-mixed ink, like a Pantone, instead of being mixed from CMYK.
Proof: A test print or PDF checked before the full run, to catch colour and spelling mistakes.

Logo, logotype and mark: A logotype is a name set in letters; a mark is a symbol. A logo can be either, or both together. Branding tools on Stacks
Brand guidelines: The rules for using a brand: its logo, colours, type and tone, so everyone applies it the same way.
Moodboard: A collage of pictures, colours and type gathered at the start of a project to agree on a feel. Inspiration on Stacks

Easing: How movement speeds up and slows down. Ease-out starts fast and settles, and feels natural for things arriving. Motion tools on Stacks
Keyframe: A point on a timeline where you set a value, like position or colour. The app fills in the frames between.
Micro-interaction: A small moment of feedback, like a like button that pops when tapped.
Lottie: A small file format for vector animations, made in After Effects and played on websites and apps.