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.

Simple Font Framework Example 1

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:

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