Typography

Typeforms are an integral part of modern communication. Since the invention of the printing press, people have used printed —and more recently— electronic type to communicate. Could you imagine a newspaper or magazine where all the articles were handwritten and copied? Imagine how difficult it would be to compose an e-mail or use desktop publishing software to create party invitations without the existence of typefaces.

Typefaces are used in print and electronic media not just to communicate a legible message, but as an expressive tool of the author or designer. Each typeface can be used to convey a different style or atmosphere. There are typefaces evocative of Art Deco, The old American West, Weddings and other traditionally formal ceremonies, childhood, The Middle Ages, handwritten text, and an endless variety of other styles.

It is almost imperative as a graphic designer, and absolutely imperative as a typographer, to develop an appreciation and understanding of both modern and historic typography. In everyday life, one should pay attention to the stylistic and practical uses of typefaces in various kinds of media. Note what feelings the designer was hoping to convey, or what style they were attempting to mimic.

Classification

A typeface is a style of lettering, such as Helvetica or Times. A font is the set of a typeface, used to produce the letters. On a computer, it is a file used by the system. People often confuse "font" with "typeface". For example, Helvetica, point 12 is a different font from Helvetica, point 14, even though both are of the same typeface.

A set of similar typefaces is called a "family." Within a family, typefaces are categorized as parent (e.g. Times, Helvetica) or relative (e.g. bold, italic). Typefaces are categorized also according to style (e.g. italic, book), weight (e.g. bold or light), and width (e.g. expanded).

Type is measured in points, from top to bottom of the letters' invisible bounding boxes. Since each letter fills up a percentage of that bounding box, when the size of the box is increased, the letter size increases.

The divisions you may already be familiar with are the serif and sans-serif fonts. Serif fonts, like Times, have the little feet and variable line width characters which make them easy to read. Sans-serif fonts, like Helvetica and Verdana, are drawn with more even-width lines and don't have the little feet, which gives them a clean, modern feel.

Usage in Design

Text can have a number of different purposes in a design. It can be used for pure graphic appeal —or aesthetically— a case in which legibility may be less important than aesthetics. An example of graphical use of text is possibly that of major titles. Text may also, more commonly, be used for communication on a linguistic basis rather than visual, in which case, legibility is always the priority of the designer. A few examples of usage of text for linguistic communication are: the body text of an article or book, the text of a restaurant menu, or in product descriptions in a catalog.

A font may be used either successfully or poorly, depending on its degree of relevance in the project and the skill of the designer. The designer must pay careful attention to letter, word, and line spacing as well as the size of the typeface and its stylistic contribution to the overall aesthetic of the project. He or she must optimize the properties of the text for its purpose in the overall design (aesthetic or communicative) and maintain legibility where it is necessary, and the designer is also expected to add visual variety with formatting and layout, as well as possible font changes where applicable.

Choosing a Font

A designer has to choose a font that is not only appropriate to the mood of the design, but that is appropriate for the text's purpose in the design. For example, there are many kinds of decorative typefaces that one would not want to set an entire article in. This is because a purely decorative typeface tends to be distracting to the content of the message and tire the reader's eyes when used in large portions. Our eyes are most comfortable reading less idiosyncratic typefaces. Decorative typefaces are better suited for display type (greater than 14 points), while simpler type is better used for text (less than 14 points). To maintain readability in large blocks of text —such as in an article— stay consistent, and use only one family.

Readability in Different Media

Sans-Serif versions of the letter A on the left. Serif versions of the letter A on the right.

Standard graphic design wisdom holds that of the categories of serif and sans-serif, serif fonts are easier to read. This is because when reading, the eye quickly scans the tops of the letterforms, and a serif font has more immediately recognizable features thanks to the tiny 'eye-holds' provided by the serifs. There is a notion slowly gaining acceptance, that, for the purposes of purely electronic design, the reverse is sometimes true. Sans-serif fonts are more readable in this case because a screen has a lower resolution than a printed page, so the serifs only serve to smudge the letter forms.

