Typography?
 typog… what?
Typography is the art and
techniques of arranging type, type
design, and modifying type glyphs.

                        h...
Type history
the quick and dirty version
Cave painting 30000 BC
From figures/symbols to characters/letters
Ancient Egyptian




                                                                                                   De...
Roman inscriptional capitals on the base of Trojan's Column, ca 113.

Sample of Carolingian writing from the Carolingian G...
Invention and technology of movable type in the 1430s

The systems involved were first assembled in Germany by the goldsmit...
Classical 1450-1800
Industrial 1800-1880
Modern 1880-1960
Bauhaus -- the radically simplified forms, the rationality and functionality, and the idea that mass-produ...
Swiss Modern 1945-1970
Postmodern 1970
Digital 1985, Neville Brody art director at Face
Raygun and Wired magazine mid 1990’s
David Carson, art director of Raygun
Spread from Raygun magazine, 1997
Digital use of characters and symbols, back to the cave painting…
Type classification
    the elevator version
Palatino


Old Style

Old style fonts have the following characteristics:

  * Based on pen drawn forms
  * Little contras...
Times

Transitional

The transitional typefaces bridged the Old Style and Modern periods, and took design elements from bo...
Bodoni


Modern
Modern typefaces are distinctive: they employ strong vertical elements and very fine hairlines for a very c...
Courier


Slab Serif
Slab serif typefaces use heavy, squared off finishing strokes — hence the name quot;slabquot; serif. T...
Helvetica

