Typography Beginning

1
Typography Beginning

• Some essentials for CSS typography
• And more

2
(No Transcript)
3
(No Transcript)
4
(No Transcript)
5
(No Transcript)
6
(No Transcript)
7
(No Transcript)
8
(No Transcript)
9
(No Transcript)
10
Font History
11

• Type faces written to imitate written script
• At the beginning of the era of movable type,
  manuscript books were the real thing, and printed
  books were imitations

12
The Gottingen Model Book c. 1450
13

• Gutenberg
• 42-line Bible 1455

14
creation story
15

• Humanist or Roman fonts
• An imitation of the script supposed to be used by
  humanist scribes
• Italic or Cursive fonts
• Griffo created the most famous in imitation of
  cancelleresca corsiva, or cursive writing of the
  papal chancery
• Gothic or Textualis or Blackletter fonts
• Imitation of gothic script (Gutenberg Bible)

16
Early history of printing

• First 300 years after 1450
• Oldstyle fonts
• Serif fonts

17
Humanist (Venetian)

• the first Roman type faces that appeared in
  Venice in 1470

Nicholas Jenson (1420-1480)
18
Humanist

• Strong, bracketed serifs
• letters are in general wide and heavy in colour
• characteristic letters are the wide lower case e
  with a diagonal bar to the eye
• a square full point or period

19
Humanist (Venetian)
20
Garalde (Old Style)

• designed by such masters as
• Claude Garamond (French)
• Aldus Manutius (Venetian)
• include some of the most popular Roman styles in
  use today

Claude Garamond c.14801561
21
Garalde

• rounded serifs
• moderate contrast between strokes
• letters are open, rounded and very readable
• thick strokes of curved letters are off-balanced
• angle of stress less acute than Humanist types

22
Garalde (Old Style)
23
Transitional

• eighteenth century (a time of transition)
• type designers relied on mathematical or
  scientific principles to create new letterforms

John Baskerville 17061775
24
Transitional

• rounded serifs
• less formal than Modern (Didone), but more formal
  than Garalde
• comparable to both Garalde and Modern
• curved letters are more balanced than Garalde
• angle of stress is near vertical, like Modern

25
Transitional
26
Birth of modern fonts
27
Didone (Modern)

• late eighteenth century
• improvements in paper production, composition,
  printing and binding
• made it possible to develop a type style with
  strong vertical emphasis and fine hairlines

28
Didone (Modern)

• Developed by Didot family (French)
• perfected by Giambattista Bodoni (Italian)

Giambattista Bodoni 17401813
29
Didone (Modern)

• thin, straight serifs
• extreme contrast between the thick and thin
  strokes
• curved letters are balanced and slightly
  compressed
• angle of stress is vertical
• Prints best on a smooth, matt-finish, white paper
  in black ink

30
Didone (Modern)
31
Note

• All these fonts are classified in CSS under the
  font-family serif
• Ones with fine features or fine lines are not as
  suitable for screen display

32
Sans Serif

• Reaction in art and design to WWI

33
Edward Johston, London Underground Typeface 1916
34
Paul Renner, Futura typeface 1928
35
Monospace

• Designed for typewriters or other mechanical
  writing machines
• Now its use is associated with computer code

36
cursive

• Different from italic
• Attempt at joined letters

37
fantasy

• Anything else

38
Part two
39
Legibility and readability

• Dictionary definitions are interchangeable
• Typographic definitions are different

40
Differences

• Legibility
• Can the shapes of the text be made out?
• Is the signal getting through?
• Readability
• Can the reader read and absorb the content with
  ease?

41
Legibility and Readability

• Legibility is a function of
• typeface design about distinguishing one letter
  from another in a particular typeface
• use of type on a page or a screen
• Readability is a function of typography
• about how easily words, phrases and blocks of
  copy can be read

42
Legibility example bold text

• Bold text eliminates contrast

43
Legibility bold

• Bold text eliminates contrast

44
Legibility ultra bold

• Bold text eliminates contrast

45
Legibility ultra bold

• Bold text eliminates contrast

46
Legibility 3 principles

• Transparency
• Big features
• Restraint

47
Transparency

• typefaces should be transparent to the reader
• the content should be more important than the
  container
• typefaces should not call undue attention to
  themselves

48
Big Features

• Legible fonts have
• large, open counters
• counters are the white space within letters such
  as o, e, c,
• ample lowercase x-heights
• character shapes that are obvious and easy to
  recognize

49
Restraint

• legible typefaces
• are not excessively light or bold
• weight changes within character strokes are
  subtle
• serifs (if present) do not call attention to
  themselves

50
Readability

• For print
• High contrast colours
• serif font
• For screen
• High contrast colours
• sans-serif font

51
Readability Line Length

• In print 4050 characters per line is most
  readable
• i.e. 8 to 10 words per line
• On screen, avoid text blocks more than 400px wide

52
Readability Line Length

• If you have longer lines give more leading
• Allow the reader to connect the end of one line
  easily to the beginning of the next

53
Readability size

• Make sure important details like fine serifs on
  Modern fonts dont disappear at small sizes

54
Readability size

• Make sure important details like fine serifs on
  Modern fonts dont disappear at small sizes

55
Readability size

• Make sure important details like fine serifs on
  Modern fonts dont disappear at small sizes

56
Readability size

• Make sure important details like fine serifs on
  Modern fonts dont disappear at small sizes

57
Readability conclusions

• Readable text
• Like background music in a movie
• It aids the overall reading experience without
  making the reader think about the text
• Make the text interesting, but not too
  interesting
• Make use of inbuilt font characteristics

58
Legibility and Readability

• Questions?