Enhancing Data With Interesting Text Techniques

TL;DR

Text might be the most important aspect of visualizing data. Users must be able to quickly and fully comprehend the data set you are presenting. Text features such as titles and labels communicate that very quickly. I’ve developed a tutorial to help you make your text as impactful as possible. Here are the important topics I will be covering:

• Text Placement: Use spacing efficiently. People read left to right (with a few exceptions). Your headers, sub-headers, and labels should be left-aligned so that readers will immediately have labels within their viewpoints.

• Font-Size: Certain font styles and sizes are easier on the eyes. Larger fonts (14-22px) are generally for scanning and comprehension. I reviewed a few studies that tested for differences in speed and retention between font styles and sizes. There were around 7-8% quicker reading speeds and retention levels with larger font sizes..Here's one of the studies if you are interested! That's pretty significant. Experiment with different sizing to see what feels right.

• Font-Family: Sans Serif style fonts are pretty much the way of the Internet right now. They look modern and are designed to be read easily. Huge companies like Google and Mashable are using Sans Serif font types with a size of around 14-18px. It works for them. I'm sure it will work for you too.

• Color: Is your color scheme being chosen with user comprehension in mind? Color contrast is the most important factor when it comes to choosing text color. There are right and wrong ways to use contrast and they are visually evident. Keep your font colors on opposite ends of the spectrum of your background colors for the best visibility.

Text Structure

Let's just jump right into this tutorial. Structuring your text is the core aspect of presenting information to a reader in the most efficient way. Why spend hours coding a chart if nobody wants to read it? My thoughts exactly. So here are a few tips to make your charts easy to read:

• Important info should be left-aligned. According to a very popular and heavily cited study on how Internet users read, by JaKob Nielson, content is usually read in an "F" formation. I mean this is pretty logical. We read left to right and we all scan for the important bits of info.

• Place your important titles and sub-titles on the top left of your charts (pretty much like headers in a blog), label your axis, and only use a legend if it's logical (you don't want to take attention away from the data comprehension if you don't need to). If you do use a legend, place it center aligned, or immediately to the right of your charts so it follows the general vision path of most readers.

• Place the right sort of emphasis on chart labels and headers. This will add a little extra significance to them. Bold the important stuff and have proper line height. Seems easy enough. Your readers will quickly identify what's being presented!

• Give yourself proper spacing for labeling! This is pretty overlooked and people tend to squish their chart labels together (especially on the y-axis). Dynamic spacing allows your chart to breathe! Use this code input to give yourself a little more room to label your y-axis.

plotarea:{
 	  marginLeft:'dynamic'
},

*Note. This chart will evolve as you keep reading. This first example will show you how to structure your text on a graph.

Font

Font is pretty important to the way a user reacts to your data. However, it's not that hard to get it right. Keep it simple. Google, Mashable, Wired, and The Next Web use Sans-Serif styles. Why? It's super easy to read and it looks cool.

There's a lot of studies I went through that essentially tested font sizes for retention and reading speed. I'll save you the time and paraphrase. Font between 14-22 pixels is best for speed and retention (I know that's kind of a broad range, but it gives you room to experiment).

Font styling is pretty important with the way modern Internet users are consuming content. Speed is everything, so make your fonts easy to read! Want to try out the effect of different fonts on your eyes? Google Fonts offers some really incredible font choices to style your text. Here's a drop-down menu with some of their best options! (Also check out the new updated google font page here.)

Choose from the drop-down menu below. It'll change the font of the entire document so you can see how much font affects presentation of text.

Comparing The Font Of Popular Tech Blogs

There's a common theme playing out on many popular blogs. That's Sans Serif font families with sizing somewhere close to the 15px range (or somewhere near 1em). I identified some important font practices shared by popular websites.

*As we move along through the evolution of our example chart, I've added enhanced font family and size to show how these small changes enhance text.

Color Scheme

Color is extremely important to the presentation of data. (We have another post all about choosing color scheme for charts here.) If text can't be easily read, data is pretty much useless. Internet users have a super short attention span. Work around that!

I know you all have chosen (or are working) with a color scheme for your company or blog. Let's make sure you don't waste the power of your colors. Make sure fonts are being colored and contrasted efficiently. This will make things easily legible.

Contrast is an important factor to consider while making font color choices. There are two contrast styles that are generally the most effective at making text color pop out to a reader. Black font on a white background, or the inverse of white font on a black background. In between are all of the contrasts, good and bad.

Higher levels of contrast have been shown to offer quicker reading rates and retention levels, according to a study done by the University of Missouri. Check out the examples of good and bad contrast below to see what I mean!

Good Color Contrast Bad Color Contrast

Google has an incredible color palette available to illustrate the way contrasts should be structured. We use this to style a lot of charts we make. It gives a great representation of ideal text colors against all sorts of different backgrounds.

This chart below shows my final outcome when taking structure, font, and color into account!

Conclusion

Like I've said, data visualization relies heavily on the user's ability to comprehend the data being presented. Integrate all of these tips into your chart creation process and you will find your data presentation to improve (hopefully). Have any tips, new info, or complaints about this article? Comment below!