Please note: This content has not been updated since Spring 2004!

Primary issues are legibility and style.

Use type to create a personality for work. It's your voice.
Each typeface speaks in a different tone of voice, it adds intonation and expressiveness.

Type personified: The Child and yU+co
Experiment with Emigre's Typetease to see this.


Typefaces were created throughout history for different reasons:
Myriad: Created in 1991 for Adobe as the "generically useful Sans Serif".
Caslon: Sans Serif 1816, only available at 28pt, never made it to market until 1997, when college student Mike McGinty revived it.

Notable designer Massimo Vignelli said a designer should only use these 5 typefaces: Bodoni, Helvetica, Times Roman, Century, Futura. Vignelli's point was that a design will be more successful by knowning a smaller subset of of typefaces well.


Avoid using more than 2 typefaces on one page. Instead, use different weights of one face, and CAPS to indicate hierarchy. Use Serif and Sans Serif together rather than 2 of one kind on a page. Keep the mood consistent - either formal (Serif) or casual (Sans Serif).


General classes of typefaces

Serif (or Antique)
Has feet/tails which create a horizontal movement that the eye can follow. The medium used to create the letters dictated the letters shapes. For serifs, the writing instrument was cumbersome, held like a dagger, this leads to the uneven weights and feet.

SansSerif (or Grotesque)
Originally developed because the serifs were causing the letter blocks to split. Modern sans serifs are often computer-generated and characterized by their equal balance and lack of Serifs. Because of the lack of the clear horizontal queues, lines of Sans Serif should have greater leading.

Slab-Serif or Egyptian
The hooks or Serifs are often symmetrical.

Decorative
Scripts and calligraphic faces that can look hand drawn.

Grunge or Garage
Timely and trendy.


About the face - character shape
Ascenders
Capline
X Height
Baseline
Descenders

Aperture Open space in a letter is called the counter or the aperture. This positive/negative space dictates how the letter is interpreted. Aperture relationship to character weight is fundamental in determining the face personality.

Between typefaces, the x height is the most variable.
The larger the x height, the more legible - common especially in contemporary faces. Type with larger apertures is usually easier to read in smaller point sizes.


Classical/fine typography was developed optically not mechanically.

Curves extend past x height and baseline which results in a more balanced impression for the eye rather than a lot of the contemporary faces which sit exactly on the x height line and the baseline.


On screen (and in smaller sizes), generally use Sans Serifs. Because each character is made up of pixels, the simpler the shape, the more clearly it renders on screen. Serifs can't possibly retain their shapes at smaller sizes and the distinguishing character shapes blur.
Headlines work well in Serifs: NYT.com, but San Serifs also have a great deal of impact: design studio Motivo's website


Manipulating the typeface
True typefaces have their own uniquely desiged shapes for italics and bolded versions. For example, smaller point sizes have larger counters and larger point sizes have smaller counters.

When you bold or italicize in the dialogue box, the computer is doing a mathematical change which is basically offsetting (slanting) the original letter. You will stay truer to the typeface if you use the designed different versions rather than applying an application setting


Kerning is width in between the letters. Applications render fonts with variable pitch and also have auto kerning capability. They compute the worst pair (the one that is too close or too far) and set the width for the rest of the word. Words are checked by letter triples (3 letter blocks at a time). Notice the difference between fixed pitch or monospaced fonts, ex. Courier, where all the characters are assigned the same width.


Tracking, or letter spacing, is kerning that is equal throughout the entire word. Increasing the kerning can slow the reader down, can make the word fall apart.


Leading is the vertical space between lines of text. Literally referenced from the lead the typographers used to space out between line of type. Amount of leading is informed by the line length. Increase the leading for faster reading of long lines (opposite for short).


In HTML, specify fonts that users have and that will look consistent regardless of viewing on MAC or PC. Remember MACs show 72 dpi on screen and print the same size as you see on your screen. PCs display at 96 dpi (133%), and the printed version looks smaller. It's easier to read Serifed fonts on PCs because of the magnification.

For the most actuate specification of system / dynamic text, use CSS.


Good HTML text spec combination: Geneva, Verdana, Arial (standard PC system font), Helvetica (standard MAC system font)

Use this HTML type spec to see how different faces, sizes will appear.
But seriously consider specifying your dynamic text in Cascading Style Sheets. It's very easy, you have control over face, size, color, weight, letterspacing, and linespacing. The best site for reference and tutorials is W3C School.

Type effects on the screen:
Smaller type looks darker
Larger type looks lighter

When using type with a low contrast to the background. The mood can be mellow and calm, but if used for long copy blocks, it can be tiring


Less text is more.
Break up the information with headers and links.
Use shorter lines of text and more of them (about 400 pixels wide).
Make editorial decisions about the amount of text in each chunk.
Design the layout so text does not appear in a single long block.


Word Form
People read the shapes of words, not the letters. It is easier to quickly read a word with upper and lower case than a word in all cases (looks like a rectangle).

The unique shape the word creates is what a person recognizes. It is also a more interesting shape. Plus, using all caps on the computer screen looks like YELLING.






1998-2004 www.valcasey.com