the principles of good visual design including font choice, space, and scale/hierarchy.
how to create and utilize tables and figures including different types of graphs
6.1 Visual Design
So you’re a writer. You’ve got some nice words to say about something important. You’ve successfully accomplished step one, that is, having something to say and saying it well. Step two is how you present your writing. Is it readable? Is it easy to scan and understand? Basically, does your writing convert a viewer into a reader? For this, visual design is the key.
Just as writing principles such as appeals to character (ethos), emotion (pathos), and evidence and reasoning (logos) establish structure and engagement, principles also drive visual design. The goal is to draw your reader in while rendering your visual design seemingly invisible to successfully convey the weight of your words.
We'll discuss the three main principles to consider when visually designing your text: font choice, space, and scale or hierarchy.
Quote
“Only when the design fails does it call attention to itself; when it succeeds, it’s invisible." --typographer John D. Berry.
6.2 PRINCIPLE 1: FONTS
Fonts are different stylings of written words. Fonts are to written language as accents are to audible speech. Oftentimes, the accent carries more communicative power than the content being verbalized. The same goes for fonts. Fonts are conduits to convey tone before a word is ever read. And in today’s world, people don’t like to read too much, so font choice is pretty important. As Roger Black, founder of the Font Bureau, boldly stated, “Make it easy to read.”
Font v. Typeface
Technically speaking, what you thing of as font is most likely really typeface. A typeface is a design of type like Times New Roman, Palatino, or Arial, whereas font refers to the various styles of a typeface, like bold, 16pt, italicized, etc. Yet for simplicity's sake, we'll use the word font to refer to both.
There are two common families of fonts that many people have heard of at some point—serif and sans serif.
Sans serif shown in Neue Helvetica 48 pt. Serif shown in Bodoni 48 pt.
Serif
Serif fonts have been used in print for centuries. The serif, or tail that extends from the main stroke, leads the eye horizontally to the next letter and helps to differentiate groups of letters (words) from each other. It has traditionally been used for body copy or the copy that makes up a paragraph; however, this trend has evolved with the advent of the internet. You’ll notice this book doesn’t use serif fonts for paragraphs (We’ll discuss this more in the sans serif section). Serif fonts convey to viewers a sense of historicity, professionalism, and formality. Use serif fonts to elevate your words if you want them to appear more sophisticated.
Serif font with serifs highlighted.
Sans Serif
These are fonts without tails, or serifs (the word “sans” literally means “without”). If fonts wore clothes, sans serifs would be naked. The first sans serif font made its appearance in the early 19th century but caught on in the mid-20th century with popularity in headlines and poster advertisements. For this reason, sans serif fonts tend to carry a sense of modernity with them.
Sans Serif Font
Sans Serif fonts
These connote “progress and emphasize the future, which is why aerospace, technology, medicine, and biotech companies adopted sans serifs early on.” (Monotype)
If you want to communicate a sense of modernity, sleekness, boldness or even approachability in your words, a sans serif font would make a great choice.
Web Fonts
Fonts eventually were translated from print to web where sans serif were preferred due to low pixel count. As screen resolution increased with denser pixel count, more detail could be added to web fonts. This took years though, which is why sans serif fonts are so ubiquitous on the web. However, today both serif and sans serif are used extensively.
It’s a great time to be a Typophile! As co-founder of Fonts in Use, Stephen Cole noted, “You can’t be a good typographer if you aren’t a good reader.” I would also argue that you become a more effective writer as you become more knowledgeable about typography. Let's look at a few other types of font. Display fonts are often custom and carry unique personalities, which is why companies will pay designers to create or choose a font for their company logo that best reflects their brand.
The font used for the word Jump is considered a display font. This type of font would not be good to use in a paragraph at small scales. It is meant to be displayed at larger sizes. Logo and card design: Brian Collier
Script fonts originate from handwriting, both print and cursive and can be quite useful and beautiful.
A proper use of Script Font in a logo (wordmark). Custom Script designed by Brian Collier
However, if you use poorly crafted script fonts to express a very generic phrase or idea and apply it in vinyl on the wall of your home, I will fail you. This is simply tacky and you’re better than that.
This is a poor use of a script font. It is illegible, the space between words is too great and it looks tacky. Yes, I know, this is the opinion of this chapter's author. I want you to know there are better options out there. Photo source.
Other Glyphs
So far you’ve learned how to format and stylize your words. Words are just a collection of individual glyphs. A glyph is a character or symbol. Letters are glyphs. Numbers are also glyphs, as they are symbols for separate, distinct ideas.Remember, English isn’t the only language people use for writing, so font designers often include extra glyphs that might be needed in their font.Numbers are a bit more universal between languages, yet it's still helpful to have a version that matches a font.Here’s an example of every glyph that has been designed in the Helvetica font.
Full Glyph Set for Helvetica Font designed byMonotype
Here are some great resources for finding and becoming familiar with fonts of all kinds.
Now that we’ve introduced where to find some good fonts, let’s talk about the do’s and don’ts of using them.
1. Don't use too many fonts. Our brains like simple. Our cerebral organ loves to find shortcuts to free up space to compute new ideas. Fonts help train our brains. Too many fonts force us to try to find associations with the font's use that may not be there.
2. Keep it consistent. This goes hand in hand with not using too many fonts. Of the fonts you do use, keep their usage consistent. This creates a pattern. Again, the brain functions on patterns. Good user experience involves establishing patterns.
3. Mix your styles. This follows the principle of contrast. When you want to show contrast such as the different between a heading and the body text, a new style can provide context. Mix a serif with a sans serif for best contrast. Mix fonts too similar to one another and it will only cause confusion. People need to be told what is important.
4. Don’t be blind to the color blind. This is called accessibility. Can those who have color blindness still read what you’ve written? When using color, use this checker to verify there is sufficient contrast in the colors you’ve chosen.
5. Watch your weight. That’s not a negative comment on body image. Fonts have weights too. Some are thin and some are thick. And yes, they are called weights. When you bold a font, that would be considered a heavier font. As a rule of thumb, don’t deviate from 'normal' on body text, to ensure you keep text readable. Reserve heavier weights for headlines and emphasizing certain words in a paragraph (like the bolded words in this paragraph).
6. Be aware of the accent. Remember, fonts are like accents. They carry distinctive communication before a word is ever read. Take a look at some of these words in fonts that don’t necessarily match personalities.
For example, "formal dinner" wouldn't usually be written in a casual, handwriting font—the font choice creates a disconnect. Or more interestingly, the tone of "Wrestling Match's" font is what most people would consider a stereotypical, feminine, frilly font and might create a disconnect with some people who consider wrestling a beefy, macho, male-oriented sport. As you can see, fonts can even reveal societal biases!
When Bill Dawson was asked why we need so many typefaces, He replied, “Do we need so many books? Do we need another painting? Do we need so many songs? Do we need another movie?” The answer is yes. Type is what meaning looks like. It will add an extra layer of communication and intention to your writing. To use type well is to truly understand what you are trying to convey.
6.3 PRINCIPLE 2: SPACE
Space defines relationships. Basically, the amount of space between two elements defines the relationship between them. The closer two objects are to each other, the more likely they are related to each other. When designing your text, you must be aware of the space between letters, between words, between paragraphs, between headlines, and even the margins and gutters. Knowing how to utilize these spaces intentionally will communicate to your reader how to associate and process the information provided.
This is Dave Matthews of the Dave Matthews Band. He comments on spacing between words. Listen to his song "Space Between":
Thanks, Dave, for teaching us the design principle of proximity. :) How about now I just show you what I’m talking about. Ready? Here we go!
In the image below, the small space between lines (leading) makes the whole lines look like a single group (leading)
Too much space means no relation
Space can separate or connect elements. Icons on the card together make it seem like a group of actions. Icon isolated make it seem more important (Empashis) than the other actions
Space can add clarity instead of confusion.
Add space and it defines the relationship
Space can make things more legible. A general rule for space between lines (aka line height) is 130%-150% of the font size. For example, if I have a font size of 16 pt, I might want to set my line height to 24pt. Also, please set your body copy to 16pt. Your mobile readers will thank you.
Space can create hierarchy. Space can attract the eye to more important info.
Learn to see space first if you want to control it. Don’t focus on the elements, focus on all the area around it and the relationships it creates.
Want to see the importance of space? Tryremovingit,amirite?
6.4 PRINCIPLE 3: SCALE
Size. Creating hierarchy is the process of using scale or size of multiple elements in a composition. In writing, you develop a hierarchy of ideas such as stories, chapters, paragraphs, and sentences. How will you visually treat these ideas to clearly communicate the separation or association of common ideas, or the ideas within a larger idea? Scale, of course. You thought I wasn’t going to give you the answer? Come on, who do you think I am?
Headings as Navigational Tools
We’ve been trained to have shorter attention spans for reading. Therefore, depending on the what and to whom you’re writing, you’ll want to consider creating an easily skimmable document. You can typically do this by using headings.
Typically in website design and in word processors like Microsoft Word and Google documents, you can assign headings to a hierarchy: H1, H2, H3, H4, H5. H stands for header. You can assign a certain font and font size as "Heading 1" or "Heading 2" and then that font combo will be saved in an dropdown menu so you can use it throughout the document. These headings also connect to the navigation of the document and will show up as hyperlinks in the Outline view. Assigned heading levels are usually required for online publishing, especially for publishing something formal like a thesis or dissertation.
Here’s an example of the scale of each header.
Example of website typographic hierarchy of different sized headlines.
Check out how the website below uses different levels of headings to differentiate the different purposes of the text like titles or body text.
Example of multiples Headers being used in context. Layout Design and Yoda artwork by Brian Collier
What if words aren’t enough? What if you need to communicate with numbers?
6.5 Data Visualization
A visual format is often more effective than sentences and paragraphs, especially if you have numeric data. Tables and figures can efficiently showcase data and help you quickly highlight your most important points. According to APA Guidelines, tables are “numerical values or text displayed in rows and columns.” A figure is “any type of illustration (chart, graph, photograph, drawing maps . . . ) other than a table.”
How to Choose
Even though we often think of scientific data as straight-forward or objective, there are many ways to present data that emphasize one or another aspect of it. In fact, sometimes people or companies have chosen to "manipulate data" by obscuring negative results and emphasizing only the positive. Don't do that. We don't want you to go to jail.
On the other hand, while you should never misrepresent your data, you can and should make choices that guide your viewer to notice your most important results. Therefore, when creating a table or figure, the first question to ask is
What is my purpose?
Which data/results are the most important? What are the highest priorities to highlight? Only once you know your purpose should you ask the next question:
Which format will best convey my priorities?
Your purpose needs to guide your choices of format. Good thinking leads to good data visualization. If it's hard to explain, it will be hard to display. If it's hard to display, it will be hard to understand. Don't use tables and figures simply to decorate your presentation; decoration is not design because it lacks purpose or intent. Let your purpose guide.
Tables
Tables are ideal for showing raw data, or data that has not been analyzed in a way to imply a comparison or conclusion of relationships between data variables. Though it requires more analytical brainpower, readers can more liberally draw their own conclusions from tables. Tables are especially popular in Social Science research.
Figures
Figures encompass all types of data visualization besides tables. Figures are ideal when for showing relationships between variables. They come in the form of graphs, charts, drawings, photos, or maps. Figures highlight more explicitly what the reader should deduce from the data presented.
Because figures are so varying, here are a few guidelines to follow when using them.
1. Pick the right graph
Here are a few examples of popular graph types and the pros and cons of using them.
Line Graphs
These are some of the most popular graphs because they are easy to make and easy to understand.
Line graphs are great when portraying change in magnitude over time.
The X-axis usually represents time with data points plotted and connected with a line.
The Y-axis can represent a number of data, but always when showing change in magnitude.
Bar Graphs
These are similar to line graphs in that they show time-series data, but using bars instead of lines.
Bar graphs are great for comparing data and can be displayed with vertical or horizontal bars.
Vertical bar graphs are best used for time comparison and frequency data.
Remember they typically don’t leave room for text labels though.
Horizontal bar graphs accommodate longer text labels.
Pie Charts
great for categorical data.
A circle is divided into segments, with each segment representing a category of data adding up to 100%.
Not great if there are too many categories or the category percentages are too similar.
Best used when you have 5 or fewer categories to showcase with greater variation in segment percentages.
Pictographs/Infographics
Graphs for comparing data using pictures.
Great for general audiences as they simply convey trends.
Not great for scientific data as it’s hard to convey minute differences in numbers.
These graphs tend to generalize numbers to show larger trends.
2. Don’t use legends unnecessarily
Quote
"Remember kid . . . Heroes get remembered; legends never die.” --The Great Bambino to Benny “The Jet” Rodriguez in the movie The Sandlot
Well, Mr. Bambino, we say sometimes you need to kill the legend, especially if there is only one category. Legends require more eye jumping, more association, more mental work. If you have multiple categories, consider using a legend. Many times, you can label categories right next to the data, like in a line graph.
3. Highlight supporting details and suppress others.
Highlights provide contrast. Mitch Hedberg, the stand-up comedian, once astutely observed, “I got highlights because I think some of my hairs are more important than others.” When working with graphs, it’s typically because you’re trying to make a point. If the data helps support it well, highlight that detail to contrast obvious differences in data comparison. Using color is a great way of highlighting data.
4. Don’t introduce unnecessary complexity.
Keep it simple. Don’t use more lines than necessary and don’t highlight frames, just the data.
Conclusion
It’s not enough to be a great writer. You must be a great presenter if you are to increase the chances of people reading your words or understanding your ideas. Visual design is essential in accomplishing this goal. Remember, if it’s hard to write, it’s hard to read. If it’s hard to look at, it’s hard to read. Your job is to uncover the unseen and articulate it. Part of that is to learn how to choose good fonts, utilize space intentionally, and establish hierarchy of information by using scale.
