Chart Typography

Taxpolicycenter.org uses the fonts Avenir LT Pro 55 Roman and Calvert. When possible, those fonts should also be used to create charts. If the Avenir LT Pro font family is not installed on your computer, please download the font. If Calvert is not installed, Rockwell is a good replacement (Calvert should be used sparingly in charts as it is on the site). Good chart typography creates a hierarchy among elements and guides the reader through the visual.

	Typeface (Alternative)	Web Size	Print Size	Case	Color	Notes
Figure number	Calvert (Rockwell)	11	8	ALL CAPS	#DD0806 or rgb(221, 8, 6)
Title	Avenir LT Pro 55 Roman	18	12	Title Case	#000000 or rgb(0,0,0)	The main point of the chart. Try to keep shorter than two lines and avoid qualifiers.
Subtitle	Avenir LT Pro 55 Roman	14	9.5	Sentence case	#000000 or rgb(0,0,0)	Use this to add qualifiers or further clarification to the title.
X and Y axis titles	Avenir LT Pro 55 Roman Oblique (Italic)	12	8.5	Sentence case	#000000 or rgb(0,0,0)	Always horizontal, above the top axis label Include units or multipliers in parenthesis (millions), ($2014)
X and Y axis labels	Avenir LT Pro 55 Roman	12	8.5	Sentence case	#000000 or rgb(0,0,0)	Always horizontal, avoid units or multipliers. Those should be added to the axis title in parenthesis
Key labels	Avenir LT Pro 55 Roman	12	9.5	Sentence case	#000000 or rgb(0,0,0)	Always horizontal. Avoid redundant key labels if possible.
Direct labels	Avenir LT Pro 55 Roman	12	9.5	Sentence case	#000000 or rgb(0,0,0)	Use for line or column charts with three or fewer series.
Data-point label	Avenir LT Pro 55 Roman	11	8.5	Sentence case	#000000 or rgb(0,0,0)	Always horizontal. No units or multipliers. Only directly label columns if there are fewer than 10 total columns in the chart.
Source and Notes	Avenir LT Pro 55 Roman	11	8	Sentence case	#000000 or rgb(0,0,0)	Bold “Source:” and “Notes:” as well as any statistical significance indicators.

Chart Parts

The main content well on TPC publications is approximately 6.75” wide in Excel. Because Excel’s chart title and subtitle fields are limiting in terms of formatting, we use a regular text box for all the text at the top of the graphic, as well as the source and notes text at the bottom. We also include a TPC logo in the upper-right corner of the figure so that when media members copy-paste our charts into their stories, TPC’s brand is on them. If you use the add-in tool, the logo and chart parts will automatically size properly.

Right click and copy the logo above to use in your charts. You should not have to resize the logo. Select the chart, select edit -> paste, or use control+v, and move the logo into the upper-right corner. Make sure your chart is the proper size before pasting the logo. If you resize the chart after pasting, it will distort the logo.

Tips

• The TPC graphing style add-in formats charts to a width of 6.75", so it is important to keep the data density as high as possible. Always include a text reference to your figure to give the data context to the content of the report/brief/blog post. If your chart has only two or three values, consider a couple sentences of text to explain the figure.
• If you find your explanatory sentences do a better job of distilling the information, you might want to consider going without a chart.
• Title: Keep it short and simple. Try to explain the chart in a few words. If you need to add qualifiers (e.g., years, dollars) or further clarification, use a subtitle
• Source and Notes: This is where the technical information about methodology can go. Try to avoid putting this information in the title, labels, or on the chart.
• Legends: Stretch legends across the top of the chart, or to the right. Order them in a logical way, mirroring the order of the data in the charts.

Color

TPCs main colors are deep blue, teal, black and gray. Poppy is used as a highlight color throughout the new taxpolicycenter.org web site.

When selecting colors for charts and graphs, we must first consider the type of data we are presenting. Usually, data can be grouped into one of two main groups: categorical or sequential.

Categorical palettes are best when you want to distinguish discrete chunks of data that do not have an inherent ordering.

Sequential color mapping is appropriate when data range from relatively low or uninteresting values to relatively high or interesting values. For sequential data, it’s better to use a palette that has a relatively subtle shift in hue accompanied by a large shift in brightness and saturation. This approach naturally draws the eye to the relatively important parts of the data. Sequential colors are used for sequential groups (not necessarily the way the data trends). So age groups young to old and date ranges might be something that I use sequential colors for.

