Typography

By Meg Conry

Menu

What is Typography?
Terms
Clarity
Typography on the Internet
Related Links

What is Typography?

Typography is the order and arrangement of letters on a page. Good typography helps the user understand and interpret the information which appears on the page. It should establish a clear visual hierarchy that assists readers in comprehending the content. Well-designed typography will also clarify the relationships that the text shares with headlines and pictures.

While the definition of a word is important, typed letters can convey also meaning in their size and style, among other characteristics. For example, people associate certain typefaces, or fonts, with certain concepts; so a hard-edged, futuristic font will be associated with a technological theme, while fancy, script fonts are more easily related to a fairy tale story.


Terms

Before getting into any depth on typography, it is necessary to define a few key concepts related to the topic:

  1. baseline: the imaginary line that the letters rest on
  2. x-height: the height of the lower case letters
  3. stem: a major stroke in a letterform
  4. serif: a short stroke attached to the main stroke of a letterform (fonts lacking this are called sans-serif”)
  5. stroke: any line in a letterform
  6. ascender: any part of a lower case letter that stretches above the x-height
  7. descender: any part of a lower case letter that stretches below the baseline
  8. counter: open space which is totally or partially enclosed by a letterform


Clarity

It has been shown that when people are reading, they recognize entire words at once rather than piecing them together from the individual letters. Therefore, a person reads by identifying the shape of the word, or even the shape of entire phrase. In typography, this concept can be used to improve the appearance of a typed word by making the shape of the word more easily recognizable. Several factors are involved in this process:

  1. Letterspacing – If letters are too far apart, or too close together, it becomes difficult for readers to identify a word quickly. Some pairs of letters, such as “av,” create more of a problem than others. The process of “kerning” is used to reduce the space between such letter pairs so as to keep all the letters evenly spaced and improve legibility.
  2. Line height – The space between lines of text poses another problem. If lines are too close together, it is difficult for readers to keep their eyes on the line they’re reading. If they are too far apart, it is difficult for the eyes to move from one line to the next.
  3. Line length – The length of the lines is also important. If a line is too long then the eyes have to travel too far across the page; if it is too short than the eyes have to switch lines too often. The ideal line length is usually between 60 and 70 characters, but can be anywhere from 40 to 80 depending on other factors like font size.
  4. X-height – Another factor to consider is the x-height. If the x-height is too small, then the openings in the letters will be very small and the text will be difficult to read. If the x-height is too large, then it becomes more harder for the reader to recognize the shape of the word; a large x-height also requires more space between lines.
  5. Weight – The “weight” of a typeface refers to the thickness of its strokes. If a light typeface is used, it may be tricky for the reader to discriminate between the text and the background. A heavy face can make the letters less distinct, as the openings in the letters will become smaller.


Typography On the Internet

The concept of typography on a computer screen is somewhat different than it would be on a printed page. Instead of ink, a computer screen uses pixels to represent text; since pixels are squares, they can’t easily appear as curved letters like text on a page can. There are several ways to get around this problem:

  1. Anti-Aliasing: The use of colored pixels around the edges of letters to trick the eye into seeing smooth curves. There are two problems with this Method: it looks fuzzy, and only works with relatively large type.
  2. Hinting: The process of correcting the outlines of letters so they match to the screen’s pixels.
  3. Pixelfonts: This concept refers to the use of bitmapped fonts. Since these fonts are designed as bitmaps, they don’t have curves to begin with, and so they match up with a screen’s pixels better than other fonts.


References

A Webmonkey tutorial on Typography
Web Style Guide to Typography