Juice's Simple Font Framework

The following is an excerpt from our three-part series: "A Guide to Creating Dashboards People Love to Use". It is chock full of best practices and practical tips for designing dashboards. This particular nugget is something we've used to great effect and wanted to make sure our readers didn't miss out simply because they were afraid of ending up on our mailing list. There is even a movie version.

We’d like to offer a simple framework for effective use of fonts in your dashboard. With a few simple decisions, you can ensure that the text on the dashboard will both look good and communicate effectively. The majority of text on the page falls into four categories:

  • Body text is clean, readable content
  • Headers separate and name major sections of your work
  • Notes describe additional things the reader should be aware of. These should fade into the background unless we call attention to them.
  • Emphasis text is what we want our reader to pay particular attention to.

The following table describes an approach for deciding how to display each of these text types. The yellow highlights indicate where you need to make decisions.

Simple Font Framework

It comes down to three basic decisions:

  • Choose size and font of the body text
  • Decide if the header is going to flip to serif or sans-serif—and whether it is going to have any style
  • Decide what to do about emphasis—color or (bold or italic)

A few things things don't fit neatly into one of the four text categories listed above, such as table headers and graph titles. We tend to use a combination of styles to handle these exceptions.

Stick to this framework and we guarantee your dashboard will look better. Take a look at this example, starting with a standard-looking Excel report without out much thought put toward the fonts: Simple Font Framework Example 1


The following version of the same report cleans up the table, chart, and fonts:

Simple Font Framework Example 2


A final version uses Georgia for the title font and brings in a new emphasis color. The result: a totally different but equally clean and readable report.

Simple Font Framework Example 3

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

8 comments | Show all comments only the last 5 are shown


November 5, 2009
Chris Gemignani said:

@derek: Good point.

@Brian/Lincoln: Microsoft's new fonts are all very nice, but I'm peeved that they came up with all those horrible C-names: Calibri, Candara, Consolas, Cambria, Constantia, and Corbel. How am I supposed to remember which is which? Poor human engineering, Microsoft dudes.

It's like naming your kids Zoe, Zoey, Zoee, Zowe, and Tsoe.


November 6, 2009
Ulrich said:

% of Total seems to be misleading. Its just %.....And instead of Total you can use "Cancers".
Rolf Hichert in his "SUCCESS-Rules" at www.hichert.com gives us some great advice in how to "format" tables and graphs.


November 6, 2009
Chris Gemignani said:

@Ulrich: Thanks for the link to Rolf Hichert. The column title is fine as is, however. The percentage is a percentage of ALL deaths in these tables. Using just "%" would give the impression that we were looking at the block-wise %.


November 12, 2009
Dan said:

If you only made LaTeX templates, textbook authors everywhere would praise your name.


November 15, 2009
Tom Hopper said:

Great make-overs and great set of rules; I've been advocating something similar for reports for years. I think that the version with Georgia would have been more appealing to me if the headers were using Arial or another sans serif, as your guidelines suggest--they would have been easier to distinguish from the information content.

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment