GAD332 Interface Design

1
GAD332 Interface Design

• The History of Fonts
• Typeface Anatomy
• Five Classic Typefaces

2
The History of Fonts
3
The History of Fonts

• French word fonte
• something that has been melted
• Melted metal / wood were most commonly used
• Typeface families began to emerge
• Collections of closely-related typeface designs
  that may include hundreds of styles

4
The History of Fonts

• 1450s - 1950s
• characters of lead wood were arranged by hand
  onto a Letterpress

5
Letterpress
6
The History of Fonts

• 1890s the Linotype was invented
• named hot metal type it set lines of text

7
(No Transcript)
8
The History of Fonts

• Phototypesetting became popular in the early
  1950s
• Designers could produce multiple sizes from a
  single font
• Kerning is introduced

9
Kerning corner

• The name derives from a cognate of corner
  taking a notch out of a corner
• the process of adjusting letter spacing in a
  proportional font
• Spawned a large type-design industry in the 1960s
  and 1970s

10
(No Transcript)
11
The History of Fonts

• The mid-1970s saw all of the major typeface
  technologies and all their fonts in use
• Original Letterpress
• Mechanical Linotype
• Computer-controlled phototypesetters
• Early digital typesetters

12
The History of Fonts

• From the mid-1980s, as digital typography has
  relentlessly grown
• American spelling of font was adopted
• Usually means a computer file
• Containing scalable, outline letterforms
• Designers of some fonts, such as Microsoft's
  Verdana, intend their product primarily for use
  on computer screens.

13
Typeface Anatomy
SerifsProportionallyMeasurements
14
Serifs

• Two main categories
• serif
• Have small features at the end of strokes within
  letters
• san-serifs
• The printing industry refers to typeface without
  serifs as sans-serif
• (from French sans "without")

15
San-serif font
Serif font
Serif font with serifs highlighted in red
16
Serifs

• Serifs are often easier to read in long passages
• Greater familiarity of serif typefaces
• Printed works such as newspapers and books almost
  always use serif fonts for at least the text body
• Web sites do not have to specify a font
• Those websites that do specify a font, most use
  modern sans-serif fonts such as Verdana
• It is commonly believed that, in contrast to the
  case for printed material, sans-serif fonts are
  easier than serif fonts to read on computer
  screens due to their lower resolution.

17
(No Transcript)
18
Proportionality

• Most people generally find proportional fonts
  nicer-looking and easier to read
• More common in professionally printed material
• GUI computer applications (such as word
  processors and web browsers) typically use
  proportional fonts
• Many proportional fonts contain fixed-width
  figures so that columns of numbers stay aligned

19
Measurements
20
Measurements

• Baseline
• Imaginary horizontal line on which characters
  rest
• Descender
• Some parts of glyphs lie below the baseline
• Ascent
• The distance between the baseline and the top of
  the glyph that reaches farthest from the baseline
• X-height
• The ratio between the x-height and the ascent
  often serves to characterize typefaces.

21
Five Classic Typefaces
Garamond FrenchBaskerville EnglishBodoni
ItalianCentury AmericanHelvetica Swiss
Old Style 1617Transitional 1757Modern 1780Eg
yptian 1894Contemporary 1957
22
(No Transcript)
23
(No Transcript)
24
(No Transcript)
25
(No Transcript)
26
(No Transcript)
27
(No Transcript)
28
(No Transcript)
29
(No Transcript)
30
(No Transcript)
31
(No Transcript)
32
Questions?