Typography 101
Whether in print or on the web, typography is one of the key tools to every designer. Understanding the terminology and history of type can only help you in the long run of your career.
Every industry has a language of it’s own, and every certain terms in each can be interpreted differently by each individual person. Typography is the same. There seems to be two different camps of manipulating type; in print and on screen. Some terms enjoy unanimous approval, others are proprietary. I will try to help you understand both and point out some general “rules” along the way.When discussing typography we usually start by separating fonts into categories. Some people use three, others a lot more. I generally put them into five categories: Serif, Sans Serif, Display, Script, and Dingbats.
- Serif
A serif faces contain cross-lines at the end of a strokes. Times is a serif typeface. Serifs help distinguish individual letters and provide continuity for the reader. - Sans Serif
Typefaces without serifs are called Sans Serif. Helvetica is a sans-serif typeface. Sans Serif fonts are also sometimes referred to as gothic or grotesque.For headlines and short bursts of text Sans Serif fonts tend to be more legible and instantly recognizable. Conversely, for body copy, or long passages of text, serif faces are easier to read. (If you want to use sans-serif fonts for long blocks of text, try making the line lengths shorter, and add more leading. Some people believe that san-serif fonts should be used for body text on screen because all the little serifs are not rendered well, but this is a matter of opinion.)
- Display
Display or decorative faces are letter-based fonts that fall outside the previous categories. Due to the detail in the design of these fonts, they usually look best when used in larger sizes such as in headlines, thus, display. Conversely, they tend to be unpractical for use as text because of their limited legibility.This is one of the most popular categories, probably because there are so many of them to choose from. You can achieve just about any look using display faces. Among some of the more popular display type foundries are Emigre, T-26, and House industries.
- Script
Script faces are designed to mimic cursive handwriting or are made from actual handwriting. These can convey a range of emotions from quiet elegance to a playful casual mood. Script faces set in all caps tend to be extremely difficult to read. If you do use a script face, remember to allow for extra character or line spacing for faces with exaggerated curves, curls, and swashes. Also, avoid long lines of text set in script as this is usually too difficult to read. - Dingbats/Symbols
Dingbats are decorative symbols, or glyphs, used by printers and designers to add interest to pages. From bullets to frames to tiles to clip art, these fonts replace each letter and character on the keyboard with a piece of art
We Are Family
A type family consists of variations on a typeface; regular, italic, bold, bold italic, etc. Some fonts range from ultra light to ultra black and also contain other variations like condensed, extended, etc. These come in handy when you need to fit a certain amount of copy across a predetermined length. If you have too many or too few characters, and adjusting the tracking makes the text too difficult to read, consider using a face with multiple widths in the family. Just to illustrate the point here is the Helvetica Neue family according to Adobe :
Horror-zontal Scaling
Typefaces are designed to maintain a consistent line quality and serif weight across these variations. Adjusting a font’s horizontal scale will in effect create a new face. For example Helvetica has a consistent line weight around all vertical, horizontal and curved strokes. if you set the horizontal scale of Helvetica to 200%, then the vertical strokes will be stretched to twice the size while the horizontal strokes remain the same. Now the face will have an inconsistent line weight, and is no longer true to the way Helvetica was designed. This is why we have alternate versions of fonts like extended and condensed,
Measuring Type
Before computers, when type was cast in metal, it was measured in points. This refers to the height of the metal body that held the individual letter. This was usually slightly larger than the highest and lowest feature in the entire face design.
Traditionally, a point is 1/72 of an inch. Picas are another form of measurement used for type in print. 12 points = 1 pica. 6 pica = 1 inch. This method is still in use today. Most design software for both print and web give you the option in working in points.
In CSS the size of a font is adjusted using the font-size tag.
Print designers often use the term x-height, referring to the height of the lowercase x, but in CSS, web designers us the term em, which refers to the height of the lowercase M. These are basically the same measurement. This is important because at smaller point sizes, fonts with a larger e-x-height, or em, are easier to read when everything else is equal.
According to Miles Tinker and Donald Paterson, readable text starts at 9 points, improves at 10, maxes at 11, then starts to fall off at 12 points, and gets much worse at 14 points. This theory, of course, assumes the reader has unimpaired vision and is reading print.
Monotype vs. Proportional
Type is defined by the space around it, whether between letters, words, or lines. Monospaced means that every character uses up the same amount of space, a capital O and a lowercase l will both require the same amount of horizontal space. Proportional means that the space to the left and right of a letter remains the same, but each individual letter’s footprint will vary.
One Space or Two?
If you look closely at any professionally printed magazine or book, you will notice that there is only one space between a period and the start of the next sentence. The rule of two spaces after every period was created for the typewriter that uses monospaced text. This was a rule created to help the viewers eye notice when one sentence ended and the next one was beginning.
With the advent of proportional lettering and computer fonts, the way the letters are set is much different than the old traditional typewriter. Letters sit next to each other more comfortably, as well as words next to words, therefore only one space is needed for the reader to comprehend the end of a sentence. The extra space looks awkward and disrupts reading in professional publications.
If you disagree with the need for only one space instead of two, here is food for thought: Web pages use by default only one space between sentences. HTML is set up to only display one space no matter how many are typed. If you want to insert an extra space between sentences you have to code it in using   using five characters to get one more.
Line Length
The longer a line of text gets the harder it is for a person to read, conversely, shorter line lengths tend to break up the text and interrupt the reader. The ideal length depends upon the typeface and the type size. Generally, a line should contain between 10 and 50 words for optimum readability.
Leading
Leading is the vertical distance between lines of text and is generally measure in points. In the days of metal type, printers inserted strips of lead between each line to separate them. Leading is measured from the baseline of one line to the baseline of the next.
Too much leading causes the eye to jump, and too little creates a dark and uninviting paragraph that may cause the eye to skip lines. Text is generally specified as points over leading, 12/18 would mean 12 point text with 18 point leading.
Type and Color
Just as the line spacing can affect the readability of text, so can letter spacing. in print we call this tracking or kerning, in CSS on the web it is adjusted with the code: letter-spacing. Text with tight letter spacing becomes dark and unreadable, and text with letter spacing that is too loose starts to confuse the reader as it becomes increasingly difficult to distinguish one word from another.
Good contrast is important. it is preferable to have dark text on a light background. Reverse type is harder to read but not unreadable if the contrast is high enough. The worst possible combination is red text on blue background because the human eye focuses on blue in the front of the retina and the red behind the retina. Red on blue can cause a condition called chromosteropsis, which can have symptoms such as headaches and dizziness.
Another point to consider is that setting text in all caps slows reading by 14–20%
Alignment
Individual words or entire blocks of text can be set in four basic alignments; left (rag right), right (rag left), centered and justified (block).
Left justification is easier to read and is less formal than full justification. Pick the alignment that matches the tone of your design.
Combining Typefaces
Avoid using an excessive number of typefaces in a single document. Some experts recommend using no more than two families; others set the bar a little higher. Using selective typefaces can help your reader sort information and navigate the document. Too many faces tends to cause chaos.
Avoid using two or more similar fonts on the same page. Selecting fonts that are not different enough, Times vs. Garamond, also causes conflict.
Remember, fonts affect your overall design and should be chosen to match the style you want to portray. While readability is important, so is design!
