1. Skip to navigation
  2. Skip to content
  3. Skip to sidebar

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

Topics:
, ,
  • derek

    I would also recommend that text at the head of a column of right-aligned numbers should itself be right aligned, even if your normal policy is to align text left. I would do this with the “All”, “Male”, and “Female” above, for instance.

  • Brian Timoney

    I love me my Calibri.

  • Lincoln

    Brian, I agree: Calibri is the best

  • Chris Gemignani

    @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.

  • Ulrich

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

  • Chris Gemignani

    @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 %.

  • Dan

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

  • Tom Hopper

    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.

  • Marie

    Great stuff. Downloaded the pdf’s yesterday. Love your site! Thanks for all the great tips & links.

blog comments powered by Disqus