1 / 58

Typography Beginning

Typography Beginning Some essentials for CSS typography And more Font History 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 The Gottingen Model Book c. 1450 Gutenberg

jana
Download Presentation

Typography Beginning

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Typography Beginning Some essentials for CSS typography And more

  2. Font History

  3. 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

  4. The Gottingen Model Book c. 1450

  5. Gutenberg • 42-line Bible 1455

  6. creation story

  7. 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)

  8. Early history of printing • First 300 years after 1450 • Oldstyle fonts • Serif fonts

  9. Humanist (Venetian) • the first Roman type faces that appeared in Venice in 1470 Nicholas Jenson (1420-1480)

  10. 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

  11. Humanist (Venetian)

  12. 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

  13. 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

  14. Garalde (Old Style)

  15. Transitional • eighteenth century (a time of transition) • type designers relied on mathematical or scientific principles to create new letterforms John Baskerville 1706–1775

  16. 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

  17. Transitional

  18. Birth of modern fonts

  19. 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

  20. Didone (Modern) • Developed by Didot family (French) • perfected by Giambattista Bodoni (Italian) Giambattista Bodoni 1740–1813

  21. 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

  22. Didone (Modern)

  23. 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

  24. Sans Serif • Reaction in art and design to WWI

  25. Edward Johston, London Underground Typeface 1916

  26. Paul Renner,Futura typeface 1928

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

  28. cursive • Different from italic • Attempt at joined letters

  29. fantasy • Anything else

  30. Part two

  31. Legibility and readability • Dictionary definitions are interchangeable • Typographic definitions are different

  32. 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?

  33. 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

  34. Legibility example —bold text • Bold text eliminates contrast

  35. Legibility —bold • Bold text eliminates contrast

  36. Legibility —ultra bold • Bold text eliminates contrast

  37. Legibility —ultra bold • Bold text eliminates contrast

  38. Legibility —3 principles • Transparency • Big features • Restraint

  39. 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

  40. 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

  41. 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

  42. Readability • For print • High contrast colours • serif font • For screen • High contrast colours • sans-serif font

More Related