Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Typesetting for the Web

Zeke Franco
March 16, 2012

Typesetting for the Web

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

v1.2

Zeke Franco

March 16, 2012
Tweet

Other Decks in Design

Transcript

  1. typography •n. the art or process of printing with type.

    the work of setting and arranging types and of printing from them. 1. 2.
  2. typesetting •n. the retrieval of the stored letters and the

    ordering of them for visual display. 1.
  3. How light or bold the characters in a font appear.

    Weight g Light and bold are terms to describe the thickness of a character.
  4. How light or bold the characters in a font appear.

    Weight Light Regular Medium Bold Extra Bold Heavy Light and bold are terms to describe the thickness of a character.
  5. A version of the typeface that changes the letterform’s shape

    and style. Variant g Typefaces can have dozens of different variants.
  6. A version of the typeface that changes the letterform’s shape

    and style. Variant ALL CAPS Condensed Small Caps Oblique Typefaces can have dozens of different variants.
  7. hpm

  8. the retrieval of the stored letters and the ordering of

    them for visual display. Typesetting
  9. leading •n. 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. 1
  10. 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. leading •n. 1.25
  11. 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. leading •n. 1.5
  12. tracking •n. the amount of space between a group of

    letters to affect density in a line or block of text. 1.
  13. tracking •n. the amount of space between a g r

    o u p o f l e t t e r s t o a f f e c t density in a line or block of text.
  14. tracking •n. the amount of space between a group of

    letters to affect density in a line or block of text.
  15. measure •n. the length of a body of type 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. Ut hendrerit massa sed nunc convallis at placerat enim varius. Pellentesque id massa et neque cursus sollicitudin. Pellentesque eros nisi, blandit nec scelerisque. Fusce fringilla faucibus blandit. Donec porta fermentum dolor in aliquam. Vestibulum ut tellus id turpis rutrum porta pulvinar eros. Cras a nulla dui. Praesent eu elit ante, eu blandit quam. Phasellus rhoncus bibendum arse facili en a lorem sive 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.
  16. measure •n. 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. Ut hendrerit massa sed nunc convallis at placerat enim varius. Pellentesque id massa et neque cursus sollicitudin. Pellentesque eros nisi, blandit nec scelerisque. Fusce fringilla faucibus blandit. Donec porta fermentum dolor in aliquam. Vestibulum ut tellus id turpis rutrum porta pulvinar eros. Cras a nulla dui. Praesent eu elit ante, eu blandit quam. Phasellus rhoncus bibendum arse facili en a lorem sive 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. Measure
  17. Typesetting Leading Tracking Measure 52–78 characters 1.5 Start with +

    – for larger measures for smaller measures Defaults Keep the + – for larger leading for smaller leading (including spaces)
  18. Typographic CSS line-height margin letter-spacing word-spacing text-align text-transform text-shadow text-transform

    text-decoration font (shorthand) text-indent @font-face text-indent color font-size-adjust font-stretch column-count text-stroke rgba() white-space
  19. • The League of Moveable Type • Fonstruct at Fontlab.com

    • Fontlab.com @Font - Face Host the Font(s) Yourself
  20. @Font - Face Third Party Hosts • Typekit.com • Fontdeck.com

    • FontSquirrel.com • Google Font Directory
  21. Type Crimes Ellipsis … not ... … Double Quotes “

    ” not " " “ ” Single Quotes ‘ ’ not ' ' ‘ ’ Em Dash — not - — En Dash – not - – Apostrophe ’ not ' ’
  22. ?