For more information about the subtleties of color, refer to this collection of blog posts from Visual.ly.

The following color combinations are intended to take some of the guess work out of the process of assigning colors to charts. They're only examples, and can be mixed-and-matched depending on the story you are trying to tell with your data.

Color combinations

Main graphic colors

One group

Two groups

Categorical

Sequential

Three groups

Categorical

Sequential

Four groups

Categorical

Sequential

Five groups

Categorical

Sequential

Six Groups

Categorical

Sequential

Seven Groups

Consider consolidating categories or breaking up the chart. Seven groups is really too many.

Examples

The following examples use the styles and colors to illustrate common chart types. To deconstruct any example, download the the master Excel file.

Download the master example file

Bar and Column Charts

When to use a bar or column chart

• For mostly for one variable
• To compares numerical values for different observations
• To show relative amounts
• To break one numerical variable out into different subgroups with grouped or stacked bars or columns

Style tips

• Avoid 3D bars or columns
• The y-axis should start at zero (there are a few instances when it is okay for the y-axis not to start at zero).
• The width of the bars should be about twice the width of the space between the bars.
• If all the bars measure the same variable, make them all the same color. Different shades have no relevance to the data.
• If you are showing fewer than 10 bars, consider eliminating the horizontal gridlines and y-axis line and directly labeling the data points.
• To differentiate subsets of data, projections, or averages, consider using a different color shade or gray.
• Legends should be stretched across the top of the chart and the order should match the order in the chart.
• Sequential series should be shaded from lightest to darkest for easy comparison.

Notes about this chart

• Columns on the right in the “Top 10 percent” are a lighter sequential shade to differentiate them from the quintiles.
• The “All” category is shaded gray to create visual contrast from the rest of the columns.
• This chart isn't perfect because the columns on the right side of the chart are disproportionately large—their categories are a fraction of the others, yet visually they are equally weighted. A possible solution is to use conditional formatting and build on a traditional distributional table.

---

Notes about this chart

• When dealing with political comparisons, lean on the identifiable colors of the parties. Red colors are generally associated with Republicans and blues are generally associated with Democrats.
• When working on a chart that has political categories, be sure to use a nonpolitical color for baseline or unaffiliated series (in this case, “current law”).

---

Bar Charts

When to use a bar chart

• To show the trend in one variable, usually across a number of categories.
• To show multiple variables with multiple bars(if they are on the same scale).
• To show the same variable for multiple observations with multiple lines.

Style tips

• The y-axis should start at zero (there are a few instances when it is okay for the y-axis not to start at zero).
• Axis labels should always be horizontal. If you have long labels, consider making a horizontal bar chart instead of a column chart.
• When using a horizontal bar chart, right-align the category labels and center them vertically with the respect to the bar.
• Try to avoid vertical grid lines. Instead, directly label each bar.

Notes about this chart

• United States is highlighted using the Poppy color. OECD-Total is differentiated by using a darker shade of the primary bar color

---

Area and Stacked Column Charts

When to use an area chart

• To show the trend in composition of a group over time.
• To display the part-to-whole relationship of categories, as well as totals.

When to use a stacked column chart

• When you want to show the composition of groups, but the data is not in a continuous time series.
• A 100 percent stacked area chart can be used when displaying composition over time.

Style tips

• The y-axis should always* start at zero.
• When possible, directly label series. If they are too small, use a legend.
• Avoid individual data labels.
• In a single chart, try to keep the maximum number of categories to three or four. More is not always better. Plotting too many categories on the same chart gives a confusing picture and defeats the purpose.
• Legends should be stretched across the top of the chart, or on the right, and the order should match the order in the chart.
• Sequential series should be shaded from lightest to darkest for easy comparison.

Notes about this chart

• This chart is an example of how to use two color families to tell a better story. Here, the CTC series are in shades of gray and the EITC series are in blues. This helps the user visually connect each series.
• Instead of a key, there is enough room to directly label the series using text boxes. Coordinated text color also helps the user make the connection between the label and the series, but beware of colors that are very light or otherwise difficult to read when applied to text.

---

Notes about this chart

• X-axis labels should be every 5 or 10 years for time-series data like this, but the chart data starts at 1962. To hack this, I created a new column called "chart-year" and only included the years I wanted to show. Because of spacing issues, I had to abbreviate the first year, 1962, as '62.
• It appears that the growth in Medicare and Medicaid spending is a big story in this chart. For that reason, I chose to use the brightest color in the categorical palette for that series.
• Contrast in typographic elements helps establish hierarchy. The "actual" and "projected" labels are different from the series labels, so I made them gray and italic.

