Technology

The world’s first code-free sparkline typeface

The Client: After the flood

Displaying charts in text without having to use code

Data can be hard to grasp – visualising it can make comprehension faster. Sparklines (tiny charts in text, like this: 123{10,20,30,40,50,60,70,80,90,100}789) are a useful tool but creating them for the web has always required code. Removing the need for code makes it more accessible. If you can use type, you can use Spark.

 
 

Generalist users want a way in. The trouble with headlines is that they are often text-only. The actual visual evidence is data, which is never included in the headline. The evidence point is always relegated to a click away, making the assertion in the headline less convincing.

AtF Spark is a font that allows for the combination of text and visual data to show an idea and evidence in one headline. This builds on the principle of Sparklines defined by Edward Tufte and makes them easier to use. Sparklines are currently available as plugins or javascript elements. By installing the Spark font you can use them immediately without the need for custom code.

 
Image
 

How it works

To use Spark all you need is a font file, some text, and an application that can make use of OpenType Contextual Alternates, e.g., a new-ish web browser, Microsoft Word, Adobe Illustrator. 

Spark data needs to be formatted as comma-separated values, with curly brackets at both ends of the set, e.g., {30,60,90}. You can also have numbers at the beginning and end of the set, which are useful for providing the start and end points, e.g., 123{30,60,90}456 – Spark has numerals built in.

With your data in the correct format, all you need to do is change the font and voilà, our example of 123{30,60,90}456 becomes 123{30,60,90}456.

 
 

What it looks like in practice

Mauricio Pochettino has lead Spurs on their best run 8TH{4,1,5,6,1,5,4,2,3,4,2,5,4,2,5,7,3,5,8,7,7,7,8,9}2ND in 24 years of the Premier League

Alibaba stock is at 5 yr high 93.89{40,27,69,58,44,42,52,39,27,8,40,45,33,37,24,20,30,36,36,29,40,60,50,40,50,63,87,100}152.11 as of July 2017 

The FTSE100 Brexit bounce 5562{4,27,48,37,60,40,56,54,59,62,37,63,30,59,75,68,50,40,47,30,5,9,50,74,59,75,100,92}7501 continues one year on from the vote last summer

 
 

Get AtF Spark on Github

We think that creative minds will find many more uses for Spark and, like any technology, it is designed to be built upon and to get better through iteration. You can grab the source code and font files on Github.

This page’s lead image redraws content from Edward Tufte's Beautiful Evidence in Atf Spark. More on sparklines here.

 

Would you like to know more?

Get in touch