Skip to content

Instantly share code, notes, and snippets.

@maartenzam
Last active September 25, 2017 22:03
Show Gist options
  • Save maartenzam/ec47f50a9f16747a4ea77d565d38d613 to your computer and use it in GitHub Desktop.
Save maartenzam/ec47f50a9f16747a4ea77d565d38d613 to your computer and use it in GitHub Desktop.
Spark: the font for sparklines

Taking the Atf Spark font for sparklines for a spin, showing the 6 varieties (the dotline seems a bit buggy the dotline works only for numbers 1:9 for now).

Repo

Tutorial by Paul Bradshaw

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Spark font example</title>
<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded" rel="stylesheet">
<style>
@font-face {
font-family: spark-bar-medium;
src: url(https://cdn.rawgit.com/aftertheflood/spark/ec03b3fd/Output/Webfonts/Bar%20-%20medium/spark-bar-medium.woff);
font-variant-ligatures: contextual;
-moz-font-feature-settings: "calt";
-webkit-font-feature-settings: "calt";
font-feature-settings: "calt";
}
@font-face {
font-family: spark-bar-thin;
src: url(https://cdn.rawgit.com/aftertheflood/spark/ec03b3fd/Output/Webfonts/Bar%20-%20thin/spark-bar-thin.woff);
font-variant-ligatures: contextual;
-moz-font-feature-settings: "calt";
-webkit-font-feature-settings: "calt";
font-feature-settings: "calt";
}
@font-face {
font-family: spark-bar-narrow;
src: url(https://cdn.rawgit.com/aftertheflood/spark/ec03b3fd/Output/Webfonts/Bar%20-%20narrow/spark-bar-narrow.woff);
font-variant-ligatures: contextual;
-moz-font-feature-settings: "calt";
-webkit-font-feature-settings: "calt";
font-feature-settings: "calt";
}
@font-face {
font-family: spark-dot-medium;
src: url(https://cdn.rawgit.com/aftertheflood/spark/ec03b3fd/Output/Webfonts/Dots%20-%20medium/spark-dot-medium.woff);
font-variant-ligatures: contextual;
-moz-font-feature-settings: "calt";
-webkit-font-feature-settings: "calt";
font-feature-settings: "calt";
}
@font-face {
font-family: spark-dot-small;
src: url(https://cdn.rawgit.com/aftertheflood/spark/ec03b3fd/Output/Webfonts/Dots%20-%20small/spark-dot-small.woff);
font-variant-ligatures: contextual;
-moz-font-feature-settings: "calt";
-webkit-font-feature-settings: "calt";
font-feature-settings: "calt";
}
@font-face {
font-family: spark-dotline-medium;
src: url(https://cdn.rawgit.com/aftertheflood/spark/ec03b3fd/Output/Webfonts/Dotline%20-%20medium/spark-dotline-medium.woff);
font-variant-ligatures: contextual;
-moz-font-feature-settings: "calt";
-webkit-font-feature-settings: "calt";
font-feature-settings: "calt";
}
span.spark {
font-size: 24px;
color: red;
background-color: #f2f2f2;
padding-left: 3px;
padding-right: 3px;
}
span.barchart-medium {
font-family: spark-bar-medium;
}
span.barchart-narrow {
font-family: spark-bar-narrow;
}
span.barchart-thin {
font-family: spark-bar-thin;
}
span.dot-medium {
font-family: spark-dot-medium;
}
span.dot-small {
font-family: spark-dot-small;
}
span.dotline-medium {
font-family: spark-dotline-medium;
}
p, h1, h2 {
font-family: 'Encode Sans Expanded', sans-serif;
width: 700px;
margin: auto;
margin-bottom: 20px;
line-height: 200%;
}
</style>
</head>
<body>
<h1>Spark: the font for sparklines</h1>
<h2>bar-medium</h2>
<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="spark barchart-medium">4 {4,0,54,0,6,29,70} 70</span>. There have been 33 incidents up to May 2017. </p>
<h2>bar-thin</h2>
<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="spark barchart-thin">4 {4,0,54,0,6,29,70} 70</span>. There have been 33 incidents up to May 2017.</p>
<h2>bar-narrow</h2>
<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="spark barchart-narrow">4 {4,0,54,0,6,29,70} 70</span>. There have been 33 incidents up to May 2017. </p>
<h2>dot-medium</h2>
<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="spark dot-medium">4 {4,0,54,0,6,29,70} 70</span>. There have been 33 incidents up to May 2017. </p>
<h2>dot-small</h2>
<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="spark dot-small">4 {4,0,54,0,6,29,70} 70</span>. There have been 33 incidents up to May 2017.</p>
<h2>dotline-medium</h2>
<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="spark dotline-medium">4 {4,2,5,9,6,3,7} 7</span>. There have been 33 incidents up to May 2017. </p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment