Tag Archives: infographics

FF Chartwell Web Ready to Shake Up Online Infographics

Since FF Chartwell’s May release, the design world has been abuzz with accolades for its unique approach to infographic creation. With the recent FontFont release, web designers can now rejoice – FF Chartwell Web is here!

Get FF Chartwell Radar Web free!

FF Chartwell Rose Web

FF Chartwell Bars Vertical Web

FF Chartwell Lines Web

FF Chartwell Bars Web

FF Chartwell Pies Web

FF Chartwell Rings Web

Back in May we first introduced FF Chartwell’s nonconformist approach to creating charts and graphs: simply type in the numbers and let the font do the rest. Rings, rose, radar, pies, bars, lines, and vertical bar charts, all as easily styled as type, result automatically. Use FF Chartwell Web with static text or real-time data.

FontFont had to think creatively to work around the lack of OpenType support in most web browsers to keep FF Chartwell working to its users expectations. The end result is “more than just a font“:

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.

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.

Web designers can test FF Chartwell Web on the FontFont How To site’s live demo. We can’t wait to see the beautiful infographic websites that FF Chartwell is bound to inspire. Please share your creations in the comments!

Family Names in FF Chartwell Lines

FF Chartwell Lines is the sixth in our series of making charts out of type with FF Chartwell. Thinking about how foundries and type designers name their faces, I decided to pull some values from our internal data here at FontShop to see what the prevalence was by letter. For example, we have 625 type families that begin with A, and 723 that begin with B.

Taking the values for all 26 letters, I dropped these into a spreadsheet and then turned each value into a percentage of the highest value. The resulting integers were right where I needed them to be (between 0 and 100), so I put plus signs in between, set the font to FF Chartwell Lines, and enabled ‘Set 1’ from the Stylistic Sets menu within the OpenType panel. I set some colors and labels, et voilà!

But do I have to have some fancy design program to use FF Chartwell, you ask? It helps, but no. You can make charts out of type using FF Chartwell with any program that supports OpenType Stylistic Sets and Contextual Alternates. Word 2010 does. TextEdit that comes with your Mac does.

Above is a precursor image to the next and final segment of our Chartwell series on FF Chartwell pies. Read it here on Monday.

Tour de France Stages in FF Chartwell Rose

FF Chartwell Rose gives you a unique way of grouping data visually. You’ll notice that while sized differently, the rose ‘petals’ are all of equal width, which makes them ideal for demonstrating values that differ in one dimension, but remain the same in another. In this case I show 20 stages of differing lengths in the Tour de France. The stages progress one per day, and I’ve made two rose charts with 10 stages per chart.

Making the charts was really simple. I just took a list of stage lengths, normalized the values to percentages of their ceiling, and put plus signs between the resulting integers. (The values need to be between 0 and 100.) Once set in FF Chartwell Rose, I enabled ‘Set 1’ in the Stylistic Sets menu within the OpenType panel, and chose some shades of gray to represent each stage. There’s a screenshot of this panel in action in the previous FF Chartwell post.

I could have put all 20 stages into a single chart, (the maximum is 30 values per rose chart) but I opted to simplify a bit. Here’s what you get when you put all 20 in one.

The FF Chartwell series on making charts out of type continues on Monday.

The Planets in FF Chartwell Rings

FF Chartwell Rings is useful for comparing percentages of completion of a task, particularly cyclical tasks like laps around a track. My inspiration for today’s look into FF Chartwell’s ring charts was similar—planetary revolutions around the sun. Looking ‘up’ at our solar system from along our sun’s polar axis, this chart shows the planets’ relationship to the sun and to one another as they are now.

Jupiter clearly appears to be in the lead, except of course that the gravitational pull on planets nearer the sun causes their revolutions to be ten or more times that of the more distant planets.

To create the chart, I started with eight values separated by plus signs. FF Chartwell Rings accepts integer values between 0 and 100. To make the text into rings, I just enabled ‘Set 1’ in the stylistic sets menu of the OpenType panel. I chose some colors and then overlaid the chart with a copy of itself using a slightly more muted palette. Last, I reduced the values of the overlaying chart by 1, so the brighter colors could show through, and I stuck on some labels.

And here’s another view as seen from (roughly) Polaris, looking ‘down’ on our solar system. The chart is perhaps a bit misleading, since from this vantage point the planets orbit counter-clockwise. ‘Where’s Pluto,’ you ask? Sorry. Stars and planets only. You should make your own.

Have you got a fever, and the only cure is more Chartwell? You’re in luck. Today’s post is the fourth of a seven-part series, so there’s plenty to go back and read, and a new one comes out here on Monday.

Superfamilies in FF Chartwell Bars

One of the things FF Chartwell Bars does well is it shows how individual contributions add to the whole. This turned out to be a perfect way of showing the numbers involved in superfamilies, and how they added up. To start, I chose two superfamilies to visualize, Novel from Atlas Font Foundry, and FF Meta from FontFont of course, and used bars of differing length to represent individual fonts in each superfamily as they fit into a particular style or classification. You’ll have to excuse the colors, as similarly colored bars hold no relationship from one line to the next. (Maybe that would be an interesting dimension to work with.)


FF Meta

Rather than representing values as percentages, FF Chartwell Bars stacks values up to 1000, leaving plenty of room for me to use actual values. Just to make them easier to see, I multiplied all values by ten.

Novel is 54 fonts spread across five styles. Additionally, I’ve taken those 54 fonts and added them up in different ways to illustrate a few different dimensions of the superfamily.

Choose some colors (I’ve used more or less the process primaries and secondaries) and you’re done.

By way of reminder, Novel Sans Rounded is half off through the end of the week. You also may have noticed up there, FF Meta has a little-known distressed variant, FF Meta Plus Boiled. It also occurs to me that I had not even mentioned FF Meta’s vowel-free variant, FF Mt, a FontFont exclusive.

The FF Chartwell series continues on Monday. To find out how all this type-to-charts magic works, read the last one, or catch up on all previous editions here on our blog. And hey! How are you using FF Chartwell? Let us know.

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.

Travis Kochel’s FF Chartwell

Update: The series is complete! See the list below for links to each part.

When Travis Kochel submitted his plans to expand and re-release Chartwell through FontFont, we were thrilled. The degree to which the fonts constitute something completely new to the world of type is something we haven’t seen in a long time—arguably ever. FF Chartwell isn’t like other faces in that its letters and figures aren’t intended to be displayed; They only serve as placeholders for chart and graph elements. When a stylistic set is applied via OpenType, simple strings of numbers become charts.

Lots of interest and buzz and how-tos came with FF Chartwell’s release, but we at FontShop decided to make our own in-depth study of each of its seven chart fonts, and have some fun visualizing data along the way. Our FF Chartwell series starts Monday.

All seven parts of our series:

Tall things in FF Chartwell Vertical Bars

Radar Charts in FF Chartwell Radar

Superfamilies in FF Chartwell Bars

The Planets in FF Chartwell Rings

Tour de France Stages in FF Chartwell Rose

Family Names in FF Chartwell Lines