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

Breaking down the elements

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

  1. A HTML page. Specifically, we need to make sure that part of the HTML includes some numbers that the font can work with.
  2. A CSS file (style sheet). The CSS file is what ‘styles’ part of the HTML into the AtF Spark font.
  3. 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.
  4. 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’.

<!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.

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);
}
span.barchart {
font-family: spark;
font-size: 24px;
color: orange;
}
@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).

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Paul Bradshaw

Paul Bradshaw

Write the @ojblog. I run the MA in Data Journalism and the MA in Multiplatform and Mobile Journalism @bcujournalism and wrote @ojhandbook #scrapingforjournos