Sans Serif
Ironically, it was William Caslon IV (great-grandson of the quot;originalquot; Caslon, who produced ...
Brush Script


Script
Based on had drawn lettering

Examples: Kunstler Schrift, Comic Sans

                                   



Dingbat
Illustrative symbols

Examples: Zapf Dingbat, Webdings
Type rules
  the 10 dont’s
Do not use every font you own in one document
DO NOT USE ALL CAPITAL LETTERS




Capital letter were not designed to stand next to one another
We read words not letters
We read words not letters

Da er det bare å glemme stavekontrollen:

En visktenpaleig unsdelrøkese gjort ved et untivserie...
Do not center large amounts of text


  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
   diam nonummy nibh...
Do not leave colums with one word.


Lorem ipsum dolor sit amet, con-
sectetuer adipiscing elit, sed diam
nonummy nibh eui...
Don’t make rivers flow through your colum.

Lorem ipsum dolor sit amet, consectetuer ad-
ipiscing elit, sed diam nonummy n...
!
LOVE   type
Type on screen?
    more rules...
Size
Amount of text
 Line length
Color contrast
What font is at the other end?

     HTML vs FLASH
HTML use CSS (Cascading Style Sheets)
FLASH embeds
fonts, images, video, sound
Type where?
 Links and resources
Type and community:
http://www.typophile.com/

Type and motion:
http://www.smashingmagazine.com/2007/11/19/monday-inspirat...
Type 1 2 3
Type 1 2 3
Type 1 2 3
Upcoming SlideShare
Loading in...5
×

Type 1 2 3

2,103

Published on

A quick introduction to typography.

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,103
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
125
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Type 1 2 3

  1. 1. Typography? typog… what?
  2. 2. Typography is the art and techniques of arranging type, type design, and modifying type glyphs. http://en.wikipedia.org/wiki/Typography
  3. 3. Type history the quick and dirty version
  4. 4. Cave painting 30000 BC
  5. 5. From figures/symbols to characters/letters
  6. 6. Ancient Egyptian Demotic Greek Rosetta stone discovered in 1799, it was the key for the decryption of the old Egyptian Hieroglyphic code.
  7. 7. Roman inscriptional capitals on the base of Trojan's Column, ca 113. Sample of Carolingian writing from the Carolingian Gospel Book produced between 820 and 830 AD
  8. 8. Invention and technology of movable type in the 1430s The systems involved were first assembled in Germany by the goldsmith Johann Gutenberg.
  9. 9. Classical 1450-1800
  10. 10. Industrial 1800-1880
  11. 11. Modern 1880-1960 Bauhaus -- the radically simplified forms, the rationality and functionality, and the idea that mass-production was reconcilable with the individual artistic spirit -- were already partly developed in Germany before the Bauhaus was founded.
  12. 12. Swiss Modern 1945-1970
  13. 13. Postmodern 1970
  14. 14. Digital 1985, Neville Brody art director at Face
  15. 15. Raygun and Wired magazine mid 1990’s
  16. 16. David Carson, art director of Raygun
  17. 17. Spread from Raygun magazine, 1997
  18. 18. Digital use of characters and symbols, back to the cave painting…
  19. 19. Type classification the elevator version
  20. 20. Palatino Old Style Old style fonts have the following characteristics: * Based on pen drawn forms * Little contrast between thick and thin strokes * Bracketed serifs * Small x-heights * Counters with a diagonal stress Garamond was introduced in 1541, and is known as the first Old Style Roman. It remained popular for hundreds of years. Caslon was introduced in 1734. Caslon was used in the first printings of the Declaration of Independence and the United States Constitution. Old Style typefaces were designed to imitate handwriting. They are good book types, being highly legible Example fonts: Bembo, Palatino, Trajan, Garamond, Caslon
  21. 21. Times Transitional The transitional typefaces bridged the Old Style and Modern periods, and took design elements from both styles. Transitional typefaces have the following characteristics: * Greater contrast between thick and thin strokes * More vertical counters * Very sharp serifs Baskerville introduced the transitional typefaces in 1757. Transitional typefaces are often used in text-heavy designs. Examples: Baskerville, Caslon, Times
  22. 22. Bodoni Modern Modern typefaces are distinctive: they employ strong vertical elements and very fine hairlines for a very contrasty look. * Strong vertical elements * Contrast between thick and thin strokes * Very fine hairlines Modern roman typefaces were introduced in the 1780s. Modern typefaces are well suited to headings and title pages. Examples: Bodoni, New Century Schoolbook
  23. 23. Courier Slab Serif Slab serif typefaces use heavy, squared off finishing strokes — hence the name quot;slabquot; serif. They have the following characteristics: * Heavy, square serifs * Few or no thin strokes * Few or no delicate curves * Lack contrast All of this makes slab serif typefaces ideal for low quality printing: faxes and newsprint. They also read well on screen, and look good in presentations. Examples: Clarendon, Courier, Memphis, Rockwell
  24. 24. Helvetica Sans Serif Ironically, it was William Caslon IV (great-grandson of the quot;originalquot; Caslon, who produced the first type without serifs in 1816. Sans serifs were not embraced at first, and in fact, in Great Britain the common term for them is still Grotesque. It is hotly debated whether or not sans serif is suitable for text. Most will say that it isn't, because it's the serif that leads the eye and makes type readable. Others will argue that sans serif type, when properly set, is perfectly suited to text. Examples: Franklin Gothic, Univers, Helvetica, Futura, Frutiger
  25. 25. Brush Script Script Based on had drawn lettering Examples: Kunstler Schrift, Comic Sans
  26. 26.   Dingbat Illustrative symbols Examples: Zapf Dingbat, Webdings
  27. 27. Type rules the 10 dont’s
  28. 28. Do not use every font you own in one document
  29. 29. DO NOT USE ALL CAPITAL LETTERS Capital letter were not designed to stand next to one another
  30. 30. We read words not letters
  31. 31. We read words not letters Da er det bare å glemme stavekontrollen: En visktenpaleig unsdelrøkese gjort ved et untivseriet i Enlgnad har vist at desrom de to føsrte- og to siste botsvkeane i alle oredne i en tekst er riktig plessart, spllier det liten rolle hvkilen reføkkelge de øvirge boskvetane i oredne kommer. Tektsen er fullt lesbar selv om de andre bokeastvne kommer huilbtertlulter! Dette er fordi vi ikke leser hver eneklt botksav, men ser bidlet av ordet som hehleet. Ha en fin dag! This text is in norwegian, sorry…
  32. 32. Do not center large amounts of text Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam- corper suscipit lobortis nisl ut aliquip ex ea commodo conse- quat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facili- sis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril de- lenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullam- corper suscipit lobortis nisl ut aliquip ex ea commodo conse- quat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac- cumsan et iusto odio dignissim qui blandit praesent.
  33. 33. Do not leave colums with one word. Lorem ipsum dolor sit amet, con- sectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mo- lestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril de- lenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
  34. 34. Don’t make rivers flow through your colum. Lorem ipsum dolor sit amet, consectetuer ad- ipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo cons. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
  35. 35. ! LOVE type
  36. 36. Type on screen? more rules...
  37. 37. Size
  38. 38. Amount of text Line length Color contrast
  39. 39. What font is at the other end? HTML vs FLASH
  40. 40. HTML use CSS (Cascading Style Sheets)
  41. 41. FLASH embeds fonts, images, video, sound
  42. 42. Type where? Links and resources
  43. 43. Type and community: http://www.typophile.com/ Type and motion: http://www.smashingmagazine.com/2007/11/19/monday-inspiration-typography-in-motion/ Experimental type: http://www.smashingmagazine.com/2008/05/12/sexy-bold-and-experimental-typography/ Type posters: http://www.smashingmagazine.com/2008/02/25/breathtaking-typographic-posters Type management: http://www.linotype.com/fontexplorerX/ Type recognition: http://new.myfonts.com/whatthefont/ Type posters: http://www.smashingmagazine.com/2008/02/25/breathtaking-typographic-posters/ Type love: http://ilovetypography.com/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×