
Typography Beginning Some essentials for CSS typography And more
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
Gutenberg • 42-line Bible 1455
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)
Early history of printing • First 300 years after 1450 • Oldstyle fonts • Serif fonts
Humanist (Venetian) • the first Roman type faces that appeared in Venice in 1470 Nicholas Jenson (1420-1480)
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
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
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
Transitional • eighteenth century (a time of transition) • type designers relied on mathematical or scientific principles to create new letterforms John Baskerville 1706–1775
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
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
Didone (Modern) • Developed by Didot family (French) • perfected by Giambattista Bodoni (Italian) Giambattista Bodoni 1740–1813
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
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
Sans Serif • Reaction in art and design to WWI
Monospace • Designed for typewriters or other mechanical writing machines • Now its use is associated with computer code
cursive • Different from italic • Attempt at joined letters
fantasy • Anything else
Legibility and readability • Dictionary definitions are interchangeable • Typographic definitions are different
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?
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
Legibility example —bold text • Bold text eliminates contrast
Legibility —bold • Bold text eliminates contrast
Legibility —ultra bold • Bold text eliminates contrast
Legibility —ultra bold • Bold text eliminates contrast
Legibility —3 principles • Transparency • Big features • Restraint
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
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
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
Readability • For print • High contrast colours • serif font • For screen • High contrast colours • sans-serif font