I’ve created a number of example charts using FF Chartwell here.

FontFont has released Travis Kochel’s Chartwell as a web font. If you weren’t familiar with the font before, it employs a clever use of the OpenType system and has been lauded as “disruptive” and “a graphing tool for the rest of us” by blogs across the web.

For a much longer explanation take a look at Travis Kockel's post about this font.

FF Chartwell has been available for purchase for some time but its recent release in web font form exponentially increases its potential uses and audiences. While relatively straightforward to work with as a desktop font, manipulating numerical values and the design of the chart is even easier with the web font form. You just need to be able to work with simple HTML and CSS.

Instead of replacing number sets with glyphs using OpenType, FF Chartwell for the web abstracts the idea of a “font” again and renders the charts using a series of javascript libraries. FF Chartwell includes seven different stylistic sets for different chart types, some more useful than others.

Vertical Bars

The vertical bars in FF Chartwell web are straightforward and useful, though it would be nice to be able to condense the space between bars to form more of a histogram. I tried to achieve this effect by layering multiple charts in my FF Chartwell demo page. To create a bar chat with negative values I created a second graph and rotate it so it aligned correctly.

Lines

FF Chartwell Lines, though perhaps more accurately labeled as area charts, are also rendered simply. I’m not sure why you’d want to individually color each segment but the font gives you that ability. The Chartwell User Manualalso shows stacked area diagrams, though you need to layer and offset the values manually as I’ve attempted to do in the demo.

Pies

Pie charts, at their best, can only hold a few segments before they become unwieldy, but in FF Chartwell Pies you have the option to add up to 100 segments. The donut chart variation makes perception even more difficult and especially requires restraint with the number of segments used. Originally FF Chartwell Pies would create a new chart if its cumulative values exceeded 100 but on the web it seems to just overlap additional segments on top of old ones. Limiting the pie to 100 forced you to chart segments in terms of a percent and avoided any confusion with how to use a pie chart. The overlapping issue in the web font is particularly dangerous because it’s so hard to notice once it’s happened.

Horizontal Bars

Chartwell’s horizontal bars add a margin of error to the way people perceive the comparative lengths. It employs a sort of isometric or dimensional diamond design that seems to represent the need to make bar charts “pop” in a lot of infographics. Despite this trendy shape I actually think it does a good job when used to show parts of a whole (or a simple stacked bar chart, depending on how you look at it).

Rose

FF Chartwell Rose, like Florence Nightingale’s original visualization, is really best suited for visualizing cyclical data. Unfortunately it gets used a lot in infographics as a cool variation on the pie chart and I fear the visual appeal of this chart type will see it abused further in FF Chartwell.

Radar

The radar style of Chartwell also has lots of potential for misuse and is often hard to read no matter how simply it is rendered. Comparison is only really possible when radars are layered on top of each other as I’ve done in the demo. The number and visibility of axis in the radar are also important to be aware of. They're the only aid to comprehension in this graph type.

Rings

FF Chartwell Rings seems like the chart type with the least utility. This representation of data is no where near as easy to read as a simple bar chart. There are very few instances where this design enhances the dat. Because of that there’s a very small likelihood that this chart font will be used for more than decoration.

There’s no doubt that FF Chartwell breaks down a lot of the barriers for someone to create their first chart but I’d argue that their first chart probably shouldn’t use Chartwell Rose or Radar. Travis mentions that Rose, Radar and Rings are a more experimental set for Chartwell but they’re also very eye catching. Like a yo-yo that lights up and makes noise but breaks if you use it the wrong way.

I’m all for the democratization of chart creation and design but I think part of that process has to be education. What I’d propose is that a field guide or instructional manual come with the purchased fonts that explains not just how to use the chart types but why you’d use them.

Travis clearly knows a lot about graphing and visualization. All of his examples use appropriate data for the chart type chosen and it takes a passionate person to put together a tool like this. He used cyclical data for FF Chartwell Rose and even colored the first segment to indicate a starting position. But the importance of this is never communicated to the font purchaser. I’ve used the demo page to start to put together a little guide for using FF Chartwell. Leave a comment and help me improve it for the Chartwell users of the world.