Ten Things You Need To Know About Typography

Ten Things You Need To Know About Typography

Typography- both the design of letters and characters and the process of arranging type- is a central component of any graphic design project and is integral to communication. Good typography reinforces the meaning of the text; puts the reader at ease; allows the reader to devote less energy to the mechanics of reading; and causes the reader to pay more attention to the message.

Typeface or font?

The terms typeface and font are used interchangeably today. However, in the days of metal type, there was a distinction. Font meant an alphabet (i.e., the upper and lower case letters, numerals, punctuation marks and symbols) in a single size, weight and style, while typeface  meant a family of fonts in various sizes, weights and styles.

• Size is the height of the alphabet and is measured in points (print) or ems (web).
• Weight, such as medium, bold, light or black, is the thickness of the alphabet relative to its height.
• Style is the slant of the letters. Upright letters are known as roman; slanted is called italics or oblique.

When type was set by hand, all the letters and characters representing one font were separately stored in the drawer of a job case. Then technology replaced metal type, and changes in size, weight and style were evoked by simple keyboard commands. The distinction between a typeface and font subsequently blurred to what it is today.

Typography as design: type classification

Type classification is a system for grouping fonts by shared visual characteristics (stroke variation, serifs and bracketing, x-height and stress). Typography for print uses these main classifications: Roman, Blackletter and Gaelic. The Roman classification- which predominates today- is further divided into serif, sans serif, script and ornamental.

• Serif typefaces have finishing strokes and stems on individual characters. Serif typefaces you may be familiar with include Times, Garamond, Palatio, Bodoni, Bookman.
• Sans serif typefaces lack finishing strokes and are relatively modern. Helvetica, Univers, Futura, Avant Garde, Gill Sans are all sans serif typefaces.
• Script typefaces mimic calligraphy or hand lettering and are either formal or casual. Formal script examples are Snell Roundhand and Old English; casual script includes Brush Script and Mistral.
• Ornamental typefaces (also known as display or novelty type) have limited use as headlines or for decorative purposes.

Web typography uses a slightly different classification system: serif, sans serif, monospaced, cursive, fantasy and script.

Typography as arranging type: design choices

Arranging type means selecting a font, point size, line length and spacing for each line and for the page as a whole that conveys the meaning of the words.

Fonts

The choice of fonts is dictated by the page's purpose, the amount of text, the intended audience, and characteristics of the font itself. Because there is more body copy than anything else, it has the biggest influence on the overall appearance of the page.

• For a printed page with a lot of text, use a serif font for the body copy as most books, newspapers and magazines do. On a web page, use either a serif or sans serif font. (Today's improved screen resolution displays serif fonts well).
• Limit the total number of fonts to three or less. For a single-page or short document, use only one or two fonts. Use only one script or ornamental font, regardless of the number of pages, and use it sparingly.
• Except for acronyms and abbreviations, avoid using all capital letters for text. In printed documents, using all caps slows down reading speed; on the web, all caps is synonymous with shouting.
• Never use all caps in a script font- the letters won't connect as they would in handwriting or calligraphy and the words will be very difficult to read.

For contrast, pair a serif font for body copy with a sans serif for headlines. For a variety, vary the size and weight of the type rather than changing fonts. For emphasis, use bold or italic type.

Point Size

Point size is the size of the letters. For print, use 10-12 point type for body copy; on the web, use 15-25 pixels. Be prepared  to make adjustments as some identical point sizes may appear larger or smaller depending on the font.

Headings help organize the page by defining sections of body copy and defining a hierarchy. Headings can be set in a larger point size than body copy, with a different weight, or set off with space above and below.

Line Length

Line length is the horizontal width of the text block. For best results, set the line length to average 45-90 characters per line or to about 2 1/2 times the alphabet length of the font you are using. (To determine alphabet length, type the alphabet twice, then a third time up to the letter m; measure. The width in picas is usually the best line length for that font.) If you follow this rule, you may have to create columns on the page.

Spacing

Spacing- between letters, words, lines, columns and on the margins of the page - creates negative space, the space that surrounds an object. Negative space defines the boundaries of positive space and helps balance the page.

Leading (rhymes with heading) is the vertical distance between lines, measured baseline to baseline. It should be 120-145% of the point size though it can be adjusted to bring lines closer together or spread them farther apart. In CSS, leading is called line-height.

Adjusting the space between two letters is called kerning and is used to remove gaps around letters whose forms angle outward or frame an open space (W,Y,V,T,L). Kerning can be controlled by creating a table of kerning pairs that specifies spaces between different letter combinations.

Tracking, letter spacing or character spacing refers to adjusting space between all the letters in a word. It is used to make lines of type more even, to remove hyphenation or widows and orphans from paragraphs or to increase the space between the letters of a word set in all caps.

White space is the part of a page that is empty of text, photos or graphic elements. If a page looks crowded, it probably needs more white space. Many readers associate white space with an upscale or sophisticated look. Page margins, line length and column width all affect white space.

Alignment

Alignment refers to how the text is displayed on the page. The choices are left, right, centered or justified and should remain consistent throughout the document.

Left alignment (also called left justified or flush left) begins each line at the left margin. This produces a straight margin on the left and a ragged edge margin on the right. This is this most commonly used alignment.

Right alignment (also called right justified or flush right) aligns the beginning of each line of text along the right margin, producing a straight right margin and ragged edge margin on the left. Right alignment is used sparingly as it is difficult to read in large blocks of text.

Centered alignment has equal amounts of space on the right and left margin of each line, making ragged edge margins on both sides. Centered alignment is often used for document titles and headings.

Justified alignment combines left and right aligned text, resulting in a straight margin on both sides. This is accomplished by adjusting the space between words and characters so the text fills the entire line. It is popular in newspapers and magazines and increasingly,on the web.

Typography is about the details

Whether in print or on the web, the goal of good typography is the same: to convey the meaning of the text and thereby to enhance the reader's comprehension and learning's. In typography, small changes can make a big difference.