How to Use FF Chartwell

 

Introducing FF Chartwell

Designed by Travis Kochel, FF Chartwell is a fantastic typeface for creating simple graphs. Driven by the frustration of creating graphs within design applications and inspired by typefaces such as FF Beowolf and ­­FF PicLig, Travis saw an opportunity to take advantage of OpenType technology to simplify the process.

Using OpenType features, simple strings of numbers are automatically transformed into charts. The visualized data remains editable, allowing for hassle-free updates and styling.

Buy FF Chartwell 

The history of FF Chartwell

FF Chartwell (Pies, Lines, Bars) was originally released in 2011 under the TK Type foundry. In 2012, it was added to the FontFont library with the addition of four new chart styles, the Polar Series (Rose, Rings, and Radar) as well as Bars Vertical.

The Polar Series is a set of new designs, which take on the form of more experimental charts. In an effort to make the charts smarter and more dynamic, each design reacts not only to the data entered, but the number of values. In September 2012, we released FF Chartwell Web.

Step by step guide to using FF Chartwell

Primarily suitable for Adobe Creative Suite, FF Chartwell for print uses OpenType ligatures to transform strings of numbers automatically into charts. The data remains in a text box, allowing for easy updates and styling. 

It’s really simple to use; you just type a series of numbers like: ‘10+13+37+40’, turn on Stylistic Alternates or Stylistic Set 1 and a graph is automatically created.


To help get you started using FF Chartwell we’ve created this video tutorial and here are some simple steps:

ONE — Firstly always make sure the letter spacing is set to “0” (zero)

TWO — Using the values 0-100, type the values, then use “+” to combine them into one chart. If the total is above 100 a new chart will begin. Using the letters A-E, you can define the grid for Rose, Rings, and Radar. Use Bars Vertical to create sparklines and other bar graphs, and use Lines to create charts. Try layering them to create more complex diagrams.

How to use FF Chartwell: Step 2

THREE — Want to bring a bit of color to your work? Simply adjust the colors as you wish.

How to use FF Chartwell: Step 3

FOUR — Turn on Stylistic Alternates or Stylistic Set 1 and enjoy!

How to use FF Chartwell: Step 4

To see the original data all you need to do is turn off Stylistic Set or Stylistic Alternates.

User Manual

Download FF Chartwell User Manual

You will find further information in the FF Chartwell User Manual (PDF, 326 KB or Issuu).

FF Chartwell Web

We always strive to give you the best possible solution. That’s why we didn’t make it easy on ourselves when it came to creating FF Chartwell Web. The desktop publishing version of FF Chartwell already pushes the boundaries of OpenType, so when faced with the prospect of massive font file sizes (up to 47000 glyphs) and a lack of OpenType feature support in most web browsers to make FF Chartwell work on the web, we had to think creatively!

Not satisfied with simply converting the desktop fonts into web fonts we sought to transform FF Chartwell into something more than just a font.

What you get

All the chart drawing functions of FF Chartwell Web are provided as small JavaScript libraries. To create a chart you enter the values in a similar way to the desktop font and use HTML code to determine color and appearance. Try it yourself using the demo below.

Nobody likes bloated JavaScript libraries, so the JavaScript files are split into one base file and one file for each of the chart types. This way you never have to load more files than you really need. All FF Chartwell Web packages come with a demo page and example HTML code to help get you started. As with all Web FontFonts, you will also receive a WOFF and an EOT font called FF Chartwell Text Web Pro. Please note, that these only contain the alphabet part of FF Chartwell.

Please note, FF Chartwell Web does not work with Internet Explorer 8 (IE8). 

Try FF Chartwell Radar for free or Buy FF Chartwell Web

Live Demo

c 60 60 60 60

c 60 60 60 60

c 60 60 60 60

300px
400px
200px


Number of circles

1—10

Value of each circle

0—100

Grids