Designing with Vignelli's Rules

I've had a soft spot for Massimo Vignelli's work for a long time. It shows up in how I lay out documents, how I build interfaces, and in Kaybl, which is designed on a Vignelli-style grid on purpose. What I like about him is that he didn't just make beautiful things. He left a set of rules behind, and most of them still hold up in a browser.

Who he was

Vignelli was born in Milan in 1931 and trained as an architect before he moved into graphic and product design. In 1965 he co-founded Unimark International, a design firm built on the idea that a grid and a disciplined system could carry a company's whole identity. A few years later he and his wife Lella started Vignelli Associates, and they kept working until his death in 2014.

The work most people know, even if they don't know his name:

• The 1972 New York City subway diagram. Straight lines at 45 and 90 degrees, a color for each line, stations as dots. It traded geography for clarity, and plenty of New Yorkers complained that it didn't match the streets above. The city replaced it in 1979, but it's still one of the most admired maps ever made.
• The American Airlines identity. Two stacked A's set in Helvetica, red and blue, with an eagle. It lasted for decades, which says a lot about a logo.
• Signage, furniture, books, packaging, dinnerware. His line was that if you can design one thing, you can design anything, and he spent his career acting on it.

In 2010 he wrote it all down in The Vignelli Canon, a short book he released as a free PDF. It's worth an evening. It's short, it's opinionated, and you'll recognize half of it in design you already like.

A handful of typefaces

This is the rule people remember. Vignelli argued that you only need a few typefaces, and the list he kept coming back to was short: Helvetica, Bodoni, Garamond, Century and Futura, give or take. His point wasn't that other typefaces are bad. It's that most new ones add noise, and a small set, used well, covers nearly everything.

On the web this is easier than ever to follow and just as easy to ignore. Font libraries put thousands of families a click away. The Vignelli move is to pick two, maybe three, and make them do all the work.

The grid

Everything Vignelli made sits on a grid. Not as decoration, as the invisible structure that decides where things go and how big they are. Margins, columns and the space between them are set once, and every element lines up to them.

A browser gives you that for free now. CSS grid lets you define columns once and snap everything to them, which is exactly what he was doing with a ruler and a T-square. A TV guide, where time runs across and channels run down, is basically a grid wearing a costume. That's why it made sense as the skeleton for Kaybl.

Hierarchy through size and weight

Look at a Vignelli layout and the ranking is obvious without any color: big and heavy matters most, small and light matters least. Contrast of scale does the job that a lot of modern interfaces hand to colored badges, boxes and icons.

Try it on your next page. Take the color out and see if the hierarchy still reads. If it doesn't, the type scale isn't doing its job yet.

Try this

Grayscale a screenshot of a page you've built. If you can still tell the heading from the subhead from the metadata, your type is carrying the hierarchy. If everything turns into the same grey soup, it's the color doing the work, and color is the first thing to break for someone who can't see it well.

Semantics, syntactics, pragmatics

The Canon opens with the ideas behind the rules, and three of them are the ones I use most:

Lens	What it asks	On a web page
Semantics	What does this mean, and what is it for?	Understand the content before choosing a layout
Syntactics	How do the parts relate to each other?	Grid, type scale, spacing, consistent components
Pragmatics	Can people actually use and understand it?	Readable, navigable, works on the device in their hand

He also wrote about discipline (sticking to the system you set), appropriateness (the design should fit the problem, not your mood that week) and ambiguity, which surprises people. He liked work that could be read more than one way. Rigid structure, but room for a little wit inside it.

Where it shows up for me

Not everything I make looks like a Unimark manual. This site, for one, has chunky cards, hard shadows and a pixel font, which he'd probably have had opinions about. But the bones are his: a limited set of typefaces, a consistent grid, hierarchy from size before color, and the habit of asking "is this appropriate?" before "is this cool?"

That's the part of Vignelli that travels. You don't need Helvetica and a red-and-blue logo. You need a system, and the discipline to keep using it after the novelty wears off.