Topics Typographic

A Look at Legibility

We've excerpted a few paragraphs written by Allan Haley, the Creative Director for Monotype Imaging. Monotype owns the fonts.com site.
"Typographic clarity comes in two flavors: legibility and readability. What's the difference? Legibility is a function of typeface design. It's an informal measure of how easy it is to distinguish one letter from another in a particular typeface. Readability, on the other hand, is dependent upon how the typeface is used. Readability is about typography. It is a gauge of how easily words, phrases and blocks of copy can be read. …

"So what makes a typeface legible? A long-standing typographic maxim is that the most legible typefaces are "transparent" to the reader–that is, they don't call undue attention to themselves. Additionally, the most legible typefaces contain big features and have restrained design characteristics. While this may seem like a typographic oxymoron, it's not. "Big features" refers to things such as large, open counters, ample lowercase x-heights, and character shapes that are obvious and easy to recognize. The most legible typefaces are also restrained. They are not excessively light or bold, weight changes within character strokes are subtle, and serifs, if the face has them, do not call attention to themselves."

For the full story, which has great examples and is worth the read, just follow this link to the article on fonts.com: It's About Legibility by Allan Haley.

Kerning, Tracking and Letterspacing

Kerning refers to the reduction (or expansion) of space between two characters. It is a way to change the white space between letters to improve comprehension and readability. By changing the space between specific letters, it can also make your design look better.

Tracking is also known as range kerning or universal negative letterspacing. With it, white space is removed from all character pairs, not just specific kern pairs. When creating a page, look for rivers of white space in the body copy and if you see them, consider tracking the text. A slight amount of tracking (a setting of -1 or -2) can often improve type set at body-copy sizes (14 point or smaller). More should be allowed for headlines, according to type style.

Most page-layout programs automatically kern letters, but they cannot always be relied upon to do a stellar job–especially with larger type and headlines. So designers may need to manually kern some letterspaces.

If you think of how type used to be set, it will help you understand the need for kerning. All characters are basically positioned in an imaginary rectangle. But the shapes of some letters will leave a ton of white space between them. Consider the amount of space between a capital "W" and a lowercase "e" as an example. Without some kerning there would be a bunch of white space between "We".

Letters and Letterforms

1. Ascender
Upward vertical stem that extends above the x-height on certain lowercase letters, such as 'h' and 'd'.

2. x-height
The distance between the baseline and the tops of lowercase letters without ascenders or descenders

3. Leading
The distance between lines, measured from baseline to baseline.

4. Descender
The portion of certain lowercase letters that falls below the baseline; the letters 'g,' 'p' and 'y' each have a descender.

5. Baseline
The imaginary line on which glyphs without descenders sit. The baseline serves as the point of reference when measuring most type specifications, including leading and x-height. It just goes to show, there's a name for everything!

The Dish on Dashes

As the name suggests, the hyphen is an automatically-generated dash that occurs when a multi-syllable word breaks at the end of a line, inserted by the software justifying the column or page of type. In addition to this fundamental role, here are the grammatical situations where the appropriate choice is either the hyphen, en dash or the em dash:

Hyphen

• Use it to link compound modifiers and other hyphenated words (Ms. Zeta-Jones)
• Use it for telephone numbers (e.g. 800-555-1212)
• Do not put a space before or after a hyphen

• Use as a substitute for "through" (e.g.1990–2000)
• Do not use with "from" (I was in school 1996–2000, not from 1996–2000)
• Do not put a space before or after an en dash

• This is the equivalent of a double-hyphen in a sentence--when typed on a typewriter
• Try to avoid using the double-hyphen unless you still type on a typewriter
• Use the em dash to signify an abrupt change of meaning or thought in a sentence
• The em dash–a long dash used to separate a thought–is twice as long as an en dash
• Do not put a space before or after an em dash

Brackets vs. Parentheses (When to Use Each)

Brackets [ ] are used to enclose explanatory material inserted into a quotation by someone other than the original writer or person being quoted. [I did not know that! –Editor]

Use parentheses (the marks surrounding this phrase) as a way to provide an additional or alternative explanation of the subject at hand: The record low for July 9 was 60°ree; (15°ree;C). Acronyms are good examples of when to use parentheses: National Football League (NFL).

Ligatures

Many applications, including InDesign and Photoshop, will automatically substitute ligatures when encountering the letter combinations they replace. If for some reason you would rather they didn't, turn off ligatures from the fly-out menu of the characters palette, as far as Adobe applications are concerned.

If you are using a program that doesn't support ligatures, you can always type them in manually. In the example above, we accessed ? by typing ? and ? using ?. Note that in all of the web-based encodings found in this article, the semi-colon is not meant as punctuation; you must type it to complete the string to call the character from the ASCII table. Beware, though: Applications such as InDesign substitute the characters for display and printing while "remembering" the underlying characters for spelling and searching. When you start typing ligatures manually, your computer will not recognize a word with a ligature as properly spelled and will not find it if you search on the normal spelling.

Typeface Classifications

Serif
A small stroke at the end of a character's main strokes.

Sans Serif
A clean, modern-looking class of typefaces lacking traditional serifs.

Transitional
Vertical stress in the letterforms with a pronounced weight contrast.

Calligraphic
Resembling glyphs drawn with a flat-tipped tool.

Roman
A serif face based on a style of ancient Rome.

Grotesque
Contrasting horizontal vs. vertical stroke weights and a slightly squared quality.

Humanistic
Based on Roman inscriptions with chiseled, rather than drawn, glyphs.

Casual
Informal, as though created with a brush or a pen.

Old Style
Thick and thin strokes, bracketed serifs, on a left-leaning axis or stress.

Geometric
Clean letterforms influenced by geometric shapes.

Slab
Subtle stroke weight changes and heavy serifs.

Formal
Connected character strokes with an ornate, italic feel.

Clarendon
Strong vertical weight and heavy square-cut serifs.

Square
Squaring of normally curved character stroke.

Glyphic
Triangular-shaped serifs or flared stroke endings.

Script
Connected flowing and slanted letterforms.

And with this overview of classifications, our discussion of topics typographic is a wrap [OK, we admit it: We couldn't resist the urge to end on a bad pun].