Sparks – A typeface for creating sparklines in text without code

Summary

A typeface for creating sparklines in text. Get the font files here. (.zip file, 5.2MB) To quickly include the fonts in your web page you may wish to use our stylesheet which defines all the font-faces and links to the relevant files hosted on github. <link href="https://tools.aftertheflood.com/sparks/styles/font-faces.css" rel="stylesheet" /> See it working on our website or in one of our interactive notebook examples Sparks uses OpenType's contextual alternates feature to perform simple replacement operations on numbers. It works on both the desktop and the web where it works without Javascript, though it does require a modern-ish web browser that can make use of OpenType features in text. At the moment it is compatible with Microsoft Word (2010 and later), Apple Pages, 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.) There are currently three variations: bars, dots, and dot-lines (line charts with tiny dots at the joints between segments), each of which has five weight variants. All three of the variants use a fixed scale of 0–100. If your data only goes to e.g., 10, you'll need to first translate your numbers to be out of 100, otherwise you'll end up rendering an especially tiny chart. The contextual alternates feature ( calt ) is baked into OpenType and Sparks simply leverages this feature in an unconventional way. It takes strings like 123{30,60,90}456 and outputs a sparkline. The example of 123{30,60,90}456 would have with three datapoints of 30, 60, and 90 framed by 123 and 456. Spaces after the commas will prevent the numbers from being transformed. Numbers outside of the brackets are never transformed. Using Sparks On the web When using Sparks as a webfont you may wish to explicitly enable the calt feature. Contextual ligatures are enabled by default in most modern browsers but in order to support older browsers you can use the f...