Some typefaces such as Times, originally designed for the London Times newspaper, or Futura, designed as a letterpress (raised plate) type for printing on paper, were intended for the printed page. Others such as Georgia and Verdana were designed for the lower resolution of text on a screen. The shapes of these typefaces are developed to optimize visibility in smaller sizes on a computer monitor. In larger sizes, these differences don't matter as much.

For maximum readability on the page: Serif; On the screen: Sans.

Typeface Sizing

Keep the typeface at a reasonable size for reading. The numbered size of a typeface may reflect the overall height of the lines that stick out of the type, but not the readability size that relates to the inner dimensions of the letters. The type size should be chosen on a visual basis, and not purely on that of font size numbers. Usually, type that is proportioned so that the lower case size is larger in proportion to the overall height of the font, can produce a greater amount of legible words into an equivalent space.

Typeface Spacing

Word spacing should be so that the reader is aware of the beginnings and endings of words with little or no difficulty. Experiment with spacing settings to find the best one. Letter spacing and line spacing may be used to expand on the expressivity of the font. Leave enough space between the lines so that the text is legible. Experimentation is important here, too. The reader's eyes should be pulled to the next word as they read, not to the lines above and below. The letter spacing should be that so the reader can easily differentiate between different characters. Yet again: experiment, experiment, experiment.

Kerning: Kerning is the horizontal spacing between exactly 2 glyphs. When you are hand kerning text (logotype or headline text usually) try to imagine that the baseline and glyph shapes make a container, and imagine pouring water in. Try to make the negative space between each pair of glyphs hold the same amount of water.
Tracking: Tracking is the horizontal space added to or subtracted from the space between each and every pair of glyphs in a selection. In other words tracking adds to or subtracts from the kerning of all pairs of glyphs in a selection.
Leading: Leading is the vertical spacing between separate lines of type. There is a relationship between the length of the line and the amount of leading needed for easy legibility. Longer lines need more leading to prevent the reader's eye from slipping up or down when moving from the end of one line to the beginning of the next. It then logically follows that short lines are preferable if information density is important as in a newspaper.
Typographic Color: Typographic Color is something of a misnomer in that it is only concerned with one aspect of color: value. The darkness or lightness of a block of text on average is the typographic color of that block of text. Typographic color is strongly influenced by spacing. Consider the difference in the emotions aroused by a dark block of text (long lines with little tracking and leading as seen in many legal agreements) and a light block of text with lots of space.

When to Break Rules

With text used purely for graphical or display purposes, spacing, fonts, or colors that would be considered otherwise unreasonable can be utilized to create a visually appealing effect. The legibility rules that are extremely important in body text aren't as critical to effect the larger typeface size. Make sure that before deciding to use more untraditional methods of formatting text, you consider the desires of your client, and/or the stylistic effect the formatting will have on the overall design. Is it supposed to be a classic, elegant wedding invitation, or is this a layout for a skateboarding magazine article? Consider the circumstances and break or follow the rules of tradition appropriately. Remember that a common amateur mistake is to break too many —or the wrong— formatting rules in rebellion of the idea that aesthetics have constraints. Then, they end up with a horrible mess of a design that looks good under no circumstances. The purpose of a graphic designer is to merge optimal form and function. Remember: anything can be art, but not anything can look good!

Layout

A good layout is one that shows good use of the elements and principles of design. Most importantly, a designer should use the principles of design to draw the reader's eye both to and through the design easily. The elements of design are: color, value, texture, shape, form, space, and line. The principles of design are: contrast, emphasis, balance, unity, pattern, movement, and rhythm. The specifics of both the principles and elements vary from source to source, but the idea remains the same. If you haven't studied the principles and elements of design before, read more in the chapter Principles of Design, or scroll down to view the external links.

External Links

Books on Typography The Type Directors Club

Five Simple Steps to Better Typography -- Mark Boulton

Books on Typography -- By Index Book publishing.

Typographica. A Journal of Typography.

The Principles of Design -- Digital Web Magazine

The Elements of Design -- Digital Web Magazine

Design examples -- Design Examples Online Magazine