FF Chartwell is a set of three fonts* that together create a remarkable set of tools for creating bar, line, and pie charts. It uses OpenType ligatures to perform its magic – a series of numbers can be transformed into clean, perfectly rendered graphs, as you type.
In use, the fonts are pretty straightforward, and though it’s an overused phrase, it does feel rather magical: you type numbers, it creates graphics. The formatting for all three fonts is to type the numbers as a sum, with the numbers separated by plus symbols: 20+40+10+30 for example. The fonts have a set of basic numbers and letters (resembling a compressed Trade Gothic) you can use with ligatures turned off to type in and check your numbers. Turning the ligatures on transforms your numbers into charts, and demonstrates just how many glyphs these fonts contain – up to 10,000 in each style.
Each of the fonts has a set of specific features and capabilities. Chartwell Lines creates sparkline-style graphs, while Chartwell Bars creates stacked bar charts. It’s Chartwell Pies that most feels like magic though. Like the other two, it works in whole number increments, from 1–100, but what’s interesting is what happens when you go over 100. Anything up to 100 and you get a single pie chart, go over 100 and the remainder starts a new pie chart, and again at 200, 300, and so on. Magic! Seeing a font interpret your numbers to create graphics like that is pretty remarkable. With Chartwell Pies you can also add a letter to the end of your sum to transform the pie into a ring – ‘A’ for a small hole in the pie, ‘Z’ to transform it into a hairline circular chart.
For all three fonts, you can set each number in a different color and it’ll be reflected in the chart.
Chartwell is the first in a new category of fonts that use ligatures to transform text into graphical representations while leaving the text itself untouched. In terms of a milestone it’s similar to the move from expert fonts to incorporating standard ligatures and swashes into the one font file that OpenType first enabled. The methodology does require you to type in a particular format which slightly limits its flexibility, but the promise is clear: the potential to transform data into graphical forms without losing the original text. It’ll be useful in all areas of publishing, if only to relieve the chore of creating basic graphics. For the web, however, it could be transformative: instead of icons and other indicators as bitmap pictures, they’re glyphs, stored in the right unicode slots, and selected as ligatures for particular words or abbreviations.
* Update: Chartwell was initially self-released by Travis Kochel. In May 2012, the package was reissued as a FontFont with the addition of four new chart styles: Radar, Rings, Rose, and Vertical.
I really like Chartwell and have used it for editorial design. I’m impressed by its ingenuity and excited by what it may inspire others to do. But I feel any review must address the relationship between the font sizes of a number set and the resultant graphic.
As shown in TK Type’s own examples, the translation from numbers to graphic wants a near doubling in size, at least. For example, their image for Chartwell pies shows the data at 48 pts but the rings at 325 pts.
Within InDesign, this creates some less than ideal workflows, mostly related to text frame sizes while toggling between previewing and editing. Converting to outlines — which neatly maintains the chart’s quadrants — is the quickest way to add color and accurately shift scale, and to avoid the back and forth. However, in the editorial world where fact checking brings last minute changes, you end up with a fair amount of reverse engineering.
My intention is not to damn the typeface. (Had Aegir not got to it first, I would have gladly picked it!) This is but one practical concern. After all, it’s up to us to do more than look at specimens.
First off, thank you for the very humbling review. It’s a great honor to be a part of this selection!
André definitely has a valid point, and I certainly haven’t intentionally tried to hide this drawback.
However, one possible InDesign solution is to make use of the Story Editor. This brings up a dialog box showing the unformatted textbox contents, allowing you to edit styles and copy in a neutral environment.
Lynda.com has created a great video tutorial on Chartwell, showing some possible workflows. The Story Editor can be found at the 2:00 mark.
Another solution they offer involves setting up character/paragraph styles. One with ligatures off and smaller. Another with ligatures activated and the appropriate styling. You can set nested styles, which allow you to change the color after each ‘+’ appropriately if desired.
I realize these aren’t ideal solutions, but hopefully they help.
This is just plain brilliant. Bravo. Rarely do I feel such an urge to spend money!
Travis,
Those are great tips. Though InDesign can feel overwrought at times, a simple feature like Story Editor can go a long way. And it’s good to be reminded that stylesheets, with a little effort, can work together and be more than parts of a template.
These are gorgeous. Has anyone used them yet?
I’m very happy with the Chartwell font but I found a dissapointing shortcoming.
Why is the range of Chartwell Lines only 0–100?
A line graph is hardly used for percentages, so why isn’t the range endless?
A solution could be scaling down the numbers, but the font also doesn’t support commas.
Is there a useful solution?
Freek: Because all the possible elements of the graphs have to be included in the font (real math is not possible in a font file), the number of elements has to be limited. 100 is a number which makes sense ;)
So before entering the data, you have to normalize it so the maximum value doesn’t exceed 100, and round the values to integers. It’s not the most comfortable solution, but it’s necessary due to the limits of current font formats.
I love this font – I just downloaded it today. But I see one instant drawback that I can’t find a solution to:
When creating a Pie Chart which totals 100%, I cannot seem to use decimal points – this just creates new charts for the decimal point elements.
Is there any way to get around this?
Eoghan, unfortunately decimals aren’t supported. As Jens touched on above, the number of glyphs needed to cover the additional range of values isn’t possible in a font file. If your data has decimals you will have to round your data to integers ahead of time.
I recently purchased Chartwell, and like Andréa have found some issues with the font, namely the size the text boxes need to be to accomodate the charts which makes Indesign workflow really difficult.
But you can make some beautiful graphics with this font. I’m just getting into it now, so thanks Travis!
I’d also love to see the .fea of this font! Crazy!
I use this font a lot at work and it really is a very aesthetic way to present data. I mostly use it on InDesign.
However, when trying to use it on MS Word 2013, I seem to have some problems. For instance, I try to make a pie chart with values that are 100 in total and I can only see part of the pie (actually just one of the values in one color only). Any ideas? Thank you!
Despina, could you try if it works in Word 2013 when you make sure each + sign is in the same color as its preceding number? You also may have to close and open the document after this change to see the effect.
Anyone find a workaround for 0’s (zeros) in the middle of your string of numbers? For Chartwell Pies it seems to break my string into two pie charts. I need to have each slice relate back to a specific color, otherwise I’d just delete the zeros.
Chris, could you shoot me an email? I have a temporary fix. [email protected]
Hello Chris and Travis.
Did you sort a solution for the zeros in between problem?
Thanks.
Hany.
We now have an updated version of Chartwell Pies which can handle zeros. Please contact [email protected] with your order details if you would like to receive the new version.
So, by now, is there any possibility to handle numbers with decimal places? We always deal with numbers like 26,73 or 0,7 and so on.
Why must the bar chart have the tapering diamond end points? A regular rectangle (ala the vertical bars) is the norm and less numerically ambiguous.
@AaronPDX
There are two variations of the bar charts. The ‘Bars Vertical’ style will give you plain, rectangular bar charts, as seen here.
We love how this looks, we are not designers – just a group of education policy researchers. These were used in our annual reports by a design consultant and the feedback from the field is that they look ‘effortless’. As we transition to owning the reports, we are finding ourselves technologically challenged! The InDesign program we purchased refuses to recognize the fonts and our helpdesk folks are at a complete loss. Any guidance on how to resolve would be incredible!! (We have copied the files purchased from fontfont into the InDesign font folder, but that doesn’t help.) Our reports are here: http://www.achieve.org/state-profiles
This issue was resolved through email, but a note for others who come across similar problems. Two things have changed in the most recent update to Chartwell that could cause some confusion.
1. The font names have changed with the recent update of FF Chartwell, and are now grouped under ‘Chartwell’.
2. Charts are now activated with the ‘discretionary ligatures’ feature, rather than ‘stylistic sets’ and ‘stylistic alternates’.
[…] web, of course, the more type you can keep live, the more searchable and accessible your site is. Aegir Hallmundur was right to say that Chartwell inaugurated a new category of such fonts. Symbolset’s releases, for […]
I am trying to create a stacked vertical bar chart but when I put the data on 4 separate lines it creates 4 separate charts. How do I get it to stack the data into 1 vertical bar chart (like the last sample in the manual)?
Hi Travis,
My company hired a subcontractor that used a previous version of your amazing font. I’ve been making some minor tweeks to the Figma prototypes they created and needed to update the charts. I purchased a license a couple of days ago and have been trying without success to get it to work properly. Is there any way I could get the previous version or some tips as to why when I use multiple colors does the pie chart go from one pie to many pies in Figma and how I can keep this from happening? Here’s a link to what I was testing.
Hi Rebecca. I’m not familiar with how Figma embeds the fonts, but unfortunately if you’re just using the desktop version of Chartwell on the web it’s probably not going to work.
I think the extra span elements needed to surround the text to add color break the context. I think the browser reads it as ’15+5+60′, rather than just ’15+5+60′. I haven’t dug too deep on this in a while though, so maybe there’s a way around it now? Happy to discuss further in email if you want: [email protected]
Can numbers with decimal points be used in Pie Charts?
Hi Maureen. In the most recent version, it will accept decimals to one place. However it just rounds to the nearest integer.
Like Lesley from 2018, I’m also trying to create stacked bar charts and it doesn’t work as shown in the directions (having a line of #s of one color operated by + and then the next line immediately below in a different color. It just creates a whole new graph — not helpful.
What’s the trick? I’ve watched a bunch of videos, searched for instructions, and no one seems to be answering this? HELP!
Hi Sue,
Is this image helpful in clarifying how to do stacked charts? https://assets.vectrotype.com/share/Chartwell-HowToStackedBars.png
If not, can you point to exactly what you’re trying to achieve, and also which style of Chartwell you’re using? Bars, Bars Vertical, or Floating Bars Vertical? Also which directions are you referring to?
You can also email me at [email protected]
Hi Travis, your font is no longer available on fontshop.com nor Myfonts.com.
Where can I purchase the font?
You can buy it now directly from Travis’s foundry, Vectro.
How do we integrate Chartwell fonts esp pies with data merge? as in I have 300 piecharts to make and I have data in csv file (in%). I want to feed that data in indesign software and make pies, such a way that I don’t have to feed the data manually but the pie charts are generated automatically.
Thanks in advance for the guidance.