6.089 Aufrufe

Veröffentlicht am

The term “Typography” comes from Greek words: “typos” (form) & “graphe” (writing). Easily the nemesis for most people - as a subject of understanding and application as well. This is my feeble attempt at explaining the very basics of "typography", its history, characteristics, terminology and best-practices.

Veröffentlicht in: Design
0 Kommentare
9 Gefällt mir
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe insgesamt
Auf SlideShare
Aus Einbettungen
Anzahl an Einbettungen
Gefällt mir
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie


  1. 1. Typography - Kabir Malkani* This presentation has been compiled from references available from the Internet. This is meant purely for educational purposes and the presenter does not claim to hold any ownership whatsoever; of the content (textual or graphical) included in this presentation. The ownership and copyrights of the following content belong to the respective brands /agencies / artists showcased in this presentation.
  2. 2. Topics CoveredO A Brief History O Special Formatting O Hyphens & DashesO Introduction to Typography O Line BreaksO Font Anatomy O Drop Caps O Raised CapsO Type Classification O Typographer Quotes & Inch MarksO Terminology O Spaces O Font Size O Boxed Text O Grid O Weights & Styles O Best Practices O Letter Spacing (Kerning & O Usage To create Mood Tracking) O Ligatures O Leading (Line Spacing) O Rag O Glyphs O Widows & Orphans O Choosing a Type O Ligatures O Choosing Pairing Fonts O Paragraph Rules O Typography & the Web O Tabs O Examples of Good Typography O Indents
  3. 3. A Brief History… Ancient writing systemsEgyptian Sumerian Cuneiform Greek Alphabet SystemHieroglyphics 3000 BC 800 BC3200 BC – AD 400 Still used today as technical symbols in domains such as mathematics, science etc.
  4. 4. A Brief History… Gutenberg Bible – The 1st Printed bookWritten in Latin, the Gutenberg Bible Johannes Gutenberg A Replica of thewas printed by Johannes Gutenberg, in 1398 - 1468 Gutenberg PrintingMainz, Germany, in the 1450s German Engraver & Press Inventor of the Mechanical Movable Type Printing Press
  5. 5. A Brief History…Geoffroy Troy – Enlightenment & AbstractionFrench painter and designer Geofroy Tory believed that the proportions of the alphabet should reflect theideal human form. He wrote, “the cross-stroke covers the man‟s organ of generation, to signify thatModesty and Chastity are required, before all else, in those who seek acquaintance with well-shapedletters.” Geoffroy Tory 1480 - 1533 Humanist and Engraver - His lifes work has heavily influenced French publishing to this day.
  6. 6. A Brief History… Early Typographers Nicholas Jenson was responsible for the development of the first full roman typeface, which was based on humanistic characteristics and was highly legible.Nicholas Jenson1420 – 1480Typographer, FrenchEngraver, Type Designer Creator of the Roman typeface
  7. 7. A Brief History… Early Typographers Aldus Manutius 1449 – 1515 Humanist, Italian Printer & Publisher Aldus introduced small and handy pocket editions of the classics. He commissioned Francesco Griffo to cut a slanted type known today as italic. He and his grandson are credited with introducing a standardized system of punctuation. The software company Aldus was named after him.„Aristotle‟ printed byAldus Manutius, 1495-98
  8. 8. A Brief History… Early Typographers Claude Garamond 1490 – 1561 French Publisher, Type Designer & Punch Cutter Credited with the introduction of the apostrophe, the accent and the cedilla to the French language. He was an assistant to Geoffroy Tory Several contemporary typefaces, including those currently known as Garamond, Granjon, and Sabon, reflect his influence.
  9. 9. A Brief History… Early Typographers Fourniers contributions to printing were his creation of initials and ornaments, his design of letters, and his standardization of type sizes He designed typefaces including Fournier & Narcissus He also developed a system of type measurement, which was further developed by François-Ambroise Didot into the point based system thatPierre Simon still exists today.Fournier1712 - 1768 Fournier‟s Type ConstructionFrench punch-cutter, typefounder andtypographic theoretician..
  10. 10. A Brief History… Early TypographersWilliam Caslon John Baskerville Giambattista Bodoni1692 - 1766 1706 - 1775 1740 - 1813English gunsmith and English businessman, in areas Italian typographer, type-designer of typefaces including japanning and papier- designer, compositor, printer and mâché, but he is best publisher. remembered as a printer and typographer.
  11. 11. Introduction to Typography ty·pog·ra·phy The term “Typography” comes from Greek words: “typos” (form) & “graphe” (writing) Definition: Typography is the art and technique of arranging type in order to make language visible. The 3 goals of typography: O The 1st goal of typography is readability O The 2nd goal of typography is to transfer information to the reader in an efficient manner. O The 3rd goal is to use “type” to provide a sense of order and structure that makes logical and visual sense.
  12. 12. Introduction to TypographyTypeface or Font?O A Typeface is a family of typographical symbols and characters. Helvetica, Bodoni, Futura, Verdana, Myriad, Arial etc. are Typefaces.O A Font, on the other hand, is traditionally defined as a complete character set within a typeface, often of a particular size and style. Myriad Pro Semibold Italic 24 pts, Futura BdCn BT 18 pts etc. are Fonts Specimen of the Trajan typeface
  13. 13. Font Anatomy
  14. 14. Font Anatomy
  15. 15. Type ClassificationThere are a number of different ways to classify typefaces andtype families. The most common classifications are: O Serifs vs Sans Serif O Proportional vs Monospaced O Technical Styles O Mood
  16. 16. Type Classification Serifs vs Sans SerifsSerifs are semi-structural details on the Sans Serifs lack such serif details onends of some of the strokes that make up characters. Sans-serif typefaces are moreletters and symbols. modern in appearance than serifs. „Sans‟ is a French word, which means „without‟Serif typefaces guides the eyes from letter to Sans Serif types are usually used inletter and are therefore preferred for body magazine headlines and websites for it iscopy in print documents. The readability of easier to read off the computer screen. Theyserifs online has been debated. are also used to attract attention within a Print Ad for instance.Popular serif typefaces: Garamond & Caslon Popular sans serif typefaces: Helvetica & Futura
  17. 17. Type Classification Serifs vs Sans Serifs Sub-classification of Serifs Sub-classification of Sans SerifsOld Style serifs (also called humanist) Grotesque Transitional serifs Neo-grotesque Modern serifs Humanist Slab serifs Geometric
  18. 18. Type Classification Proportional vs. MonospacedProportional typefaces Monospace typefacesThe space a character takes up is Each character takes up the samedependent on the natural width of that amount of space. Narrower characterscharacter. An “i” takes up less space simply get a bit more spacing aroundthan an “m”, for example. Times New them to make up for the difference inRoman is a proportional typeface. width. Courier New is a monospace typeface.
  19. 19. Type Classification By Technical Styles (in chronological order)Blackletter Blackletter is the earliest printed type, and is based on hand-copied texts. It is traditionally associated with medieval German / Gothic and Old English. Dates back to around 1450Oldstyle Oldstyle is typified by a gradual thick-to-thin stroke, gracefully bracketed serifs, and slanted stress, as indicated by the red line through the uppercase „O‟, and as measured through the thinnest parts of a letterform. Dates back to around 1475
  20. 20. Type Classification By Technical Styles (in chronological order)Italic Usually considered a component of the roman typeface, italic really deserves its own class. italics are casual as opposed to the more formal roman forms of a font. Italics are generally used for emphasis, captions, and the like, and not for body text. Italics for sans-serifs are often called obliques. Dates back to around 1500Script Script is a formal replication of calligraphy. As type, script is unsuitable for a large body of text, but is widely used to lend a formal element to a layout. Dates back to around 1550
  21. 21. Type Classification By Technical Styles (in chronological order)Transitional As the name implies, transitional bridges the gap between oldstyle and modern. It embodies greater thick-to-thin strokes, and smaller brackets on serifs. Stress moves to be more vertical. Dates back to around 1750Modern Modern typefaces embodies extreme thick-to-thin strokes, and hairline serifs. Many modern typefaces lose readability if set too tight, or at too small a size, particularly those with strong vertical stress. Dates back to around 1775
  22. 22. Type Classification By Technical Styles (in chronological order)Egyptian / Slab Serif Egyptian or slab serif was developed for heavy type in advertising. It appeared during the Egyptology craze in Europe. It generally has little variation in stroke weight and is generally more geometric, and less calligraphic. Dates back to around 1825Sans Serif Gained popularity as a move towards an international aesthetic in typography. Sans serif can be strictly geometric, as in Futura, or more humanist, as with Gill Sans. More recently, sans serifs with a variation in stroke weight are becoming more common (Optima, Myriad). Dates back to around 1900
  23. 23. Type Classification By Technical Styles (in chronological order)Serif / Sans serif A fairly recent development are families of typefaces with both serif and sans serif fonts. These provide the designer with even more unified variation than an extensive family of serif or sans serif. Dates back to around 1990Grunge Now part of the common lexicon of typography, grunge was a development spring from postmodernism and deconstructionism. Type was developed as primarily image, and less for its readability. Grunge typography was a big enough movement to rate its own category, and encompasses a wide variety of „dirty‟ typefaces. Dates back to around 1995
  24. 24. Type Classification By Technical Styles (in chronological order)Postmodern / Display Postmodern or Display types encompass a wide variety of styles and are unsuitable for body text. ContemporaryHandwritten Seemingly a contradiction in terms, these fonts actually can be considered scripts, but their generally informal nature tends to separate them out. Contemporary
  25. 25. Type Classification By Mood O Different typefaces have strikingly different moods. O Commonly used moods include: O formal vs. informal O modern vs. classic/traditional & O light vs. dramatic. O Times New Roman is a formal font, and is used for business correspondence. O Comic Sans, on the other hand, has a more informal mood and should be avoided for official correspondence
  26. 26. Terminology Point size
  27. 27. Terminology Styles, Weights & WidthWeight Width StyleThe weight determines how bold the The width determines how wide the The combination of propertiestypeface looks, how heavy the characters are. including typeface, width andstrokes making up the characters weight defines the “Style” of aare. font Helvetica Cnd Obl-Light 24 pts isThe traditional weights are Light, a particular style that belongs toRegular, Semibold, Bold, and Black the Helvetica typeface. The traditional widths are Extended, Condensed, Extra Condensed or Compressed
  28. 28. TerminologyLetter SpacingTrackingKerning Kerning and Tracking are the two components of letter spacing. Tracking defines the amount of Kerning adjusts the space space between the characters based on character pairs. in a word uniformly regardless There is strong kerning of the characters between the V and the A, and no kerning between the S and the T.
  29. 29. TerminologyLeading (Line Spacing)This is the vertical space between lines of text. The name comes from thephysical piece of lead that used to be used in mechanical printing process toseparate lines of text
  30. 30. Terminology Glyphs Refer to all the available characters in a font, from letters to numbers and all the special characters.Tahoma Glyph Set accessed usingthe Windows Character Map
  31. 31. TerminologyLigaturesTwo or more letters combined into one character make a ligature. Whenparts of the anatomy of characters either clash or look too closetogether, they can be combined in what are called Ligatures.Common Ligatures are: „fi‟ ligature type, size 12pt Garamond.
  32. 32. AssignmentO Create an artwork which represents at least 5 principles of Design discussed in this presentation O Choose from projects listed below: O Ad campaign (series of 3 or more Print Ads) O Package Design (at least a series of 3 different packaging samples) O Brochure Design (for a luxury or consumer brand) O Web Design (for a luxury or consumer brand)* Final Date for submitting this assignment is the 31st ofMarch 2013