Fonts for Graphs - Evergreen Data

• Read original article here

If you aren’t a font nerd, this post is for you. If you like discussing the differences between Helvetica and Arial over cortados, this post is also for you.

When it comes to your graphs, you need a condensed font.

Because we just don’t get a lot of real estate in graphs for words – the whole idea is that the visuals take up most of the space. And when space is at a premium, you’ve gotta get as efficient as an Ikea bedroom set.

Your usual suspects – Arial, Calibri – totally not condensed. In fact, they’re kinda wide.

Check out this chart, set in Arial. Find an o, like in housing.

See how it looks like it’s almost a perfect circle? That’s your clue that this is a wide font.

And because the font is so wide, the title is flowing onto the third line and we have a category label wrapping onto a second line (and centering). It’s meh.

Compare that to the same graph set in Franklin Gothic Med Cond.

Check an o. See how it looks more like a tall oval? That’s your clue it’s condensed. Some fonts just look that way. Others, like this one, have Cond or Condensed or Narrow in the title.

The condensed font makes better use of the space without getting too cramped that the words become hard to read. The title is on two lines and the misbehaving category labels is cooperating now.

Let’s add a lesson, especially if you aren’t a font nerd. Franklin Gothic Med Cond is a sans serif font. Look at a P. See how the stick just stops at the end? Sans serif means “no little feet” so the letters just cut off.

If you think about a typical newspaper font like Times New Roman, it’s a serif – it has little feet.

The font used in this blog post, like on these words you’re reading right now, is a sans serif. No little feet.

Here’s the same graph in Bernard MT Condensed. It’s a serif. Look at the P. See the feet?

How can you miss the feet? LOL. Serif fonts add too much noise to a data visualization, even if they are condensed. Stick with condensed sans serifs.

The need for condensed fonts becomes even clearer when we try out other chart types. Like this dot plot, where the labels sit inside the circles.

This chart is set in Gotham Condensed. Two line title. Labels fitting nicely in those dots.

Here’s the same chart in Gotham Book – a cousin.

Gotham Book is so wide the title is on three lines. And the percentages were so large (I didn’t change the actual font size in any of these) that I had to manually increase the dot size to compensate.

The plot area where the dots are located got so scrunched because the category labels needed more room that the x-axis scale reset itself, too. Notice how the 27% dot is sitting more in the middle of its line rather than on the right side like in the condensed version of this chart.

The dots need more space, so the text has to take up less.

Condensed fonts are the way to go.