Susan Kare on Icon Design, Fonts, and the Happy Mac Story

Susan Kare, an iconographer and designer known for her work on early tech projects, shared insights from her career, particularly her time at Apple working on the Macintosh. She emphasized the importance of making things meaningful and memorable, a principle she learned from graphic designer Paul Rand.

From Welding Hogs to Designing Icons

Before joining Apple, Kare was welding a life-sized razorback hog for a museum, a solitary pursuit that made her yearn for teamwork. Her high school friend, Andy Herzfeld, a system software programmer at Apple, invited her for an interview to design symbols and typefaces for a new computer. Despite having a PhD in art history and limited computer knowledge, she prepared by studying typography books and creating bitmap graphic examples on graph paper. These early, somewhat random designs, including a pun with a boot and paper, subtly influenced the final software.

The Macintosh Vision: User-Friendly and Accessible

Kare got the job and was tasked with improving the computer's visual interface. The goal was to create a computer that anyone could use, making it understandable without a manual and friendly. This meant working within significant constraints: a 16x16 pixel, black and white display. Her initial designs included art tools like a lasso.

Chicago Font and World-Class Cities

Kare designed the first Macintosh font, Chicago, which was 9 pixels tall. She aimed to make the on-screen text tidier by using horizontals, verticals, and 45-degree angles. The Macintosh's ability to use proportionally spaced fonts was a significant advancement, making text look much better. Chicago was used in the title bar and even on the first iPod, which made her happy. Other fonts like New York and Geneva were created to offer Times Roman and Helvetica-like options.

Initially, Kare and Herzfeld named fonts after towns near Philadelphia, their high school area. However, Steve Jobs, upon seeing them, insisted on "world-class cities," leading to names like New York and Geneva.

MacPaint and Animated Control Panels

Kare collaborated with Bill Atkinson, the programmer who wrote MacPaint, on icons and patterns. Atkinson also developed an early scanner, which allowed them to incorporate images like a geisha from a woodcut owned by Steve Jobs. They created an animated control panel to communicate settings changes and choices without using text, aiming for international accessibility.

The Icon Editor: A Marvel of Its Time

Kare highlighted the icon editor written by Andy Herzfeld, which allowed her to toggle bits and see both an enlarged image and the 72 dpi icon. Despite lacking modern features like undo or shape tools, it was revolutionary for its time, automatically generating hex code for icons. She even created 32x32 pixel portraits of colleagues and later, celebrities like Fel Williams and Ashton Kutcher, demonstrating the surprising detail achievable with a thousand dots.

The Happy Mac and the Bomb Icon

One of Kare's first assignments was to create an image for the computer's boot-up sequence, given the limited 128K memory. She designed the "Happy Mac," a smiling face, to convey that everything was okay. This design was inspired by the idea that simple, less detailed faces allow everyone to project themselves onto them, making them more universal.

However, she also designed an "unhappy Macintosh" for system errors and a "bomb" icon for total system failure, believing no one would ever see them. To her surprise, people did encounter the bomb icon, leading to a memorable incident where a user called Apple, worried her computer would explode. This experience underscored the importance of iteration in design.

Metaphors and Product Design

Kare discussed the evolution of icons for applications like MacPaint, which represented a "verb and a noun" system. She also designed an abstract "crop" icon for alerts, avoiding gender or age specifics. The watch cursor replaced the hourglass, reflecting a more modern approach.

She acknowledged a design "trap" with the print icon, which depicted a specific printer model. This led to the realization that icons should use metaphors rather than specific product designs to ensure longevity, as seen with the three-and-a-half-inch floppy disk icon for "save."

The Command Key: From Apple Farm to Feature

The original plan for keyboard shortcuts involved an "Apple key," but Steve Jobs objected, calling it an "Apple farm" and insisting on respecting the Apple logo's preciousness. Kare was then tasked with designing a "command" or "feature" key. After researching, she found a symbol in a book that resembled a four-leaf clover and a cloverleaf highway, which she adopted. This symbol, still on keyboards today, was later discovered to be derived from the 1200 AD Borgolm Castle in Sweden, representing a castle with four turrets.

Historical Precedents and Emojis

Kare noted that symbol design has a long history, referencing hieroglyphics and ancient bitmap fonts. She humorously suggested that the 1984 Macintosh had "emojis" before texting, allowing combinations of pictures and text. She emphasized that the true essence of the project was the metaphor, idea, and meaning behind the graphics, not just the grid of pixels.

Post-Apple Work: Microsoft, General Magic, and Facebook

After Apple, Kare worked on Windows 3.0 for Microsoft, appreciating the addition of 16 colors, which allowed for better differentiation and alerts. She designed dithered patterns to make the colors appear more subtle. She also created icons for the popular Solitaire game.

For General Magic, she designed a logo and a desktop metaphor that was more literal, featuring hallways and doors, though she admitted some elements like "jars of text" were questionable. This project aimed to help users remember where things were by logical placement.

She worked on a project for Facebook where users could buy and send digital images for a dollar. She learned that "cute trumped everything," with teddy bears, heart shapes, and especially the kiss mark being bestsellers. Penguins were also consistently popular.

Pinterest, Logos, and Avatars

Kare designed icons for Pinterest, incorporating subtle motion to avoid irritation. She also created logos for various companies, including a "trash panda" for a stealth mill.com and pixelated icons for Amtrak's magazine. She enjoyed designing logos and avatars, finding avatars particularly freeing due to their versatility. She also designed retro-looking badges for a Ledger crypto wallet and a logo for a VC firm encouraging outdoor work.

Advice from Influential Figures

Kare shared valuable advice she received throughout her career:

• Paul Rand: Focus on making things meaningful and memorable. Have a good idea, and the form will follow. He also advised against using too many fonts, emphasizing knowing how to use them well. When designing logos, he advocated for incorporating the product's name into the design, as seen with his IBM and UPS logos. He famously charged Steve Jobs $100,000 for one logo for NeXT, stating, "I will do one logo and you will like it."
• Paul Safo (Futurist): "Everything takes longer than you think."
• Kare's Father: "No is just the beginning of the negotiation." and "It's not going to get any better than this."
• Daniel Nord (Architect): "Make it visual." or "Show, don't tell."
• Jean Pigozzi (Collector): "Don't be afraid to be a beginner." and "Don't be afraid to be a tourist."
• Alan Kay (Computer Scientist): "The best way to predict the future is to invent it." He also expressed surprise at how good proportionally spaced fonts looked.
• Steve Jobs: While he gave some questionable advice (like not buying Apple stock and suggesting she wouldn't make much money "twiddling bits"), he also emphasized the importance of appreciating the present and setting ambitious goals. He famously put up three goals at an offsite, leading to the "pirates" flying a skull and crossbones flag. He also advised showing multiple options to avoid outright rejection.
• Kare's Mother: "If you don't like it, you can always change it."
• Evan Sharp (Pinterest Co-founder): "Don't be afraid to be a beginner."
• Dennis Wang (Google): Don't mess with a logo until it's so well-known that you can play with it.
• A Friend's Dad: "It's not what you know, it's who you know."
• Yogi Berra: "When you come to a fork in the road, take it."

Kare concluded by expressing gratitude to Y Combinator and the event, feeling envious of the participants.