Tall Things in FF Chartwell Vertical Bars

Let’s start the first of our seven-part series on making charts with type—with a closer look at FF Chartwell’s Vertical Bars. Bar charts are best for comparing a few data points along a single axis. In today’s examples we explore the heights of tall things and the depths of profound things.

Tall things

After coming up with a list of values, just do a little long division to get the numbers you need. Here I divide the height of the items by the height of the tallest item. Translate those percentages to integers between 0 and 100 and put plus signs in between, then choose Set 1 from the OpenType Stylistic Sets menu.

Setting the colors can be slightly tricky. One InDesign tip Jens Kutílek shares in his how-to video is to set the colors in the Story editor. This saves you from all the back and forth of enabling and disabling stylistics sets. Because FF Chartwell is type, you can simply track your vertical bars tighter or looser. I’ve left them at their default tracking values here. And it’s that simple to create great looking bar charts.

Profound things

Look for another edition of our FF Chartwell series here next Monday.


  1. Posted July 18, 2012 at 10:19 AM | Permalink

    I am in love with Chartwell and all the new ways of interaction that we will have with data that is constantly changing during the design process. Unfortunately my first project was using Keynote, and it simply does not work.

  2. Posted October 25, 2012 at 5:45 AM | Permalink

    How will I be able to make similar stylistic sets for the web version?

  3. Posted October 25, 2012 at 4:07 PM | Permalink

    Great question Anna! Since browser support isn’t widespread for advanced OpenType features, FF Charwell Web doesn’t use stylistic sets. Instead it comes with a JavaScript file to handle the character substitutions. See the live demo here: https://www.fontfont.com/how-to-use-ff-chartwell#chartwell-web

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s