Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Typecurious: A Typography Crash Course

8,458 views

Published on

Spark your curiosity for typography with this super simple crash course. You’ll learn basic type vocabulary, font styles, and proper type usage.

Published in: Design
  • HOW TO UNLOCK HER LEGS! (SNEAK PEAK), learn more... ●●● https://tinyurl.com/unlockherlegss
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This is a really valuable resource with great examples and visuals about typography. Is there any famous ligatures for the letters N and P? thinking about creating one for my name.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I think font style is very important for typography. just i think
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Typecurious: A Typography Crash Course

  1. 1. Typography A CRASH COURSE. HELMETS NOT INCLUDED.
  2. 2. Stop Stealing Sheep AND FIND OUT HOW TYPE WORKS.
  3. 3. A w a r d s C e r t i f i c a t e “In 1936, Frederick Goudy was in New York City to receive an award for excellence in type design. Upon accepting the certificate, he took one look at it and declared ‘Anyone who would letterspace black-letter would steal sheep.’” Erik Spiekermann Stop Stealing Sheep & Find out How Type Works
  4. 4. Handwritten Black Letter Type Latin Bible of AD 1407 So Stop Stealing Sheep The term “to steal sheep” references a person who would rather steal livestock than work hard rearing it themselves. Goudy compares this to his particular situation in order say that the person who scripted his award took the easy way out, rather than scripting closely-laid blackletter forms (below).
  5. 5. Vocabulary IT’S PRACTICALLY ITS OWN LANGUAGE.
  6. 6. A Little Context Most typefaces are based off of the written word. Manuscripts were written with pens or quills that generated thick and thin strokes within letterforms. These influences are made clear in traditional serif and some sans-serif typefaces.
  7. 7. Typeface vs. Font Avenir 35-Light, 34pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz !@#$%&? Baskerville Italic, 34pt ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz !@#$%&? A typeface is the whole package. Literally referring to the look or “face” of the type. ie: Baskerville, Avenir, Garamond A font is a piece of the greater whole. ie: Baskerville Italic, 34pt, Avenir 35-Light. 34pt
  8. 8. Letterform Avenir 45-Book 500pt. Originally designed by Adrian Frutiger in 1988 Sans-Serif Baskerville Regular 530pt Orignally designed by John Baskerville in 1735 Transitional Serif The graphic form of a letter of the alphabet, either as written or in a particular font. A A
  9. 9. BASELINE X-HEIGHT CAP HEIGHT Anatomy of a Font The cap height is the height of the capital letters. The x-height is the height of the lower-case x. The baseline is where the type sits.
  10. 10. Anatomy of a Font Some letterforms extend below the baseline to give the illusion of being aligned. If curves sat right on the baseline, they would appear to sit above it. This is called an overshoot.
  11. 11. Anatomy of a Font The lines that make up letterforms are called strokes. The width of those strokes is called the stroke-width. STROKE WIDTH
  12. 12. SERIFSTEM Anatomy of a Font The Stem is a vertical stroke in a letterform. Serifs are the stroke-like protrusions on the ends of letterforms
  13. 13. ASCENDER DESCENDER Anatomy of a Font Descenders extend below the baseline. Ascenders extend above the x-height and sometimes above the cap height.
  14. 14. COUNTER COUNTERBOWL Anatomy of a Font Counters are the open spaces within most letterforms. Bowls are the containing strokes around counters.
  15. 15. BAR CROSSBAR Anatomy of a Font A Bar extends from a letterform without being attached on both ends. A Crossbar touches a stem on each end.
  16. 16. ff fi fl ffi ffl fj fffifl ffi ffl � Ligature Ligatures represent the connecting of two or more letterforms for the sake of legibility and to reduce un-designed overlapping. Some ligatures are purely for aesthetic purposes. st � NON-LIGATURED LIGATURES AESTHETIC LIGATATURES
  17. 17. Sampling of ligatures from the font Mrs Eaves AA AV MB MD ME FF FI FL HE LA MP NK NT OC OG OO THE TE TR TT TW TY Th UB UD UL UP UR VA ae æ cky ct ee fi fl ff ffi ffl ffb ffh ffj ffr fft fb fh fj fr ft ffy fy gi gy ip it ky oe py sp st tty tt ty tw
  18. 18. Classifying Type MORE THAN JUST A SERIF.
  19. 19. Serif & Sans-Serif Serif fonts have the stroke-like extensions attached to the ends of the letterforms. (left) Sans-serif fonts do not. (right) Avenir 45-Book 500pt. Originally designed by Adrian Frutiger in 1988 Sans-Serif ABaskerville Regular 530pt Orignally designed by John Baskerville in 1735 Transitional Serif A
  20. 20. Serif Faces The three traditional categories of serif faces are Oldstyle, Transitional, and Modern. Oldstyle Adobe Garamond Pro Regular Less stroke-width variation, rounded serifs, calligraphic qualities, “ink-bleed.” Transitional Baskerville Regular More stroke-width variation, flat-edged serifs, more crisp qualities, sharp lines. Modern Didot Regular Extreme stroke-width variation, minimal rectangular serifs, little-to-no serif transition, ultra crisp. A A A
  21. 21. Slab Serif Faces There are two major classifications of Slab Serifs: Clarendon and Neo-Grotesk Clarendon Slab Serif Clarendon Regular Very little stroke-width variation, serifs are nearly as large as strokes, smooth serif transitions. Neo-Grotesk Slab Serif ITC Lubalin Graph Demi Little-to-no stroke-width variation, serifs are as large as strokes, sharp angular serif transitions. A A
  22. 22. Glyphic Serif Glyphic Serif faces emulate carved inscriptions rather than pen-strokes. Friz Quadrata Medium Designed by Ernst Friz in 1978 Albertus MT Regular Designed by Berthold Wolpe, 1930s A A
  23. 23. Sans Serif Faces The three traditional categories of sans serif faces are Grotesque, Geometric, and Humanist. Grotesque Berthold Akzidenz Grotesk Book Strokes modulate (change width) around curves. They are not the same width all the way around. Geometric Avenir 45-Book Strokes have less modulation around curves and are nearly the same width all the way around. Humanist Meta Book Stokes have severe modulations to emulate pen-strokes while still being sans-serif. Ag Ag Ag
  24. 24. Miscellaneous Most typefaces can’t be defined by either serif or sans-serif. Some may be Script, Symbol, or Ornamental. There are also experimental typefaces and ones that can’t be categorized at all. Edwardian Script Edward Benguiat Script Ag Springtime Unknown Script Ag Pinnocio Normal Unknown Ornamental Ag Rosewood Carol Twombly, 1994 Ornamental Ag Cutouts Gail Blumberg, 1990 Ornamental Ag Dead History P. Scott Makela, 1990 Experimental Ag Webdings Multiple Designers, 1997 Symbol 
  25. 25. Setting Type BE GLAD YOU HAVE A COMPUTER
  26. 26. (Above) Lead type in a case with a composing stick. (Below) Lead type and ornaments. (Above) Lead type set into a press block. (Below) Wood type set into a press block. (Above) Linotype machine (Below) Linotype slugs.
  27. 27. Typesetting Leading is the space between lines of type. The rag is the jagged edge at the side of a paragraph. A widow is when you have 12 characters or less at the end of a column. An orphan is when you have 12 characters or less at the beginning of a column. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potenti. In sit amet rutrum odio. Sed suscipit dui sit amet posuere cursus. Integer ornare quam quis ligula porttitor, sed lacinia est mattis. Mauris semper mi quam. Phasellus fringilla urna sit amet elit auctor maximus ac id justo. Quisque ex purus, rhoncus eget fermentum eu, varius eget enim. Integer rhoncus magna et metus vehia. Aliquam mattis ac diam in volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus a tellus at est viverra condimentum a et enim. Curabitur ante orci, pretium vel lobortis ut, ultricies vel velit. Fusce semper dignissim scelerisque. Cras mauris vivamus tellus. Curabitur ut accumsan purus, vitae interdum orci. Quisque vitae fringilla velit. Maecenas sed dolor vel dui vulputate imperdiet euismod fusce laorect. LEADING RAG ORPHAN WIDOW
  28. 28. Letterspacing Tracking is the measure of the overall spacing between letters. Kerning is the measure of the spacing between individual letters KERNING TRACKING
  29. 29. Good vs. Bad Kerning GOOD BAD WORSE Letterforms have the appearance of being evenly spaced. Letterforms have a measured and even distance between them (monospaced). This leaves them poorly spaced visually. Letterforms do not have even visual spacing and are touching. Type TypeType
  30. 30. Letterspacing Typography Typography Ty p o g r a ph y Tracking can be modified to extremes. These extremes are referred on a scale of loose to tight. TIGHT NORMAL LOOSE TYPOGRAPHY TYPOGRAPHY T Y P O G R A P H Y
  31. 31. Letterspacing TYPOGRAPHY TYPOGRAPHY T Y P O G R A P H Y Different letterforms, fonts, and typefaces respond to tracking in different ways. TIGHT NORMAL LOOSE Typography Typography Ty p o g r a p hy
  32. 32. Line Spacing Leading can also be modified to the loose and tight extremes. Typesetting is expressed in font size/leading size (14pt/18pt) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. Indina sit amet rutrum odio. Sed suscipit dui sit amet pon cursus. Integer ornare quam quis ligula porttitor, sed lacinia est mattis. Mauris semper mi quam. Ad phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fermentum eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices cando posuere quisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. Indina sit amet rutrum odio. Sed suscipit dui sit amet pon cursus. Integer ornare quam quis ligula porttitor, sed lacinia est mattis. Mauris semper mi quam. Ad phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fermentum eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices cando posuere quisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. Indina sit amet rutrum odio. Sed suscipit dui sit amet pon cursus. Integer ornare quam quis ligula porttitor, sed lacinia est mattis. Mauris semper mi quam. Ad phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fermentum eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices cando posuere quisque. TIGHT (14/14) NORMAL (14/18) LOOSE (14/30)
  33. 33. Line Spacing Line spacing can differ based on typeface, capitalization, and font weight. Note the use of negative leading for the first headline NORMAL (72/72) LOOSE (72/90)TIGHT (72/55) EXPRESS YOURSELF EXPRESS YOURSELF EXPRESS YOURSELF
  34. 34. Line Spacing With lower case letters, it’s important to pay attention to your ascenders and descenders. This particular example works with negative leading, but others may have crashed together. NORMAL (72/72) LOOSE (72/90)TIGHT (72/55) Express Yourself Hyper Soft Express Yourself Hyper Soft Express Yourself Hyper Soft
  35. 35. Ragging Left or right-aligned type should have a “saw-tooth” rag. Meaning, an even and regular pattern of protrusions. GOOD LEFT ALIGNED JUSTIFIED BAD GOOD BAD Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. ametiam rutrum odio. Sed suscipit dui sit amet ponsc cursus. Integer ornare quam quis ligula portti, sed lacinia est mattis. Mauris semper mi quam. phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fer eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. Indina sit amet rutrum odio. Sed suscipit dui sit amet pon cursus. Integer ornare quam quis ligula porttitor, sed lacinia est mattis. Mauris semper mi quam. Ad phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fermentum eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices cando posuere quisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a reet leo. Suspendisse potent. ametiam rutrum odio. Edsuscipitdui sitamet ponsccursus. Integer ornar am quis ligula portti, ed lacinia est mattis. Mauri semper mi quam. phasellus fringilla urna sit amet auctor mus ac id justo. Quisque ex purus, rhoncu fer eu, varius eget enim. Integer rhoncus magn metus. Aliquam mattis ac diam in volutpat. Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. Mauri semper mi quam. phasellus fringilla urna sit amet auctor mus ac idjusto. Quisqueex purus, rhon fer eu, variusegeteni. Integer rhoncus magn metus. Aliquam maisac diam in volutpat. Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. ametiam rutrum odio. Sed suscipit dui sit amet ponsc cursus. Integer ornare quam quis ligula portti, sed lacinia est mattis. Mauris semper mi quam. phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fer eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque.
  36. 36. Ragging Left or right-aligned type should have a “saw-tooth” rag. Meaning, an even and regular pattern of protrusions. Justified type should look evenly spaced within the text block. Watch out for ponds and rivers. GOOD BAD GOOD BAD Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. ametiam rutrum odio. Sed suscipit dui sit amet ponsc cursus. Integer ornare quam quis ligula portti, sed lacinia est mattis. Mauris semper mi quam. phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fer eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. Indina sit amet rutrum odio. Sed suscipit dui sit amet pon cursus. Integer ornare quam quis ligula porttitor, sed lacinia est mattis. Mauris semper mi quam. Ad phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fermentum eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices cando posuere quisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a reet leo. Suspendisse potent. ametiam rutrum odio. Edsuscipitdui sitamet ponsccursus. Integer ornar am quis ligula portti, ed lacinia est mattis. Mauri semper mi quam. phasellus fringilla urna sit amet auctor mus ac id justo. Quisque ex purus, rhoncu fer eu, varius eget enim. Integer rhoncus magn metus. Aliquam mattis ac diam in volutpat. Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. Mauri semper mi quam. phasellus fringilla urna sit amet auctor mus ac idjusto. Quisqueex purus, rhon fer eu, variusegeteni. Integer rhoncus magn metus. Aliquam maisac diam in volutpat. Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at laoreet leo. Suspendisse potent. ametiam rutrum odio. Sed suscipit dui sit amet ponsc cursus. Integer ornare quam quis ligula portti, sed lacinia est mattis. Mauris semper mi quam. phasellus fringilla urna sit amet elit auctor mus ac id justo. Quisque ex purus, rhoncus eget fer eu, varius eget enim. Integer rhoncus magna metus. Aliquam mattis ac diam in volutpat. Vestibul abra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque. POND RIVER LEFT ALIGNED JUSTIFIED
  37. 37. Ragging Ragging also has an influence on tone and voice. In large headlines, line breaks can be used as pauses. And as always, avoid widows! OKAY BAD BETTER GOOD CALL ME CRAZY BUT I’M A TYPOPHILE AND I WOULD HAVE GOTTEN AWAY WITH IT TOO IF IT WEREN’T FOR YOU MEDDLING KIDS AND I WOULD HAVE GOTTEN AWAY WITH IT TOO IF IT WEREN’T FOR YOU MEDDLING KIDS CALL ME CRAZY BUT I’M A TYPOPHILE
  38. 38. “There is no bad type.” “Apart from the typefaces that work well because we are familiar with them, there are those that defy the simplistic classifications of usefulness or purpose. They may exist only because the type designer’s first thought one morning was a new letter shape. These private artistic expressions may not appeal to a wide audience, but every now and again the right singer effortlessly transforms a simple song into a great hit. In the right hands, technical constraints turn into celebrations of simplicity and awkward alphabets are typographic heroes for the day.” Erik Spiekermann Stop Stealing Sheep & Find out How Type Works
  39. 39. Thank You & John Adie Bē.net/jadie digitalsurgeons.com

×