A logo has a harder job than almost any other piece of design. The same mark must work as a 16-pixel browser icon and on a billboard, in full colour on a website and in one colour on a rubber stamp, on white paper and on a black T-shirt. It will be reproduced thousands of times by people who are not designers. That is why logos are drawn as vectors, built from simple geometry, and shipped with a set of rules about how they may be used.
Paths, anchors and Bézier curves
Every vector shape is a path: a series of anchor points joined by segments. A straight segment needs only its two anchors. A curved segment is a Bézier curve, named after Pierre Bézier, a Renault engineer who used them in the 1960s to describe car body panels. Each anchor on a curve has direction handles. The angle of a handle sets the direction the curve leaves the anchor (its tangent), and the length of the handle sets how far the curve keeps going in that direction before bending toward the next anchor. A smooth point has its two handles in a straight line, so the curve flows through it; a corner point has handles that can point in different directions, or none at all.
- Put anchors at the extremes. Place points where a curve reaches its highest, lowest, leftmost and rightmost position, not in the middle of a bend.
- Use as few anchors as possible. Every extra point is a chance for a lump. A circle needs only four.
- Keep handles horizontal or vertical at the extremes. At the top of a curve the tangent is horizontal by definition, so the handle should be too (hold Shift while dragging).
- Drag in the direction the curve is going. With the Pen tool, click-and-drag sets a smooth point; a simple click sets a corner.
- Close the path when the shape needs a fill, so the software knows what is inside.
Building shapes from simple ones
Most professional logos are not drawn freehand. They are built from circles, rectangles and polygons combined with Boolean operations (Pathfinder or Shape Builder in Illustrator, Path Operations in Inkscape). Geometry gives clean, repeatable curves and consistent stroke widths, and it means the mark can be rebuilt exactly if the file is ever lost. Many famous marks can be shown to sit on a grid of circles for exactly this reason. Work on separate copies of the shapes until the result is right, because a Boolean operation permanently merges the outlines; most programs also offer a live, non-destructive version that keeps the originals editable.
| Operation | What it does | Example |
|---|---|---|
| Unite (add) | Merges overlapping shapes into one outline | Rounded rectangle + triangle = speech bubble |
| Minus front (subtract) | Cuts the top shape out of the one beneath | Circle minus an offset circle = crescent moon |
| Intersect | Keeps only the area where the shapes overlap | Two overlapping circles = a leaf or lens shape |
| Exclude | Keeps everything except the overlap | Two overlapping squares with a hole where they cross |
| Outline stroke | Turns a stroke into a filled shape | Makes line art scale evenly, since strokes may not resize with the shape |
Five kinds of logo
| Type | What it is | Real examples | Best when |
|---|---|---|---|
| Wordmark | The name set in distinctive type | Google, Coca-Cola | The name is short and memorable |
| Lettermark | Initials only | IBM, CN, TD | The full name is long or hard to say |
| Pictorial / abstract mark | A symbol with no text | Apple's apple, the CBC 'gem' | The brand is already well known |
| Emblem | Text locked inside a badge or crest | Harley-Davidson, many school and team crests | Tradition and authority matter |
| Combination mark | A symbol plus the name, usable together or apart | Canadian Tire, Adidas | A new brand that needs to teach people its symbol |
Versions and the brand style guide
One file is never enough. A logo needs a full-colour version, a one-colour (mono) version for single-ink printing, embroidery and engraving, and a reversed version in white for dark backgrounds. Wide logos often need a stacked version for square spaces, and a simplified mark for very small sizes. A logo that depends on a gradient, a drop shadow or thin hairlines will fail most of these tests, which is why good marks are designed in solid black first and coloured last.
- Logo versions and when to use each one.
- Clear space: the empty margin that must surround the logo, usually defined by a part of the logo itself (for example the height of one letter) so it scales with it.
- Minimum size in millimetres for print and pixels for screen, below which details disappear.
- Colour specifications for every medium: a Pantone spot colour, CMYK values for print, RGB and hex for screen.
- Typefaces for headings and body text, with fallbacks.
- Misuse examples: stretched, recoloured, rotated, outlined, placed on a busy photo or given a drop shadow.