Features:

Our Font Is Made of People

How we made Wee People, a silhouette font that’s free for you to use


(Alberto Cairo, Wee People)

Earlier this week, ProPublica released their second font, Wee People, a free collection of human silhouettes. We love fonts and (tiny people and small multiples and wanted to know more, including the path from data viz expert Alberto Cairo’s original illustrations through to the font as it was released. We checked in with Cairo and ProPublica’s Scott Klein, who put the font together, about how they got it done.

Alberto Cairo and Scott Klein on the Making of Wee People

Source: This is so great! How did you make it, and how did your collaboration work?

Scott Klein: Back in 2014, Alberto Cairo spent the summer working on our team, doing research for his dissertation (which has since been published). While he was here he functioned as a full member of the department. He was part of story meetings, helped develop some interactives, and even drew some illustrations for a story about physical restraints used in schools.

While Alberto was working on those illustrations and wowing us all with how quickly he could turn a photo into a silhouette, another person on the team was building a graphic that represented groups of people as dots. We all loved the Washington Post’s “Eye for an Eye” graphic about the death penalty and wanted to borrow the idea of representing people with, well, people.

We sheepishly asked Alberto if it would be too much to ask for him to draw a few dozen silhouettes for the idea. He laughed and said he could do it in a few hours. We asked some people for full-body photos of themselves and took a bunch of candid photos of people around the office, which Alberto very quickly turned into silhouettes.

The idea of turning them all into a font came from our experience making StateFace, a typeface made of shapes of U.S. states, which we still use as a webfont when we build a graphic that uses a little state shape as a design element. Webfonts are a simple, foolproof way to use lots of little illustrations in a graphic programmatically. I was able to move Alberto’s silhouettes from Illustrator into a font-making program called Glyphs Mini very quickly.

We did the whole project in a day or two. We didn’t end up using them in the graphic we were making, so there everything stood for three and a half years! It kind of hung out as a private repo in GitHub waiting for a project—until this year, when Lena Groeger was able to make great use of it for a graphical story she designed about job promises made by President Trump.

Alberto Cairo: A few years ago I spent some time at ProPublica doing an observation… I spent one month working with them and I couldn’t do any interactive work because I’m not a coder. The purpose of staying with them was to observe them, but I wanted to help a little bit with some projects. So I was involved in things that I could do, such as doing illustrations for some projects. I did, for example, illustrations for a project about how teachers in schools restrain children and how the techniques that they use can be dangerous for the health of those children.

Scott had the idea of doing this font based on silhouettes.

Source: I love that you included figures based on real people—how did you make that decision?

AC: The decision was made because I am not a great artist, so I don’t know how to draw out of memory. I mean I can draw a person out of memory but it would look a little bit cartoony. So it’s much easier for me to shoot a photograph of someone, make that person pose, and then trace the silhouette over the photograph. So we made the entire ProPublica newsroom pose in front of a camera. We shot pictures of each one of them and then I traced them in Adobe Illustrator using the pen tool.

Did you encounter any weird/interesting design or tech challenges or snags along the way?

SK: We did need to solve a few design problems. We wanted to fill all the upper and lowercase letters, to make it robust and foolproof, but we had fewer volunteers than that. So there are some people whose images are in the font twice, with some silhouettes altered slightly—given longer hair, pose changed a little, etc.

Making a font out of a bunch of Illustrator images is dead easy. Mostly copying and pasting, making sure the figures share a common scale and changing the bounds of each “letter” so the wee images don’t bump into each other. I’m no expert on using font software and I was able to figure it all out pretty quickly.

AC: The challenge was to find enough variety of heights and body shapes and different kinds of people, and poses—interesting poses rather than have everyone pose in the same pose. Try to make it a little more fun, a little bit more varied, a little bit more dynamic. You will see some that are a little bit strange or quirky.

Source: Are you planning on designing any additional characters? I’m thinking particularly of projects where you might want to represent people of different ages (like the Washington Post’s mass murders database) or abilities, like people who use mobility aids, but there are probably other things I’m not thinking about!

SK: We made this for a super narrow purpose, which was to represent generic adults in a news graphic. We haven’t needed children, so they aren’t in the font. We haven’t needed people in different cultural contexts, or people doing things other than standing. But you (and Andrew Losowsky on Twitter) raised a great point about people using mobility aids. We added a person in a wheelchair this week. It’s the lowercase “t.”

The font is on GitHub, including the Glyphs source file. Anybody is free to send a pull request with new characters. Even if they don’t have Glyphs, if people send a pull request that includes illustrator files with silhouettes as good as Alberto made we would be very open-minded about adding more characters.

AC: I would love to have time to be able to do more work, but at the moment I can’t. But, sure, if ProPublica at some point wants to expand on the font. Perhaps lowercase could be children and uppercase could be adults. At some point perhaps in the future I may be able to draw more illustrations, or someone else can get involved. Drawing these kinds of silhouettes is something that any halfway talented designer can do—it’s not magic, it’s not hard. You just need a series of photographs of people you can trace on.

Source: Do you have any hopes about how people will use the font?

SK: Just as with Stateface, I’ll be shocked and delighted when I see how my colleagues in other newsrooms use it. We’ll keep a list of uses we see in the readme file in the GitHub repo. People shouldn’t be shy about sending us examples of them using it—or ideas and problems of course—via GitHub issues.

AC: I hope that people will go really creative with the uses of the tool. I would encourage people to use the font, and yes, download it and start playing with it to see what they can come up with.

Source: Who are the people in each letter?

SK: I’m the capital S.

If people who posed for silhouettes recognize themselves and want to tell people, that’s fine, but I don’t plan to publish a list.

I should note that Alberto made full illustrations of a few people who posed as well. Some are still using them as their Twitter avatars!

Source: Anything else we should know?

AC: The project was a lot of fun because I was drawing it, and I tweeted it, and people started asking for portraits. And some people, not ProPublica people but people from the outside, sent me their photographs so I could draw silhouettes of them. I drew portraits, not just silhouettes but actual portraits, black and white line art portraits of some people at ProPublica as well. … But the purpose was originally to do these typographies.

People

Credits

  • Alberto Cairo

    Alberto Cairo is the Knight Chair in Visual Journalism at the University of Miami. He’s also the director of the visualization program at UM’s Center for Computational Science. Cairo has been a director of infographics and multimedia at news publications in Spain (El Mundo, 2000-2005) and Brazil (Editora Globo, 2010-2012,) and a professor at the University of North Carolina-Chapel Hill. Besides teaching at UM, he works as a freelancer and consultant for companies such as Google and Microsoft. He’s the author of the books The Functional Art: An Introduction to Information Graphics and Visualization (2012) and The Truthful Art: Data, Charts, and Maps for Communication.

  • Scott Klein

    Scott directs a team of journalist/programmers building large interactive software projects that tell journalistic stories, and that make complex national statistics relevant to readers and their communities. Scott is also co-founder of DocumentCloud, a two-time recipient of the Knight News Challenge. DocumentCloud is a service that helps news organizations search, manage and present their source documents.

Recently

Current page