advertisement
advertisement
advertisement

This Font Makes Graphics Out Of Numbers In Seconds

Inspired by Edward Tufte’s “sparklines,” the typeface turns typed numerals into inline data visualizations.

This Font Makes Graphics Out Of Numbers In Seconds

Data is always more accurate and informative in context. Take Hurricane Harvey, for example. Some parts of Houston had more than 50 inches of rain. But it’s hard to understand just how crazy that is unless you compare it to rainfall patterns over time–and it’s tough to give that kind of context through numbers or written words in a news story. Ideally, you’d show it in a large graphic, but that requires extra time and graphic expertise that isn’t always available.

advertisement

But what if it was easy to embed that graphic context right into sentences themselves? That’s what sparklines do. Invented by the legendary statistician and data visualization expert Edward Tufte, sparklines are tiny graphics that fit right into a textual sentence to provide that context of how a number has changed over time. Instead of a list of numbers, readers get a visual representation of change over time: context.

After Tufte used the term “sparkline” in his influential book Beautiful Evidence, they’ve begun to pop up in the wild; You’ve probably seen them in financial publications to show how a stock price has modulated. But despite their usefulness, these little graphs take time and technical expertise to create. They require coding, and are available only as plugins or JavaScript elements–making them inaccessible for many people.

[Image: courtesy After the Flood]
The London design studio After the Flood has an incredibly simple solution to the problem of making sparklines: turn them into a font. You just type the numbers you want, change that section of text to the studio’s new font, AtF Spark, and it magically transforms into a little in-line graph.

To use AtF Spark, you enclose a series of numbers with curly brackets and add the starting and ending numbers outside the brackets (for example, 123{10,20,30,40,50,60,70,80,90,100}789). The font automatically turns this into a graph, with options for bar graphs, line graphs, and dot graphs, which you can download for free on After the Flood’s website.

[Image: courtesy After the Flood]
Max Gadney, the founder of After the Flood, says that AtF Spark was designed so that sparklines could fit within headlines–and give us a shot of data context even when we’re skimming an article. “One way to grab attention is to show the evidence there and then, not a click away,” Gadney tells Co.Design in an email. “But it is hard to show visual evidence in a headline as this needs to be a graphic or code and so not possible to embed in a feed. In a blog post, yes, but not in the headline. So we made Spark to fit in headlines, smuggled in as a font, rather than graphics or code.”

In reality, AtF Spark is more than just a font–it’s an entirely new user interface for the web. It creates UI that lets anyone, from reporters to editors to students and anyone who writes, include data viz in their work without having to learn how to code or make graphics. That means you can create data visualizations effortlessly, with nothing but the tools you already use to type.

The ease of use AtF Spark affords could be a boon for journalists and data designers. Most newsrooms don’t require journalists to be able to make their own graphics; there’s usually a graphics team that does that for them. That necessitates a higher bar for creating a graphic. But with AtF Spark, there’s no reason to not include more in-line visualizations, whether it’s in a news story or a design brief. While sparklines don’t take the place of larger graphics, they do provide instant visual context for anyone to use.

advertisement

Now that anyone can make a data viz as simply as they’d choose between Times New Roman and Courier, there’s no excuse for dropping numbers out of context.

About the author

Katharine Schwab is a contributing writer at Co.Design based in New York who covers technology, design, and culture. Follow her on Twitter @kschwabable.

More