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

Analytics Roundup: Chicken presentation and so much more

Programming Collective Intelligence
Pulling information from community contributed data.

Videos that can change your organization
Top ten business videos on YouTube.

The Encyclopedia of Business Cliches

UC Berkeley CS160 User Interfaces Fall 06
Course readings and student notes.

Language Log: Chicken: the PowerPoint Presentation
The presentation you dare not give.

Prometheus Meets the Enterprise Management System
I laughed, I cried, I laughed again.

Diagrams: Tools and Tutorials

Data Visualization: Modern Approaches
A grab bag of ideas.

fontblog : Introducing Ambiguity
A typographic symbol to indicate ambiguity, compare to the typographic mark lol which indicates stupidity.

Whimsley: The Netflix Prize: 300 Days Later

Process Trends Website
Good excel charting and visualization tips.

BusinessWeek: Who Participates And What People Are Doing Online
A simple and fairly effective use of square pies.