Playfair Pies is a symbol font. It uses the vector font files and several OpenType ligature tricks to create an accessible font to display pie charts.

Playfiar Pies is named after William Playfair. In several of his works, he introduced readers to Bar Charts, Line Charts and Pie Charts! We decided to create a font to quickly and easily generate pie charts by simply typing the value.

Back in 02013 we wrote a book about Symbol Fonts. It was a short pocket guide to embedding vector shapes into font files. The book covered how to create the vector shapes, how to create a font with those files and then how to use it onto a webpage.

The book hasn’t aged well on some fronts, but it is still relevant on others. At the time, 10+ years ago, different browsers could or couldn’t support embedded font files versus SVG. In time, SVGs won, but symbol fonts are finding their niche. SF Symbols is a gigantic symbol font used by Apple in their operating systems. It creates a consistent design language that’s scalable.

Be aware of how and when to use symbol fonts. On the web as ligatures it should be still accessible. In print, go crazy!

Year ago, for a print project with lots of bar charts, we made an early Bar Chart symbol font with ligatures for 0-100%. The major advantage was in the publishing software we kept getting updated numbers, right up to the deadline. Rather than constantly having to retype rectangle widths for 10s of hundreds of bars, we pasted in the numeric values into the text area, change the font to “Bars” and it immediately was correct.

The reason why we made it a ligature is so that you can type something like:

<style>
@font-face {
    font-family: 'PlayfairPies';
    src: url('../webfonts/PlayfairPies.eot');
    src: url('../webfonts/PlayfairPies.eot?#iefix') format('embedded-opentype'), url('../webfonts/PlayfairPies.woff') format('woff'), url('../webfonts/PlayfairPies.ttf') format('truetype')
}
.pie { font-family: PlayfairPies; }
</style>
<span class="pie">50%</span>

This allows you to be semantically correct in your HTML. Screen readers and other tools will ‘see’ the string 50% whereas the viewer will see the vector representation of a pie chart filled 50% of the way.

We use this trick in our survey software. The web survey has a small icon in the corner of the page to help readers know how close they are to completion.

The source code is available on GitHub for anyone to fork and download: https://github.com/optional-is/PlayfairCharts

The pocket guide, How to create your own Symbol Fonts is also available for free download: https://briansuda.gumroad.com/l/Creating-Symbol-Fonts