sm2222: information design and visualization session 3: typography 23 september 2005
DESCRIPTION
SM2222: Information Design and Visualization Session 3: Typography 23 September 2005. what is typography?. the Greek words - typos = “form” , grapho = “write” - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/1.jpg)
SM2222: Information Design and Visualization
Session 3: Typography
23 September 2005
![Page 2: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/2.jpg)
• the Greek words - typos = “form” , grapho = “write”
• the art and technique of selecting and arranging type styles, point sizes, line lengths, line leading, character spacing, and word spacing for typeset applications.
• the presentation of text in a manner that is not only easy to read but also visually engaging
what is typography?
![Page 3: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/3.jpg)
• German metal-worker• inventor of movable type
Johannes Gutenberg (1398 –1468)
![Page 4: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/4.jpg)
Gutenberg Bibles. February 23, 1455
![Page 5: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/5.jpg)
• Black Letter• Roman• Old Style• Transitional• Modern• Egyptian• Sans Serif
classifications of type
![Page 6: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/6.jpg)
classifications of type – black letter
![Page 7: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/7.jpg)
classifications of type - roman
![Page 8: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/8.jpg)
classifications of Type – old style
• a style of Roman letter
• less thick and thin contrast
• typefaces: Garamond (1530), Caslon (1734), Palatino (1948)
![Page 9: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/9.jpg)
classifications of Type – transitional
• new letterform was developed in 1702 – 1737
• intermediate between Old Style and Modern
• greater contrast between capital and lowercase letters
• typefaces: Baskerville, Century Schoolbook
![Page 10: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/10.jpg)
classifications of Type – modern
• it was introduced in France in 1784
• extreme thick and thin contrast, no bracketed serifs
• typefaces: Bondoni (1787)
![Page 11: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/11.jpg)
classifications of Type – egyptian/slab serif
• squared-off serifs were introduced
• reflected the rigidness of ancient Egyptian hieroglyphics
• typefaces: Rockwell (1933), Geometric Slabserif
![Page 12: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/12.jpg)
classifications of Type – sans serif
• without the thick and thin line variations
• without ornamentation
• extreme thick and thin contrast, no bracketed serifs
• typefaces: Futura (1927), Helvetica (1957), Univers
![Page 13: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/13.jpg)
![Page 14: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/14.jpg)
Timeline
![Page 15: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/15.jpg)
![Page 16: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/16.jpg)
![Page 17: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/17.jpg)
![Page 18: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/18.jpg)
a period of bauhaus (1919 – 1933)
• established in German in 1919
• WWI 1914 - 1918
• founded by Walter Gropius
• form follows function
• to unify art, craft, and technology
• architecture, furniture design,
typography, graphic design
![Page 19: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/19.jpg)
Laszlo Moholy-Nagy (1895 – 1946)
“Typography is a tool of communication. It must be communication in its most intense form. The emphasis must be on absolute clarity...Legibility – communication must never be impaired by an a priori esthetics. Letters must never be forced into a preconceived framework…We want to create a new language of typography whose elasticity, variability and freshness of typographical composition”
![Page 20: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/20.jpg)
![Page 21: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/21.jpg)
Herbert Bayer (1900-1985)
• omitted capital letters in 1925
• experimented with flush-left, ragged-right
• design universal type to maximize legibility
• extreme contrasts of type size and weight
• bars, rules, points and squares were used
![Page 22: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/22.jpg)
![Page 23: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/23.jpg)
Jan Tschichold (1902–1974)
• issued 24-page of “elementare typographie” in 1925
• demonstrated asymmetrical typography
• the aim of typographic work delivers a message in the shortest and most efficient manner
• type should be placed in motion rather than at rest
• type should be elementary in pure form w/o ornament (such as Sans Serif)
![Page 24: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/24.jpg)
![Page 25: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/25.jpg)
![Page 26: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/26.jpg)
![Page 27: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/27.jpg)
Eric Gill (1882–1940)
• Gill Sans designer
• inspired by Edward Johnston’s alphabet
• typefaces designed in 1928 - 1930
![Page 28: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/28.jpg)
![Page 29: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/29.jpg)
Paul Renner (1878-1956)
• Futura designer
• inspired by Bayer’s universal alphabet
• typefaces designed in 1927
![Page 30: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/30.jpg)
Union Pacific Railroad
![Page 31: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/31.jpg)
Herb Lubalin (1918 - 1981)
• space and surface
• characters as both visual form and message communication
• letterforms became images, images became letterforms
• making type talk
• phototypography
![Page 32: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/32.jpg)
![Page 33: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/33.jpg)
![Page 34: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/34.jpg)
![Page 35: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/35.jpg)
![Page 36: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/36.jpg)
![Page 37: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/37.jpg)
the anatomy of type
![Page 38: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/38.jpg)
• Upper & Lower case
• Numbers : 0 – 9
• Punctuation marks
• Special Characters: $,…
![Page 39: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/39.jpg)
• Ascender
• Descender
• X – height
• Baseline
• Serif
• Stem
• Counter
![Page 40: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/40.jpg)
![Page 41: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/41.jpg)
![Page 42: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/42.jpg)
![Page 43: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/43.jpg)
• Point and Pica
• 6 picas = 1 inch
• 12 points = 1 pica
• 72 points = 1 inch
![Page 44: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/44.jpg)
![Page 45: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/45.jpg)
leading
![Page 46: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/46.jpg)
kerning
![Page 47: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/47.jpg)
![Page 48: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/48.jpg)
![Page 49: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/49.jpg)
![Page 50: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/50.jpg)
alignment
![Page 51: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/51.jpg)
emphasis: a block of text
![Page 52: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/52.jpg)
hierarchy
![Page 53: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/53.jpg)
horizontal & vertical scaling
![Page 54: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/54.jpg)
type and visual
![Page 55: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/55.jpg)
![Page 56: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/56.jpg)
![Page 57: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/57.jpg)
![Page 58: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/58.jpg)
![Page 59: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/59.jpg)
![Page 60: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/60.jpg)
![Page 61: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/61.jpg)
![Page 62: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/62.jpg)
![Page 63: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/63.jpg)
![Page 64: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/64.jpg)
![Page 65: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/65.jpg)
![Page 66: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/66.jpg)
david carson
![Page 67: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/67.jpg)
![Page 68: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/68.jpg)
![Page 69: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/69.jpg)
![Page 70: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/70.jpg)
![Page 71: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/71.jpg)
![Page 72: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/72.jpg)
![Page 73: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/73.jpg)
![Page 74: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/74.jpg)
![Page 75: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/75.jpg)
![Page 76: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/76.jpg)
![Page 77: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/77.jpg)
![Page 78: SM2222: Information Design and Visualization Session 3: Typography 23 September 2005](https://reader036.vdocument.in/reader036/viewer/2022070406/56814257550346895dae81bd/html5/thumbnails/78.jpg)