Mac Icons Weren't a Pixel Problem, They Were a Metaphor Problem
Draw fewer strokes and users can put themselves into the icon. The 16×16 black-and-white limit wasn't a design regret — it was the constraint that forced the good ideas out.
The video won't play here. Listen to the audio instead:
The argument · tap a timestamp to hear it
The hard part of design is the idea; form follows on its own
The episode opens with method. Paul Rand told Susan Kare that design has to be ‘meaningful and memorable’, and that the way to get there is to have a good idea first — the form then follows naturally. Susan says she doesn't come from a computing background; before Apple she was in Arkansas welding a boar sculpture the size of a real pig. Precisely because she carried no baggage about pixels or graphics, she treated an icon as a communication problem. Rand's line, she stresses, still holds in the idiom of today's AI products.
— Susan KareConstraints aren't the opposite of creativity, they're the precondition for it
The icon spec on the Macintosh back then was only 16×16 pixels, black and white. Susan Kare's attitude: constraint is not the antonym of creativity, and it is better to see the constraint clearly and get excited about it than to complain about not having a thousand colors. To keep text from looking jagged in a grid that small, she organized letterforms out of horizontals, verticals, and 45-degree diagonals. The fewer pixels you have, the more you are forced to reduce an object to the very little that still makes it recognizable.
— Susan KareLetters shouldn't share one width — that's why Mac type looked far better
Text on a lot of devices at the time was monospaced: the M got squashed, the I got stretched. The Mac was one of the few machines that could do proportional fonts, where each letter takes the width its own shape wants, so she could see at a glance that ‘this looks much better’. She designed Chicago for the system at a 9-pixel height, and made New York and Geneva along Times-like and Helvetica-like lines. The names originally came from small towns in the Philadelphia suburbs near the high school she and Andy went to; when Steve Jobs saw them he said the city names weren't bad, but at least use the names of world-class cities.
— Susan KareThe more detail an icon carries, the less room users have to enter it
She uses Scott McCloud's theory of comics to explain why an icon must not be filled in: the more detail a face has, the more it looks like one specific person, while a face drawn with extreme simplicity lets every user project their own expression onto it. A pencil works the same way — a plain pencil can stand for ‘writing’, whereas a metal pen with highlights is one particular model of pen that not everyone uses. She thinks an icon only needs to keep one or two salient features, the way the two children on a school crossing sign don't need plaid lunchboxes or shoelaces.
— Susan KareDrawing the physical product into an icon dooms it to go out of date
When she did the print icon for the ImageWriter, she drew real details like the perforated paper, because that printer really did look like that; in hindsight, though, she thinks ‘too much detail’ was the mistake, and that something simpler would have let the symbol live longer. The 3.5-inch floppy disk serving as the ‘save’ icon is the same lesson: however universal a physical product is, it still becomes dated. Her alternative is to use a metaphor, and to draw only enough detail to be understood.
— Susan KareVirtual gifts sell cuteness, not the fantasy of expensive things
She made one-dollar virtual gifts for Facebook: a new gift went up every day at midnight, and about 15 minutes later the sales numbers already told you whether it would be a hit. Susan had assumed that drawing expensive objects — diamond earrings, a Rolex — would make ‘spending $1’ feel like a good deal, but the real pattern was that cute beats everything: hearts, teddy bears, and kiss marks sold best, and the limited-edition penguin sold out every time. Buying a laugh or a bit of sweetness is more immediate than buying the imagination of an expensive object.
— Susan KareGood designers don't enter the pitch; they quote one price
Steve Jobs initially wanted to put the NeXT logo out to competition: invite 5 firms or 5 people, pay each of them $15,000, then carry on with whichever he chose. Paul Rand's answer was: you'll pay me $100,000, I'll do one logo, and you'll like it. That is exactly what happened. Rand was against spending big money to turn an unrelated, random symbol into a brand, and argued instead for working with the brand name itself — the way he put NeXT inside a box, and made UPS a logo his daughter looked at and immediately called a ‘present’.
— Susan KareShowing the boss a single option is asking him to say no
Andy Hertzfeld taught her how to show work to Steve Jobs: don't bring only one thing, because with a single option all he can say is that he doesn't like it, which may send you back to make it better; bring several options and he can get involved, point out that one of them is terrible, and then still pick one of them. She treats this as a general method for presenting creative work to decision-makers — leave room for their judgment, and don't let one round of feedback turn into a wholesale no.
— Susan KareIn their own words · checked verbatim
always focus on making things meaningful and memorable. And I think the heart of that is have a good idea. And then the form will follow.
Susan Kare1:05
You can be creative, but it's good to understand what the constraints are and then be excited about that, as opposed to being upset that you don't have a thousand colors.
Susan Kare7:28
there's not a technical reason that they couldn't have plaid lunch boxes and shoelaces or be singing a song, but it would probably be more distracting and just take away from that instant recognition that you're aiming for.
Susan Kare18:04
it kind of looks like a four leaf clover. That's sort of lucky. And it kind of looks like a clover leaf highway, which might be a way to get somewhere fast.
Susan Kare23:12
what I learned was that cute trumped everything.
Susan Kare32:59
you will pay me $100,000. I will do one logo and you will like it.
Susan Kare38:24
don't show him one thing. Because he'll say he doesn't like it. Because it maybe forces you to go try and do it again and be better.
Susan Kare48:58
Figures
| Macintosh icon canvas | 16×16 pixels, black and white | 7:28 |
| Chicago type height | 9 pixels (cap height) | 8:32 |
| icon editor preview resolution | 72 dpi | 12:52 |
| Startup graphic canvas (128K Macintosh) | 32×32 pixels | 15:01 |
| Facebook virtual gift price | $1 | 31:52 |
| Window for judging whether a new gift will sell | about 15 minutes after it goes up | 32:59 |
Glossary
- iconographer
- The job title Susan gives herself; treating icon-drawing as a craft of communication.
- bitmap graphics
- Images stored as a grid of pixels; early Mac icons were 16×16 bitmaps.
- proportionally spaced fonts
- Characters take different widths according to their own shapes, instead of every character being one width.
- cap height
- In type metrics, the distance from the baseline to the top of the capital letters.
- Letraset
- Before computer typesetting, a dry-transfer tool for laying letters onto paper.
- desktop metaphor
- The system of figures — files, folders, trash can — that conveys computer operations through desktop objects.
How to listen
Designers who keep struggling over one icon in an interface, and founders who want to understand Steve Jobs– and Paul Rand–style creative pricing.
The career-retrospective stretch (roughly 25:20–37:16) is skippable; the core is at the open, 17:04, and 38:24.