---

Notes about this chart

• The x-axis is starting to get a little cramped. To free up some space, we could modify the data so that anything over one million dollars is represented as $1m instead of $1,000,000.
• I put the legend to the right of the chart in a vertical layout. The order matches the order of the data in the columns.

How it's made

---

Case study: Alternative to a stacked column chart

Often, when you want to show composition across several dimensions (usually time), the default choice is a stacked column chart. Though this is not a bad chart type, often a story can be better told by using a different chart.

Notes about this chart

• It is hard to see change in the middle series because of the shifting height of the salaries and wages bars.
• The x-axis is starting to get a little cramped. To free up some space, we could modify the data so that anything over one million dollars is represented as $1m instead of $1,000,000.
• Because some series are too small to directly label them, a legend is necessary. The legend is positioned to the right of the chart in a vertical layout. The order matches the order of the data in the columns.

---

Grouped column chart

Notes about this chart

• This version makes it easier to see the change in individual series across categories.
• It is also easier to compare series within the same category, allowing a better visual understanding of the part-to-whole relationship of any one data point.
• The x-axis is starting to get a little cramped. To free up some space, we could modify the data so that anything over one million dollars is represented as $1m instead of $1,000,000.

---

Small Multiples Area Charts

Notes about this chart

• If the story for this chart is about the distribution of any given series, small multiple area charts are the way to go.
• For example, it's easy to see that the lower-earning groups get most of their income from salary, whereas the highest-earners get more from capital gains.
• The x-axis labels are a little small.
• The legend is likely unnecessary—the same labels could be accomplished with text boxes.
• The colors here are also unnecessary—There's no need to code the data by color because they're all separate. I do, however, like the contrast the colors give each category.

---

Line Charts

When to use a line chart

• To show the trend in one variable, usually over time.
• To show multiple variables with multiple lines (if they are on the same scale).
• To show the same variable for multiple observations with multiple lines.

Style tips

• The y-axis should always* start at zero.
• When possible, directly label series. If too close together, use a legend.
• Avoid individual data markers.
• Avoid dashed lines.
• In a single chart, try to keep the maximum number of lines to three or four. More is not always better. Plotting too many lines on the same chart gives a confusing picture and defeats the purpose.
• Legends should be stretched across the top of the chart and the order should match the order in the chart.
• Sequential series should be shaded from lightest to darkest for easy comparison.

Notes about this chart

• Supposing the data in this chart is categorical, I used two contrasting colors. If the data were sequential, I would have used two shades of teal.
• The x-axis is starting to get a little cramped. To free up some space, we could reduce the number of labels (labeling every 2, 5, or 10 years) or change the year format to be '98, '99, '00, etc.

---

Notes about this chart

• Sometimes, we need to display data that are not on regular intervals. In these cases, it is helpful to mark the data points with individual markers.

---

Pie and Distribution charts

When to use a pie chart

• Use them sparingly. Often a bar or column chart is better. It is difficult to visually judge the size of circles (or circle segments). These segments are easier to discern as rectangles on a scale.
• Use pie charts when you want to show the relative relationship between two or three things
• When they add up to 100 percent (which may necessitate the inclusion of a category such as “none”, or “other”).

Pie chart examples

Notes about this chart

• Some times, pie charts are useful. In this case, the largest slice is 51%, a value that is very easy to recognize because our eyes can easily find the 50% mark.
• Pie charts work extremely well when they have fewer than four or five slices.
• It's helpful to directly label each slice. Relying on a key requires the reader to do too much work to shift their eyes from one spot to another.
• With only a few colors and direct labels, extra colors become distracting. Stick with only one color and use a highlight if needed.
• An alternative, below, is a histogram. But in this case, the pie chart is nearly as compelling.

---

Notes about this chart

• This pie chart has many more slices than the first example, however It's still fairly easy to make out the individual slices.
• Depending on the purpose of the chart, a histogram may be a better option. If the purpose is to show the size of one slice compared to the rest of the categories, a pie chart makese sense. In that case, it would be good to highlight that individual slice with a different color. If the purpose of the chart is to show how each slice compares to other slices, a histogram would work better (below). Histograms make it much easier to compare values than pie charts.