How to: use the AtF Spark font to create charts with just text

5 min readOct 21, 2017

This was first published on the Online Journalism Blog

AtF Spark is “a typeface for creating sparklines in text”. In other words, the fonts will convert numbers into something that looks like a chart. It looks pretty cool, and is a neat way to add a little spark (ahem) to your text.

But while the GitHub repo gives some basic instruction on using the fonts, it also assumes quite a bit of prior knowledge, so here’s a tutorial to explain how to use it if you’re not already familiar with web fonts and other technicalities of web design.

Breaking down the elements

To create a webpage with an AtF Spark chart you need the following ingredients:

A HTML page. Specifically, we need to make sure that part of the HTML includes some numbers that the font can work with.
A CSS file (style sheet). The CSS file is what ‘styles’ part of the HTML into the AtF Spark font.
The AtF Spark font. This needs to be downloaded from the Spark GitHub repo’s ‘Output/Webfonts’ folder and stored in the same place as the CSS file.
Links between all three: the HTML file needs to link to the CSS style sheet file, and the CSS style sheet needs to link to the font file.

Creating the HTML page

Let’s make the HTML page first. I’ve created mine using the text editor Atom, and saved it as ‘index.html’.

What HTML you put in the page doesn’t really matter — but you must have a section that is going to be turned into the chart, and a link to a stylesheet.

The chart section needs to include a series of numbers separated by commas, inside curly brackets, like so:

<span class="barchart">4 {4,0,0,0,6,29,70} 70</span>

Note that there should be no spaces after the commas, and all numbers must be between 0 and 100 (for the bar chart font), otherwise it won’t work.

The example above also has a <span> tag with a class attribute. This means we can target, or rather select, the text inside with a style sheet, in the second step.

To do that, we need to make sure that there is a link to that style sheet. Here it is, inside the <head> tags:

<link rel="stylesheet" href="css/style.css">

But where is that stylesheet? We’ll need to create it, in a minute.

The full HTML for a page including the numbers, and a link to the stylesheet we’re about to create, is below:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Spark font example</title>
      <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <p>There were 70 Airprox reports involving drones coming close to aircraft over the UK in 2016 - compared to 29 in 2015 and just 6 in 2014. There were no incidents at all between 2011 and 2013: <span class="barchart">4 {4,0,0,0,6,29,70} 7</span>. There have been 33 incidents up to May 2017. </p>
  <p>That chart above is created using the font Spark: each bar of the chart is actually a number.</p>
  <p> The font to turn it into a chart needs to be stored in the same place as the CSS file.</p>
</body>
</html>

Creating the stylesheet

Next we need to create the stylesheet that we’ve just linked to.

The link said <link rel="stylesheet" href="css/style.css"> so this file needs to be called ‘style.css’ (again, I created mine using Atom), and it needs to be in the same place as your ‘index.html’ file, inside a folder called ‘css’. (You could put it elsewhere, and/or call it anything else, as long as you change the link accordingly)

Bringing fonts into a stylesheet

To use this font in the webpage we need to add a line at the top of the CSS file:

@font-face {
  font-family: spark;
  src: url(spark-bar-medium.woff);
}

The @font-face rule, as one explainer puts it: “allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.”

Anything in curly brackets after @font-face specifies the parameters of how that font is loaded.

First, font-family: names the font for our stylesheet’s purposes. This name can then be used elsewhere to refer to it. In this case we’ve named it spark.

Second, src: specifies where the font should be loaded from. In this case, it also uses url() and then inside those brackets, the location of the file.

As it happens, this doesn’t look like a URL — but if you imagine this webpage on the web, it simply means it’s going to look for a file with that name in the same location (on the server) as the webpage.

Where is this file? We’ll come on to that in a minute.

First, we need to add another rule which applies this font to the span created earlier. Here it is:

span.barchart {
    font-family: spark;
  font-size: 24px;
  color: orange;
}

This span.barchart selector targets, or selects, anything with the HTML tag <span> and the class attribute ="barchart" (the period . here means ‘class’). Remember that the number series we created earlier is in exactly such a tag.

Then we specify three rules about how anything selected in this way should be styled. The first is font-family: spark;. This is where that font – named ‘spark’ earlier – is applied.

The next two lines add a font size and colour, too, but these are not essential. I just like orange bar charts.

The full CSS file, then, looks like this (it includes some extra lines that aren’t essential but add a bit of browser-proofing):

@font-face {
  font-family: spark;
  src: url(spark-bar-medium.woff);
  font-variant-ligatures: contextual;
  -moz-font-feature-settings: "calt";
  -webkit-font-feature-settings: "calt";
  font-feature-settings: "calt";
}span.barchart {
  font-family: spark;
  font-size: 24px;
  color: orange;
}

Finally, download the font file to the same place as the CSS file

The AtF Spark font can be downloaded from the GitHub repo’s ‘Output/Webfonts’ folder. At the moment there are 6 folders in there: 3 bar chart options (medium, narrow and thin), 2 dot charts (medium and small), and 1 dot line (medium).

You can see some examples of the different chart types in action on the Spark page on the After The Flood website.

Click on the folder for the chart/font you want to use, and you should see 5 files in that folder.

These are 5 different formats. We’ve used the ‘.woff’ format, so click on that version, and you should be taken to a page which doesn’t look like much (GitHub cannot show it in any way, so just shows a grey box instead). Click Download to download this file to your computer.

Once downloaded, move the file to the same folder as the CSS file.

Now that link in the CSS file should work. And the link in the HTML file pointing to the CSS file means that styles in that sheet should now be applied to the HTML. If you load or refresh the HTML page you should now see the effect.

For more examples you can find a webpage and stylesheets in the ‘/docs’ folder of my ‘using-spark’ GitHub repo, which also generates a website at https://paulbradshaw.github.io/using-spark/

Note: At the moment the fonts are “compatible with Microsoft Word (2011 and later), Adobe Creative Cloud applications, Chrome 33+, Safari 6+, Firefox 4+, and Internet Explorer 10+. (See: http://stateofwebtype.com/ for a fuller listing of browser compatibility.)”