1. Typography Beginning Some essentials for CSS typography And more

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.1480–1561

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 1706–1775

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 1740–1813

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