The first design element: font

+2

No comments posted yet

Comments

Slide 1

I’ll be the first to admit that I don’t know everything about graphic design. Most word processing software refers to font as the name for a specific set of characters or type. I’ve also heard it referred to as typeface. There are also “font families.” Arial is a popular font. But there is also Arial Narrow, Arial Black, and Arial Unicode MS. Within each of these fonts you can bold, italicize, or do both. Under the advance settings you can manipulate the height and width of the letters, change the spacing between letters, and adjust a number of other settings that will change how the letters look and print. For consistency and simplicity, I am using the term “font” to mean all of this, and more. The first thing to evaluate is the size of the font. The design manuals and style guides I reviewed for this toolkit offered similar, yet often too vague advice. A lot of what we evaluate regarding the design of documents is subjective. To recommend that you use a font that is comfortable for most people to read can mean different things to different people. When in doubt, involve the end users. Invite patients to review and evaluate patient education materials and collect feedback about how the documents are designed. However, that is not always a feasible option. Following the basic design guidelines in this toolkit will at least provide an evidence-based framework for how to design documents that are easy to read. With that said, let’s continue our evaluation of fonts. The prevalent recommendation in the research is to select a font that is at least 12 in size. Twelve what? Font size is commonly measured in points or picas. For this toolkit we are using points. The fonts used in patient education documents should be between 12 and 15 points. Why the range? I’m glad you asked!

Slide 2

Font size is not universal. While we should think of points or picas as a measurement, it’s interesting to note that one font in 12 point size may look larger than other fonts at 12 point. This table shows a comparison between some common fonts. Notice, too, that using a bold option for a font increases the amount of space it uses on the page, but it is still the same point size as the “normal” or non-bold font within the same font group.

Slide 3

Here is perhaps a better illustration. Note that the phrase “exercise for healthier heart” in each of the 3 sample fonts takes up about the same amount of space on the page: 20 characters, about 2 ¼ inches. To make a simple recommendation such as “use a 12 point font” is really not that helpful, because using Verdana at 10.5 point size is comparable to using Times New Roman at a 13 point size. The recommendation in this toolkit, then uses Arial 12 point font as the standard. Depending on which font you use in your document, as this example shows, could mean using a font at 10.5 point or 13 point, but the size is comparable with (i.e. the same size as) our standard measure of Arial 12 point. That’s why the recommendation is a font size between 12 and 15 point. For audiences that may need larger print (the elderly, for example) you can go larger to Arial 14 point, which would be comparable to Times New Roman at 15 point. Using larger fonts than this is really not feasible in printed documents and you should consider using a assistive devices, such as a magnifier or digital reader, or perhaps finding an alternate method for providing information and education to patients with low vision.

Slide 4

The second consideration is the type of font. There are two basic types: serif and sans-serif. You can recognize serif fonts because the letters have end strokes or “footers.” Times New Roman is a commonly used serif font. In print, serif fonts are considered easier to read, especially as main body copy or long passages of text. Sans-serif fonts use letters without the end strokes or footers. Arial is a common sans-serif font. In printed documents, sans-serif fonts are considered more difficult to read and are not recommended for main body copy or long passages of text. Sans-serif fonts are best used in smaller doses, which makes them ideal for titles, headings and subheadings. The contrast between sans-serif headings and serif body copy is both attractive and functional, as it helps guide the reader through the document and clearly marks where one section of information or topic ends and another begins.

Slide 5

This example speaks for itself. Which font is easier to read?

Slide 6

This brings me to what I call “character characteristics.” In selecting a font, it is a good idea to look at all of the letters in that font. You may want to swap out one letter for one from another font that is easier to read. There are some fonts that blur the line between serif and sans-serif, like a hybrid font. In the previous example using the word “ill” you might want to swap out the capital I in Arial with one from another font that is easier to read, but still fits with the rest of the font you are using and doesn’t look out of place. Some letters, such as o, s, and m do not vary much between different fonts. Other letters like Q and G, as well as some punctuation such as question marks, do vary quite a bit. In your document, you can swap out any “odd” characters with a better alternative from a similar font.

Slide 7

