e-idea file



Topics Typographic

type from a to z?ype and typography are fundamental to the printed page. And yet, in the age of web and word processor, it's hard not to notice that as we've marched forward, we've left something behind. As such, we thought we might devote this month's newsletter to All Things Type. Well, maybe not all things–books have been written on the subject, after all–but we hope that we've covered the basics and provided a few good tips to help you take type to the next level. Decide for yourself by reading on.

A Look at Legibility

distinctive vs. legibleAt fonts.com, you can find quite a few features on all things typographic, and we thought one article in particular was really quite insightful.

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 and trackingKerning vs. Tracking. Although they are very similar in what they do, kerning and tracking are two different concepts that can improve the aesthetics of typography. Here are the definitions of each with a few examples.

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

letterformsIn case you were wondering, here are definitions of the main terms related to type 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

types of dashesTypographically speaking, there are three types of dashes, each used for different reasons. Below is an overview of each, with examples on the left.

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:


  • 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
En Dash  Mac: Option-hyphen  PC: Alt 0150  Web:
  • 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
Em Dash  Mac: option-shift-hyphen  PC: Alt 0151  Web:
  • 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
If you make a point to notice, you will see that hyphens and dashes are more often misused than used correctly. We will concede that the difference is subtle, but important to people who like–and expect–things to be correct.

Brackets vs. Parentheses (When to Use Each)

brackets vs. parenthesesBoth brackets and parentheses are used to insert explanatory material into a sentence. The key difference: Whether what's being explained is a quotation or not. In case you were wondering when to use a set of brackets vs. parentheses…

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).


ligaturesLigatures are special characters built into many fonts. These single characters replace a combination of characters. For example, ? replacing the f-i combination and ? replacing f-l .

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

classificationsTo the left you will find an example of each of the major typeface classifications. A brief explanation of each is below.

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

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

Vertical stress in the letterforms with a pronounced weight contrast.

Resembling glyphs drawn with a flat-tipped tool.

A serif face based on a style of ancient Rome.

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

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

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.

Clean letterforms influenced by geometric shapes.

Subtle stroke weight changes and heavy serifs.

Connected character strokes with an ornate, italic feel.

Strong vertical weight and heavy square-cut serifs.

Squaring of normally curved character stroke.

Triangular-shaped serifs or flared stroke endings.

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].


return to e-idea file article list