Basic typography

1
Basic typography
2
Keep your eyes open!

• Start noticing typography.
• Look at logos on everyday household items, bus
  signs, cereal boxes . . . everywhere, especially
  in ads.
• Look at type treatments in print and on the Web.

3
How observant are you?

• On a traffic signal, whats the arrangement of
  the three colors from top to bottom?

4

• How many sides are there on a standard wood
  pencil?
• 6
• In playing cards, which king has one eye?

5

• Whats on the Cronkite School logo, which is
  right outside the entrance to this building?

6

• What symbol is part of the ASU logo?

7

• What bird forms the NBC logo?

8
Identify these logos
9
Identify these logos too
10
Terms to know

• Typeface A style of lettering, such as
  Helvetica, Futura, Comic Sans, Bodoni, Times,
  Papyrus, Apple Chancery, Sand, Lucida Handwriting
  
• Type family A group of similar typefaces, such
  as Franklin Gothic, Franklin Gothic Bold,
  Franklin Gothic Condensed
• Font A complete set of characters (A-Z, plus
  numbers, symbols) of one specific size, style and
  weight of a typeface

11
Type families
12
Anatomy of type

• Ascender The part of a letter that extends above
  the body (b, d, h, k, etc.)
• Descender The part of a letter that drops below
  the body (on g, p, y)
• Counter The empty spaces in letters, such as b,
  o, p and g

13
Anatomy of type
14
Classifying type

• By style Type can be serif (that means it has
  tiny strokes at the tips of each letter) or sans
  serif (no tiny strokes)
• By size Type is measured in points. There are 72
  points in an inch.

15
Classifying type by style

• Serif This is Times New Roman, one of the
  most common serif typefaces in print, serif
  type is easier to read
• Sans serif This is Arial, a sans serif
  typeface on a computer screen, sans serif type
  is easier to read (no serifs, therefore cleaner
  letters)

16
Classifying type by size

• Body type Type used for the text or body of
  articles (generally 10 to 12 points online)
• Display type Type that is larger than body type
  (headings, subheadings)

17
Relative sizes of type

• x-height The height of a lowercase x
• Fonts with tall x-heights look bigger (this is
  32-point Arial) than those with short x-heights
  (this is 32-point Times), even when theyre the
  same size.

18
Relative sizes of type
19
Other type terms

• Reverse type (the type is white the
  background is black or some other color)
• Outline type (white type outlined in a color)

20
Other type terms

• ALL UPPERCASE (same as ALL CAPS)
• Boldface (darker type)
• Italic (type slanted to the right)

21
Case

• lowercase younger audience
• upper case shouting
• upper and lower case traditional

22
New Web fonts

• Renowned type designer Matthew Carter took two
  years to design two screen-based font families
  Verdana and Georgia.
• The space between characters is much looser,
  making it easier to scan quickly on computer
  screen.

23
Print vs. Web fonts

• Do you prefer to read Verdana online? (26)
• Do you prefer to read Arial online? (26 point)
• Do you prefer to read Georgia online? (26 point)
• Do you prefer to read Times online? (26 point)

24
Characteristics of different faces
25
The computer is a tool . . .

• . . . to help you create your Web site.
• The important ingredients are the content and
  your creativity!

26
(No Transcript)
27
Blurry to suggest unfulfilled,still looking,
still seeking
"Perfect Balance" is symmetrical suggests
elegance and harmony
Gray is between black and white suggests
simplicity
Light, feather-like
Bold, contoured, steel-like
28
(No Transcript)
29
No two lines are the same, yet the whole looks
balanced
Top left is balancedby bottom right
ALL CAPS
Everything in themiddle is centered
Red in last line fades so it doesnt
overshadow.Red contrasts with black. Rose played
for the Reds.
30
(No Transcript)
31
Most importantwords
Echo of hornsEcho of horns
Diagonal from top leftto lower right
32

• THE END