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.

Typesetting for the Web

4,464 views

Published on

Basics of typography. Typeface families, anatomy of a glyph, and some typesetting principles like measure and leading.

(From a few talks I did in 2011. v1.2)

Published in: Design, Technology
  • Be the first to comment

Typesetting for the Web

  1. 1. typography •n. 1. the art or process of printing with type. 2. the work of setting and arranging types and of printing from them.
  2. 2. typesetting •n. 1. the retrieval of the stored letters and the ordering of them for visual display.
  3. 3. Topics Terminology Classes Setting Technologies Type Crimes Questions
  4. 4. Topics Terminology
  5. 5. g Glyph Refers to a character in the font.
  6. 6. g Glyph Refers to a character in the font. 3 Is a glyph
  7. 7. g Glyph Refers to a character in the font. a Is a glyph
  8. 8. g Glyph Refers to a character in the font. & Is a glyph
  9. 9. g Glyph Refers to a character in the font. > Is a glyph
  10. 10. g Weight How light or bold the characters in a font appear. Light and bold are terms to describe the thickness of a character.
  11. 11. Light Regular Medium Heavy Bold Extra Bold Weight How light or bold the characters in a font appear. Light and bold are terms to describe the thickness of a character.
  12. 12. g Variant A version of the typeface that changes the letterform’s shape and style. Typefaces can have dozens of different variants.
  13. 13. ALL CAPS Oblique Condensed Small Caps Variant A version of the typeface that changes the letterform’s shape and style. Typefaces can have dozens of different variants.
  14. 14. Hemopexin
  15. 15. Hemopexin
  16. 16. cap height Hemopexin
  17. 17. cap height x-height Hemopexin
  18. 18. cap height x-height baseline Hemopexin
  19. 19. cap height x-height baseline ex
  20. 20. hpm
  21. 21. hpm Ascender
  22. 22. hpm Ascender Descender
  23. 23. hpm Ascender Descender Character Width
  24. 24. Topics Terminology Classes
  25. 25. Serif
  26. 26. Sans Serif
  27. 27. Script
  28. 28. monospace
  29. 29. abcdefghi monospace jklmnopqr
  30. 30. Ornamental
  31. 31. Ornamental Ornamental Ornamental
  32. 32. Aa Humanist serif
  33. 33. Aa Transitional serif
  34. 34. Aa Modern serif
  35. 35. Aa Slab Serif
  36. 36. Aa Humanist sans
  37. 37. Aa Transitional sans
  38. 38. Aa Geometric sans
  39. 39. Topics Terminology Classes Setting
  40. 40. Typesetting
  41. 41. Typesetting Which type family? Which typeface? Which font?
  42. 42. Typesetting the retrieval of the stored letters and the ordering of them for visual display.
  43. 43. leading •n. 1. the amount of added vertical spacing between lines of type.
  44. 44. leading •n. 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed varius felis. Cras pellentesque mattis erat nec laoreet. Donec sodales fermentum arcu sit amet semper. Suspendisse a commodo orci. Nullam sed lorem et dolor condimentum varius. Praesent elit nunc, consequat id hendrerit non, porta nec est. Nulla tristique, felis ut dictum ultricies, velit leo ultrices purus, quis feugiat enim lectus nec urna.Pellentesque eros nisi, blandit nec scelerisque vel, consequat sit amet ante. aPhasellus ut quam vitae nulla hendrerit tempus at eget dui. Praesent ornare euismod orci a placerat. Duis commodo dapibus accumsan. Fusce fringilla faucibus blandit. Donec porta fermentum dolor in aliquam. Vestibulum ut tellus id turpis rutrum porta a a eros.
  45. 45. leading •n. 1.25 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed varius felis. Cras pellentesque mattis erat nec laoreet. Donec sodales fermentum arcu sit amet semper. Suspendisse a commodo orci. Nullam sed lorem et dolor condimentum varius. Praesent elit nunc, consequat id hendrerit non, porta nec est. Nulla tristique, felis ut dictum ultricies, velit leo ultrices purus, quis feugiat enim lectus nec urna.Pellentesque eros nisi, blandit nec scelerisque vel, consequat sit amet ante. aPhasellus ut quam vitae nulla hendrerit tempus at eget dui. Praesent ornare euismod orci a placerat. Duis commodo dapibus accumsan. Fusce fringilla faucibus blandit. Donec porta fermentum dolor in aliquam. Vestibulum ut tellus id turpis rutrum porta a a eros.
  46. 46. leading •n. 1.5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed varius felis. Cras pellentesque mattis erat nec laoreet. Donec sodales fermentum arcu sit amet semper. Suspendisse a commodo orci. Nullam sed lorem et dolor condimentum varius. Praesent elit nunc, consequat id hendrerit non, porta nec est. Nulla tristique, felis ut dictum ultricies, velit leo ultrices purus, quis feugiat enim lectus nec urna.Pellentesque eros nisi, blandit nec scelerisque vel, consequat sit amet ante. aPhasellus ut quam vitae nulla hendrerit tempus at eget dui. Praesent ornare euismod orci a placerat. Duis commodo dapibus accumsan. Fusce fringilla faucibus blandit. Donec porta fermentum dolor in aliquam. Vestibulum ut tellus id turpis rutrum porta a a eros.
  47. 47. tracking •n. 1. the amount of space between a group of letters to affect density in a line or block of text.
  48. 48. tracking •n. t h e a m o u n t o f s p a c e b e t we e n a group of letters to affect d e n s i t y i n a l i n e o r bl o c k o f text.
  49. 49. tracking •n. the amount of space between a group of letters to affect density in a line or block of text.
  50. 50. measure •n. 1. the length of a body of type Lorem ipsum dolor sit amet, consectetur adipiscing Fusce fringilla faucibus blandit. Donec porta elit. Integer sed varius felis. Cras pellentesque fermentum dolor in aliquam. Vestibulum ut tellus id mattis erat nec laoreet. Donec sodales fermentum turpis rutrum porta pulvinar eros. Cras a nulla dui. arcu sit amet semper. Suspendisse a commodo orci. Praesent eu elit ante, eu blandit quam. Phasellus Nullam sed lorem et dolor condimentum varius. rhoncus bibendum arse facili en a lorem sive Praesent elit nunc, consequat id hendrerit non, porta nec est. Nulla tristique, felis ut dictum ultricies, velit leo ultrices purus, quis feugiat enim lectus nec urna. Ut hendrerit massa sed nunc convallis at placerat enim varius. Pellentesque id massa et neque cursus sollicitudin. Pellentesque eros nisi, blandit nec scelerisque. nenatis lacus pellentesque. Vivamus et dolor vitae nisl rhoncus interdum vel non nibh. Sed id erat vel velit luctus auctor in et urna. Nunc at diam eget urna feugiat feugiat. Phasellus elit lorem, ullamcorper ac scelerisque sit amet, pulvinar in sem.
  51. 51. measure •n. Lorem ipsum dolor sit amet, consectetur adipiscing Fusce fringilla faucibus blandit. Donec porta elit. Integer sed varius felis. Cras pellentesque fermentum dolor in aliquam. Vestibulum ut tellus id mattis erat nec laoreet. Donec sodales fermentum turpis rutrum porta pulvinar eros. Cras a nulla dui. arcu sit amet semper. Suspendisse a commodo orci. Praesent eu elit ante, eu blandit quam. Phasellus Nullam sed lorem et dolor condimentum varius. rhoncus bibendum arse facili en a lorem sive Praesent elit nunc, consequat id hendrerit non, porta nec est. Nulla tristique, felis ut dictum ultricies, velit leo ultrices purus, quis feugiat enim lectus nec urna. Ut hendrerit massa sed nunc convallis at placerat enim varius. Pellentesque id massa et neque cursus sollicitudin. Pellentesque eros nisi, blandit nec scelerisque. Measure nenatis lacus pellentesque. Vivamus et dolor vitae nisl rhoncus interdum vel non nibh. Sed id erat vel velit luctus auctor in et urna. Nunc at diam eget urna feugiat feugiat. Phasellus elit lorem, ullamcorper ac scelerisque sit amet, pulvinar in sem.
  52. 52. Typesetting Leading Tracking Start with Keep the 1.5 + for larger measures – for smaller measures Defaults + for larger leading – for smaller leading Measure 52–78 characters (including spaces)
  53. 53. Topics Terminology Classes Setting Technologies
  54. 54. Typographic CSS line-height text-shadow text-indent @font-face margin text-transform text-indent column-count letter-spacing text-decoration color text-stroke word-spacing font (shorthand) font-size-adjust rgba() text-align text-transform font-stretch white-space
  55. 55. @Font-Face Host the Font(s) Yourself • The League of Moveable Type • Fonstruct at Fontlab.com • Fontlab.com
  56. 56. @Font-Face Third Party Hosts • Typekit.com • Fontdeck.com • FontSquirrel.com • Google Font Directory
  57. 57. Topics Terminology Classes Setting Technologies Type Crimes
  58. 58. Type Crimes Ellipsis … not ... … Double Quotes “ ” not " " “ ” Single Quotes ‘ ’ not ' ' ‘ ’ Em Dash — not - — En Dash – not - – Apostrophe ’ not ' ’
  59. 59. Topics Terminology Classes Setting Technologies Type Crimes Questions
  60. 60. ?

×