Typesetting for the Web

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

v1.2

Transcript

2. typography •n. the art or process of printing with type. the work of setting and arranging types and of printing from them. 1. 2.
3. typesetting •n. the retrieval of the stored letters and the ordering of them for visual display. 1.
4. Topics Terminology Classes Setting Technologies Type Crimes Questions
5. Topics Terminology
6. g Glyph Refers to a character in the font.
7. 3 g Glyph Refers to a character in the font. Is a glyph
8. a g Glyph Refers to a character in the font. Is a glyph
9. & g Glyph Refers to a character in the font. Is a glyph
10. > g Glyph Refers to a character in the font. Is a glyph
11. How light or bold the characters in a font appear. Weight g Light and bold are terms to describe the thickness of a character.
12. 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.
13. A version of the typeface that changes the letterform’s shape and style. Variant g Typefaces can have dozens of different variants.
14. 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.
15. Hemopexin
16. Hemopexin
17. Hemopexin cap height
18. Hemopexin x-height cap height
19. Hemopexin x-height cap height baseline
20. ex x-height cap height baseline
21. hpm
22. hpm Ascender
23. hpm Ascender Descender
24. hpm Character Width Ascender Descender
25. Topics Terminology Classes
26. Serif
27. Serif Sans
28. Script
29. monospace
30. monospace jklmnopqr abcdefghi
31. Ornamental
32. Ornamental Ornamental Ornamental
33. Aa Humanist serif
34. Aa Transitional serif
35. Aa Modern serif
36. Aa Slab Serif
37. Aa Humanist sans
38. Aa Transitional sans
39. Aa Geometric sans
40. Terminology Topics Classes Setting
41. Typesetting
42. Typesetting Which type family? Which typeface? Which font?
43. the retrieval of the stored letters and the ordering of them for visual display. Typesetting
44. leading •n. the amount of added vertical spacing between lines of type. 1.
45. 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
46. 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
47. 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
48. tracking •n. the amount of space between a group of letters to affect density in a line or block of text. 1.
49. 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.
50. tracking •n. the amount of space between a group of letters to affect density in a line or block of text.
51. 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.
52. 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
53. 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)
54. Terminology Classes Topics Setting Technologies
55. 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
56. • The League of Moveable Type • Fonstruct at Fontlab.com • Fontlab.com @Font - Face Host the Font(s) Yourself
57. @Font - Face Third Party Hosts • Typekit.com • Fontdeck.com • FontSquirrel.com • Google Font Directory
58. Terminology Classes Topics Setting Technologies Type Crimes
59. Type Crimes Ellipsis … not ... … Double Quotes “ ” not " " “ ” Single Quotes ‘ ’ not ' ' ‘ ’ Em Dash — not - — En Dash – not - – Apostrophe ’ not ' ’
60. Terminology Classes Topics Setting Technologies Type Crimes Questions
61. ?