English
6700

Technical Editing & Production

Spring
2013

 

Typography reading

Typography forms the base of all communication. Any written message must appear in some font. However, with an appropriate choice, the font recedes into the background rather than calling attention to itself (Benson, Olewiler, & Broden, 2005). It is one of the interesting contradictions of design: when properly done, it is invisible to the reader.

Schriver (1997) discusses the role of typeface mood, personality, and tone, and emphasizes the importance of connecting these to a document’s genre, purpose, and context. As she argues:

. . . designing legible documents is not enough. A second important characteristic of well-chosen typography is rhetorical appropriateness—the relationship between the typeface, the purpose of the document, its genre, the situation, and the audience’s needs, desires, and purposes. (p. 283)

She continues by pointing out the main reason driving typeface choices.

Designers select typography that will make it easier for readers to see the relationships among the parts of the document. Good typography can enhance the reader’s ability to infer the purpose and organization of the document (p. 284.

 

Type anatomy and terminology

Comments

Type has a long history and each nook and cranny on the typeface has a name. You don't have to know type at that level of detail, but you do need to the basic terms.

Readings

Typeface anatomy

Typeface terminology

Voice
Connections:

 

Typeface, fonts, and classifications

Comments

Typeface or font?

Let’s get this one cleared up straight away! Designers are often unsure of the difference between these two, as they are both well used terms for the same thing. Actually, a typeface is a family of fonts (such as Helvetica Regular, Helvetica Italic, Helvetica Bold, Helvetica Black, etc.) but a font is one weight or style within a typeface family (such as Helvetica Regular).

Typeface classifications

There are many different classifications and sub-classification of typefaces, but the most common two types you will hear of are: Serif – these typefaces are the more traditional ones. They are distinguished by a short line or finishing stroke on the end of character strokes and stems (shown in the anatomy diagram below) and; Sans-serif – as the name suggests, these are distinguished by their lack of any Serifs. They only became popular in the nineteenth century and are considered modern as a result.

Readings

Intro to typography basics

Voice
Connections:

 

Metal type

Comments

Readings

To create metal type, each character is cast on a bit of lead, and it is easy to measure the height. For example, “eight point type” is a clear instruction for a typesetter about the size to be used. Furthermore, the distance between two consecutive lines of text set in metal type is determined by the thickness of a strip of lead. “Two point leading” indicates that the typesetter has to put a strip of lead with a thickness of two points between lines. After text is printed, however, it is very difficult to determine the original dimensions: neither the body height nor the leading leaves a visible trace.

from "Typographic Dimensions and Wisdom"

Voice
Connections:

 

Kerning

Comments

Readings

Kerning game

Voice

Kerning

Connections:

 

Leading

Comments

Leading is the space between the lines of text (also called line spacing). The guideline for normal body text is to have leading equal to 20% of the font size. Long lines of text need more leading.

Readings

Kimball p. 173-176

Leading

Voice
Connections:

 

Small caps and all caps

Comments

All caps is considered shouting. They are also not very readable. Avoid them. If you do need/want all capitals, use small caps.

Some typefaces have a small caps font designed as part of the typeface. But most do not. What the computer does when you select small caps is simply use all capitals with a point size about 2 points smaller.

Readings

Kimball 186

How To Use Small Caps Effectively

Tips for small caps

Voice
Connections:

Screen typefaces

Comments

Using typefaces for web display and fpr a printed document require different decisions by the designer. The nature of web browsers limits how you can use fonts.

Readings

Kimball & Hawkings, p. 195-198

Voice
Connections:

 

Display fonts

Comments

Display fonts are the third typeface category (after serif and sans serif). They are not very readable, but have use in special situations. Display fonts were created for best appearance at large "display" sizes (typically 36 points or larger).

They are rather useless for web design since they must be loaded on the user's machine in order to display. Does this line of Ransom match the image on your computer?

Skunks are cool

Readings

If you need more. Can you really have too many fonts?
Voice
Connections:

 

Point size equals not letter height

Comments

The point size of a font is not directly connected to the actual size of the letters. The size refers to the baseline to baseline measurements, but the letter size refers to the size of the Cap-Height, whic is defined by the font designer.

These samples are all 72 point, but in various fonts.

 

Readings
Voice
Connections:

 

Proportional and non-proportional fonts

Comments

Propotional fonts. Each letter gets space proportional to its size. Most computer fonts are proportional. Bottom line on the image.

Non-proportional or fixed fonts. Each letter gets the same space. Courier is non-proportional, as were typewriters. Top line on the image.

Readings

Fixed and proportional fonts

Voice
Connections:

 

Length of one alphabet

Comments

The letters in each font have different widths, which means the length of a line in a font is different. Here's four different fonts; notice how the length of one alphabet is different for each font.

Readings
Voice
Connections:

 

Modern and oldstyle numbers

Comments

The numbers in fonts can be modern or oldstyle. Modern numbers line up with the baseline and are all the same height. Oldstyle numbers can vary.

Columns of number in Oldstyle can be hard to read.

Readings
Voice
Connections:

 

Background contrast

Comments

The eye distinguishes the text based on the relative contrast between the foreground and background. Reducing that contrast makes the eye work harder, which lowers reading speed and comprehension.
The color used for the background also has a significant effect on the legibility. A study of slides displayed on a computer screen found reading speeds were highest for color combinations with high contrast between the letters and backgrounds (Garcia & Caldera, 1996). Black-on-white, yellow-on-blue, black-on-gray, and yellow-on-black were read significantly faster than other combinations.

Based on the lighting, the legibility of the text can change. With lower light levels, the font must be larger for people to distinguish it. The background contrast also plays a major role in legibility, with smaller fonts being more legible on a high contrast background

The text is 12 pt Time Roman with the background shading increasing by 20% per step from 0-100%.

Readings
Voice
Connections:

 

Reversed type

Comments

Reversed type is a lighter typeface on a darker background (figure 7-12). The large dark area easily draws the eye to it. Reversed type works well for a headline, but not large blocks of text. Black fonts on a light background are more legible than white fonts on a black background (Taylor, 1934; Scharff & Ahumada, 2003). Text with large reversed areas are rated as less visually appealing and as harder to read.

Reversed type is read about 10% slower and requires more eye fixations (Tinker, 1963). Reversed type can be harder to read since the ink can spread into the white areas of the reversed type. With normal black on white printing, the ink spreads out and makes the letter wider; with reversed text, the ink spreads in and makes the letter smaller. The ink spread is most pronounced with serif type since narrow serifs can handle very little spreading before looking jagged or broken. The broken appearance makes the page look bad. The large dark area slows down reading. In general, reversed text should be done with larger sans serif fonts and the lines should have increased leading.

Notice how the 10 pt lines of serif (Times Roman) and sans serif (Arial) read differently as the black visually bleeds into the serifs. Use of modern serif fonts, with their small serifs would exacerbate the bleed problem.

Readings
Voice
Connections:

 

 

Choosing a type

Comments

Don't always use Times Roman or Calbri. Just because Microsoft made it the default does not mean it is a good typeface for your document.

Readings

On choosing type

Choosing a typeface

Voice
Connections:

 

Information salience and type cueing

Comments

People need to know what information is important and which isn't. The cueing provided by the design becomes one of the major factors of information salience.

We know typefaces are not rhetorically neutral. The choices you make in setting the font (bold, all caps, etc.) all carry a message to readers and cue them on the meaning.

Inconsistent or excessive cueing makes it difficult to following the cueing structure. People can only handle a few cues.

Readings

type cueing

Information salience

Voice

Controlling bold & italics

Connections:

 

Limit fonts per page

Comments

Don't overuse fonts. One font for the headings, one font for the body text.

Use size, bold, italics, and expand/condense for effects, not different fonts unless you have a clear reason why.

Readings

 

Voice

Limit fonts

Connections:

 

Legibility and readability

Comments

Readings

Legibility and readability

Voice
Connections:

 

The Rhetoric of Typography

Comments

Typeface choses are very rhetorical and strongly influence how your document is perceived.

Readings

The Rhetoric of Typography

Perception of fonts

Voice
Connections:

 

Type size study

Comments

Learn the variation of type sizes used in continous text.

Readings

Type size study

Voice
Connections:

 

Font formatting practice

Comments

Play with this dynamic page that lets you change the font, leading, and tracking.

Readings

http://flywebmaster.com/webdesign/tips/web_typography.php

Voice
Connections:

 

When you need to identify a font

Comments

A set of questions the builds a decison tree for font identification.

Readings

http://www.identifont.com/identify.html

Voice
Connections:

 

Design by Michael J. Albers Copyright 2013. All rights reserved.
Send me an email.