Typography

6,308 views

Published on

Addendum to COM 637 report in Summer 2010

Published in: Education
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,308
On SlideShare
0
From Embeds
0
Number of Embeds
215
Actions
Shares
0
Downloads
400
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Typography

  1. 1. Typography<br />Lecture by: Penny Tan and JobyProvido<br />
  2. 2. Things to know<br />Terms used<br />Categorizing typefaces<br />Combining typefaces<br />
  3. 3. Typography<br />Etymology: from the Latin words typos (type) and graphos (written)<br />The art and technique of <br />Arranging type that involves the selection of:<br />Typefaces<br />Font size<br />Leading (line space)<br />Tracking (adjusting the space between a group of letters)<br />Kerning (adjusting the space between two letters)<br />Type design<br />Modifying type glyphs<br />
  4. 4. Typefaces<br />A set of one or more fonts, in one or more sizes, designed with stylisticunity<br />Theyusually comprise an alphabet of letters, numbers, punctuation marks, and specialcharacters<br />(~ @ # $ % ^ & * _ + = «  ‘ { } [ ] < > / )<br />
  5. 5. Typefaces vs. Fonts<br />Typefaces <br />These are families of fonts.<br />Times New Roman<br />Arial<br />fonts<br />These are variations of a typeface.<br />Arial<br />Arial bold<br />Arial italics<br />Arial underline<br />
  6. 6. Typeface terms<br />x-height<br />ascender<br />descender<br />baseline<br />The horizontal guideline indicating where the bottom of characters without descenders appear to align<br />Height of the lower case letters with no ascender or descender<br />Part of the lower case letter that extends above the x-height<br />Part of the lower case letter that extends below the x-height<br />
  7. 7. Typeface terms<br />italic<br />roman<br />
  8. 8. Point size<br />size in points<br />Point sizes are not exactly the same height. The following are all 50 points.<br />
  9. 9. Stress<br />The direction and degree of incline in the axis of a font with contrast<br />It could be diagonal (oblique or biased), vertical, or horizontal<br />stress<br />
  10. 10. Serifs<br />N<br />A short line or finishing stroke that crosses or projects from stems or strokes in a character<br />Also called a fillet; it is a shape that appears in a character at the junction of a serif and a main stroke<br />The thinnest stroke of a letter<br />serif<br />bracket<br />hairline<br />
  11. 11. Serifs<br />Slab<br />Bold, rectangular appearance and sometimes has fixed widths, meaning all characters occupy the same amount of horizontal space<br />Wedge<br />Where the junction of the serif and the stem are diagonal rather than bracketed<br />N<br />
  12. 12. Serifs and brackets<br />bracketed<br />Serifs (feet)<br />Palatino<br />
  13. 13. Weight <br />
  14. 14. Condensed and extended<br />
  15. 15. Typeface categories<br />Old style<br />Modern<br />Slabserif<br />Sans serif<br />Script<br />Décorative<br />Distressed<br />
  16. 16. Old style<br />lowercase serifs are slanted<br />diagonal stress<br />serifs<br />bracketed<br />gentle transition from thick to thin<br />Formed the way scribes heldtheirpens in the late 1400s<br />Most readablebecausetheyweremeant for long lines of text<br />Warm and graceful<br />
  17. 17. Old style<br />
  18. 18. Old style samples<br />
  19. 19. Modern<br />lowercase serifs are horizontal<br />vertical stress<br />radical thick to thin<br />serifs<br />subtle or no bracketing<br />Industrialrevolution = mechanical point of view<br />Old style typefaceswerebecomingobsolete<br />Elegant but severe and cold<br />Not veryreadable<br />
  20. 20. Modern<br />
  21. 21. Modern samples<br />
  22. 22. Slab serif<br />Alsoknown as square serif<br />All charactersoccupy the sameamount of horizontal space, as printed by a typewriter<br />Industrialrevolution = advertising<br />Advertisingneededthicktypefaces<br />Thickening the modern typefaces made it impossible to read<br />Thickened the serifsinstead<br />MostlyEgyptiannamesbecausearcheologywas the in thing due to finding the rosetta stone<br />Most slabserifs are calledClarendonsbecauseitepitomizes the letterform<br />
  23. 23. Slab serif<br />horizontal lowercase serifs<br />vertical stress<br />thick, fat serifs<br />subtle thick to thin<br />
  24. 24. Slab serif samples<br />
  25. 25. Sans serif<br />large x-height<br />no serifs<br />subtle or no transition from thick to thin<br />Sansis French for without <br />in 1816 William Caslon created the 2-line Egyptianwhereheremoved the serifsbecausehehatedthem. Not an instant hit<br />The Bauhaus motto“form follows function” stripped typefaces to their bare essentials<br />Futura is the epitome of this letterform<br />Large x-height creates a presence<br />
  26. 26. Sans serif sample<br />
  27. 27. Script<br />Emulateshandwriting<br />Classy and formal<br />In the 1400s only the richcouldafford books<br />Books were made by scribes whowrote in script<br />
  28. 28. Script samples<br />
  29. 29. Decorative <br />Enhances a theme<br />Not meant for anything but for decoration<br />Not to beused as text<br />Adds punch to a publication<br />Creates a look or emphasizes content<br />If overused, itcan destroy a design<br />
  30. 30. Decorative samples<br />
  31. 31. Distressed <br />distorted, deliberately trashed<br />beauty in their ugliness<br />Mac put desktop publishing in the hands of the masses.<br />Rules of traditionaltypographyweredemolished<br />Usersbecame more interested in typefaces and manymanipulatedtheirown<br />also called fringe, grunge, garage, deconstructed, lawless<br />
  32. 32. Distressed <br />
  33. 33. Distressed samples<br />
  34. 34. Combining typefaces<br />
  35. 35. Combining typefaces<br />concordant<br />One family<br />Safe but dull<br />contrast<br />Typefaces are clear and distinct from each other<br />
  36. 36. Combining typefaces: Conflicting<br />2 or more typefaces that are similar in style, size, weight, etc.<br />Disturbing because visual attraction is not concordant nor contrasting<br />
  37. 37. Ways to achieve contrast<br />Color<br />Direction<br />Form<br />Size<br />Structure<br />Weight<br />
  38. 38. Contrast by color<br />You can change the ‘color’ of one typeface<br />Leading (line spacing)<br />Letterspacing<br />Italic<br />Weight<br />Typistsalsorefer to density of text as color<br />
  39. 39. Contrast by color samples<br />
  40. 40. Contrast by color samples<br />
  41. 41. Contrast by color samples<br />
  42. 42. Contrast by direction<br />Direction of how a text is read<br />Horizontal<br />Vertically downward<br />Vertically upward<br />Diagonally Down<br />Diagonally Up<br />Verdana<br />
  43. 43. Contrast by direction samples<br />
  44. 44. Contrast by direction samples<br />A tall thin column of text has a vertical direction<br />
  45. 45. Contrast by direction samples<br />
  46. 46. Contrast by form<br />Refers to the shape of the block of letters<br />Templar<br />
  47. 47. Contrast by form<br />Oxford<br />
  48. 48. Contrast by form samples<br />
  49. 49. Contrast by form samples<br />
  50. 50. Contrast by size<br />Contrastbig type withsmall type<br />Make the contrastobvious<br />
  51. 51. Contrast by size samples<br />Arial <br />Lithe | Classic Typewriter<br />Rockwell | Century Gothic<br />Old English | Edwardian Script<br />
  52. 52. Contrast by size samples<br />
  53. 53. Contrast by structure<br />Use typefacesfromfamilieswithdifferent structures<br />Never put typefacesfrom the samefamily structure on the same page<br />Ensurethat the contrastisemphasized<br />Limit to only 3 families<br />
  54. 54. Contrast by structure samples<br />Trebuchet | Garamond<br />Bodoni | clarendon<br />
  55. 55. Contrast by structure samples<br />
  56. 56. Contrast by weight<br />Refers to the thickness of the strokes<br />Strokescanbebold, semi-bold, extra bold, regular, light, etc.<br />Great for organizing information<br />Again, emphasize the contrast<br />Put it all together.<br />
  57. 57. Contrast by weight samples<br />
  58. 58. Contrast by weight samples<br />
  59. 59. Contrast by weight samples<br />
  60. 60. Contrast by weight samples<br />
  61. 61. More Samples<br />

×