Calling Card

Hypothesis

If a portfolio hands recruiters something good-looking and easy to pass along, more of them will pass it along than would forward a plain link. A card that looks designed also shows the work: it's a small piece of typography and interaction design that travels on its own.

I don't track saves or shares, so for now the signal is simple: whether hiring managers mention the card when they get in touch.

Where it came from

The card started as the last step of Carbon Type Pairings, a way to take a favorite pairing home from the test page. It was fun enough that it moved to the homepage, under the case studies, where the people it's for will actually see it. On the type pairing page it still follows whichever pairing you apply.

Design decisions

• Pick a line, never type one. The card carries my name, so visitors choose from lines I wrote or chose. Nothing can appear under my name that I didn't put there.
• Credit every quote, in the right place. A quote sits in quotation marks with its credit where my role usually goes, so a quote is never read as mine and my title is never read as theirs. I only used quotes I could trace to a named source.
• Share leads on phones, Save leads on computers. On a phone, a plain download lands in the Files app, where most people never look. The share sheet can send the card in a message or save it to Photos, so it's the main button there.
• Colors from the system, checked for contrast. Bold tones come from the site; soft tones are Carbon's tag colors, each family's grade 20 with darker grades of the same family for text. Every text color passes 4.5:1. The first Blue card didn't, so its small text became white.
• Nothing is sent or stored. The card is drawn in the visitor's browser. There is no server, no email capture and no account.
• A little motion to catch the eye. On the homepage a Lab beaker bubbles beside the heading, and "Know someone who's hiring?" leads in bold for the skimming recruiter. The bubbles stay still for visitors who turn motion off.

Quote sources

• Ellen Lupton, Thinking with Type: "Typography is what language looks like."
• Jared Spool, UX researcher: "Design is the rendering of intent."
• Dieter Rams, Ten principles for good design: "Good design is as little design as possible."
• Steve Jobs, The New York Times, 2003: "It's not just what it looks like and feels like. Design is how it works."
• Beatrice Warde, typographer, 1930: "Printing should be invisible."
• Steve Krug, Don't Make Me Think: "Don't make me think."

How it works

The preview is HTML sized in container units, so it scales exactly like the 1080 by 1350 image. When you save or share, the same layout is drawn on a canvas: the line is fitted at the largest size that wraps inside the card, then exported as a PNG. Share hands that file to the Web Share API, which opens the phone's own share sheet. Browsers that can't share files hide the button.

What I'd try next

Give every combination its own link with the card as its preview image, so a pasted link shows the card in LinkedIn, Slack or iMessage and opens my site when tapped. It would still be static files with no server, and it's the next step if people use the card.