Typography

1
Typography

• Vocabulary and Guidelines

This material has been developed by Georgia Tech
HCI faculty, and continues to evolve.
Contributors include Gregory Abowd, Jim Foley,
Diane Gromala, Elizabeth Mynatt, Jeff Pierce,
Colin Potts, Chris Shaw, John Stasko, and Bruce
Walker. Comments directed to foley_at_cc.gatech.edu
are encouraged. Permission is granted to use with
acknowledgement for non-profit purposes. Last
revision October 2003.
2
Agenda

• Font
• Case
• Style
• Size
• Letterforms
• Letterspacing

• Linespacing
• Alignment
• Line length
• Margins
• Hierarchy
• Examples

3
Fonts

• Serif font readability for long, extended text
• Sans serif font legibility for headlines,
  headings, captions
• (both are variable spaced)
• Monospace font

4
Font Guidelines

• Use serif for long, extended text sans serif for
  headlines
• Use 1-2 fonts/typefaces (3 max)
• Use of normal, italics, bold is OK
• Never use bold, italics, capitals for large
  sections of text
• Use 1-3 point max
• Be careful of text to background color issues

5
Font Examples

• Use regularly
• Serif Times,
• Sans serif Arial, Verdana

• Dont use regularly
• Decorative Comic Sans,
• Script
• Monospaced Courier,Lucida

6
Fontitis

• Too many fonts is bad

7
Fontitis ctd.

• Unless for artistic effect

8
Case

• UPPER and lower case
• AVOID HEAVY USE OF ALL UPPER CASE!!
• Studies have found that mixed case promotes
  faster reading

HOW MUCH FUN IS IT TO READ ALL THIS TEXT WHEN
ITS ALL IN CAPITALS AND YOU NEVER GET A REST.
USE ALL CAPS FOR HEADLINES AND HEADINGS
How much fun is it to read all this text when
its all in capitals and you never get a rest.
So use lower case for regular text
9
Style

• Plain text
• Italic text
• Bold text
• (Purists consider these as different fonts)

10
Size

• Type is measured in points

10 Point Times 12 Point Times 14 Point Times 16
Point Times 18 Point Times 20 Point Times 24
Point Times
11
Size

• Type sizes are not standard, but are based on old
  measurements of the piece of metal
• So it appears to be larger

12
Size Guidelines for Legibility

• Characters must subtend 10-20 minutes
• 10 minutes
• 0.1 character at 36
• 0.05 character at 18
• 70-90 recognition accuracy
• 20 minutes
• 0.1 character at 18
• 0.05 character at 9
• 96-98 recognition accuracy

13
Size Guidelines for Legibility

• Relationship between number of scan lines per
  character and recognition accuracy
• 6 lines 79-88
• 8 lines 92-94
• 10 lines 97-99

14
Letterforms
15
Letterforms
16
Letterforms
17
Letterspacing Kerning

• Because of optical illusions, spacing between
  letterforms are not fixed, but are adjusted
  according to the shapes of the two letters, which
  are called kern pairs.

18
Letterforms
19
Letterspacing Kerning, Tracking

• The space between TWO letters is kerning

• The space AMONG more than 2 letters is tracking

20
Letterspacing

• Strive for regular spacing and a uniform texture
• Which is better?

21
Letterspacing Mono and Variable

• Monospaced fonts typewriters, not very legible
• The quick brown fox jumped over the lazy dog.
• Variably spaced fonts spaces between each
  letterform varies with the shape of that
  letterform (called kerning pairs). Also called
  proportional spacing
• The quick brown fox jumped over the lazy dog.

22
Letterspacing Examples

• The quick brown fox jumped over the lazy dog.
• The quick brown fox jumped over the lazy dog.

23
Letterspacing at End of Sentences

• Use ONE space between sentences.
• Two spaces are a TYPEWRITING convention only. In
  the digital realm, the space between sentences is
  variable, and is calculated to work with one
  space. Using two spaces between sentences in the
  digital realm creates rivers of white space
  that impede legibility.

24
Linespacing (aka Leading)

• Line spacing is measured in points from baseline
  to baseline
• It is usually 20 larger than the point size of
  text (10 point type generally defaults to 12
  point leading)
• This is an example of larger linespacing between
  two lines

25
Linespacing Guidelines

• More line spacing generally results in greater
  legibility, until the lines seem to be separate
  lines.

26
Line Spacing Alignment Arabic
27
Alignment

• Justified type results in irregular spacing
  between words, or between words and letters, for
  mono-spacing without hyphenation. It also results
  in rivers of white space.
• Both impede legibility.

Justified type results in irregular
spacing between words, or between words and
letters. It also results in rivers of
white space. both impede
legibility. Newspapers historically only
justify type for reasons of tradition and
visual real estate ( per inch).
28
Alignment

• Flush left, ragged right most legible to western
  eyes.
• Centered type (except in small amounts) generally
  impedes legibility.

29
Line length

• For text, the optimum line length is 55 75
  characters per line (counting spaces).

30
Margins
Here is a some flush-left text that does not have
a margin on the right side. Not right

• ALWAYS provide a margin
• Lack of margins interfere with readability and
  legibility

Here is a some flush-left text that does have a
margin on the right. Much better
ALWAYS provide a margin Lack of margins interfere
with readability and legibility
Images from http//www.geocities.com/Paris/Louvre/
1680/bw.html
31
Typographical Hierarchy

• Provides structure based on similarity

32
Typographical Hierarchy plus Indentation

• 2 types of similarity - better

33
Wow
Yuk
34
More Wow
35
Font Control
36
Example
Which do you prefer? Why? Make a list! Do a
re-design
CRAFTS AND GAMES ARTS FESTIVAL OF ATLANTA AND
DECATUR
Crafts and Games Arts Festival Of Atlanta and
Decatur
SEPTEMBER 19-24
September 19-24 Come and Enjoy!
COME AND ENJOY
Applies lots of these principles
37
The End