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).
Last active
September 25, 2017 22:03
-
-
Save maartenzam/ec47f50a9f16747a4ea77d565d38d613 to your computer and use it in GitHub Desktop.
Spark: the font for sparklines
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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