For a more in depth review of fonts, see Alex Poole’s Literature Review on which is easier to read: serif or sans-serif fonts. http://www.alexpoole.info/academic/literaturereview.html

Slide 8

Now let’s take a look at how fonts can have a negative impact on readability: the first being too many different fonts within one document.

Slide 9

Here is a document that uses several different fonts. While the addition of color seems to help make the different sections stand out, it is recommended to not use more than 3 different fonts in one document.

Slide 10

This is the bottom half of the same document. I count 7 different fonts. Again, the design of this document, including the use of color, is meant to segment the text into separate chunks. However, in a typical print document, too many different fonts can make the document look sloppy and actually make it harder to read. It also adds strain to the eyes. Again, the recommendation is to use no more than 3 different fonts within the same document.

Slide 11

Another negative impact on readability is the use of fancy, script, or novelty fonts.

Slide 12

While these fonts are fun and tempting to use, they often make your documents harder to read.

Slide 13

The designer of this brochure on stuttering in children, chose a child’s handwriting script for the headings. The word “disfluent” in the first heading is not a word I was familiar with, so it when my eyes scanned the page they stopped there. Note how the f and the l are connected to form one character. For readers with low literacy, there may be several words they are unfamiliar with, and a script font can make it even more difficult for them.

Slide 14

Another negative impact on readability is the over use of italicized and/or underlined text.

Slide 15

Here are examples from 3 different documents. Notice how large blocks of italicized text change the look of a document. While underlining may be used to add emphasis, it’s is best to restrict it to just key words. Underlining entire paragraphs is not recommended. When using underlining for emphasis, it is important to select the key words you want to highlight, because overuse of underlining really defeats the purpose. The same rules apply to italicizing text for emphasis. Use both sparingly but consistently in your document.

Slide 16

Another negative impact on readability is using ALL CAPS.

Slide 17

This example pretty much says it all. When reading, our eyes recognize shapes and patterns that help us recognize letters and words faster. Text that is in ALL CAPS forces the eye and the brain to read the individual letters for comprehension. This slows down reading speed considerably. Also, for readers with lower literacy who rely more on patterns and shapes, will find text in ALL CAPS much more difficult to read.

Slide 18

The final consideration regarding fonts is the contrast between the text and the background.

Slide 19

Contrast is also a consideration when using color. This toolkit considers contrast to both be part of font selection and use of color. Documents are easiest to read when dark copy text is over a light background. Bolding a font can often improve contrast. When using a shaded text box to emphasize key information, there should be a high contrast between the text and the shaded background.

Slide 20

Often times we design a document in high contrast: black text on a white background. But we then may choose to print the document on colored paper. Contrast is important to consider here. Documents where the contrast between the text and the background is low are much more difficult to read.

Slide 21

It is important to note that contrast and the choice of fonts are important considerations even in black and white or grayscale documents.

Slide 22

Use the readability design scorecard to evaluate the fonts used in your document. Add up the positive points, and subtract the negative points to determine the total score for this design element.

Slide 1

1. Font Size Choose a font size that is comfortable for most readers 12 point to 15 point

Slide 2

Point Size by Font

Slide 3

Point Size by Font

Slide 4

1. Font Type Main body text (for print documents) should be a serif font Sans Serif fonts work well for titles, headings and subheadings

Slide 5

Ill Ill

Slide 6

Character Characteristics

Slide 7

http://www.alexpoole.info/academic/literaturereview.html

Slide 8

1. Font Negative impact on readability: Too many different fonts in a document

Slide 11

1. Font Negative impact on readability: Too many different fonts in a document Scripts, novelty and “fancy” fonts

Slide 14

1. Font Negative impact on readability: Too many different fonts in a document Scripts, novelty and “fancy” fonts Overuse of italicized and/or underlined text

Slide 16

1. Font Negative impact on readability: Too many different fonts in a document Scripts, novelty and “fancy” fonts Overuse of italicized and/or underlined text Text in ALL CAPS

Slide 18

1. Font Negative impact on readability: Too many different fonts in a document Using scripts, novelty and “fancy” fonts Overuse of italicized and/or underlined text Text in ALL CAPS Low contrast between text and background

Tags: font design readability health literacy doug seubert

URL:
More by this User
Most Viewed