typography beginning l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Typography Beginning PowerPoint Presentation
Download Presentation
Typography Beginning

Loading in 2 Seconds...

play fullscreen
1 / 58

Typography Beginning - PowerPoint PPT Presentation


  • 303 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Typography Beginning' - jana


Download Now 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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
typography beginning

Typography Beginning

Some essentials for CSS typography

And more

slide11
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
slide13
Gutenberg
    • 42-line Bible 1455
slide15
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
Early history of printing
  • First 300 years after 1450
  • Oldstyle fonts
  • Serif fonts
humanist venetian
Humanist (Venetian)
  • the first Roman type faces that appeared in Venice in 1470

Nicholas Jenson (1420-1480)

humanist
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
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
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
Transitional
  • eighteenth century (a time of transition)
  • type designers relied on mathematical or scientific principles to create new letterforms

John Baskerville

1706–1775

transitional24
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
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 modern28
Didone (Modern)
  • Developed by Didot family (French)
  • perfected by Giambattista Bodoni (Italian)

Giambattista Bodoni

1740–1813

didone modern29
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
slide31
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
Sans Serif
  • Reaction in art and design to WWI
monospace
Monospace
  • Designed for typewriters or other mechanical writing machines
  • Now its use is associated with computer code
cursive
cursive
  • Different from italic
  • Attempt at joined letters
fantasy
fantasy
  • Anything else
legibility and readability
Legibility and readability
  • Dictionary definitions are interchangeable
  • Typographic definitions are different
differences
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 readability41
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
Legibility example —bold text
  • Bold text eliminates contrast
legibility bold
Legibility —bold
  • Bold text eliminates contrast
legibility ultra bold
Legibility —ultra bold
  • Bold text eliminates contrast
legibility ultra bold45
Legibility —ultra bold
  • Bold text eliminates contrast
legibility 3 principles
Legibility —3 principles
  • Transparency
  • Big features
  • Restraint
transparency
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
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
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
Readability
  • For print
    • High contrast colours
    • serif font
  • For screen
    • High contrast colours
    • sans-serif font
readability line length
Readability —Line Length
  • In print 40–50 characters per line is most readable
    • i.e. 8 to 10 words per line
  • On screen, avoid text blocks more than 400px wide
readability line length52
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
readability size
Readability —size
  • Make sure important details like fine serifs on Modern fonts don’t disappear at small sizes
readability size54
Readability —size
  • Make sure important details like fine serifs on Modern fonts don’t disappear at small sizes
readability size55
Readability —size
  • Make sure important details like fine serifs on Modern fonts don’t disappear at small sizes
readability size56
Readability —size
  • Make sure important details like fine serifs on Modern fonts don’t disappear at small sizes
readability conclusions
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