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.

Dominating the Web Typography

6,390 views

Published on

The Typography is an almost six-centuries-old practice, and we’ve came a long way since Gutenberg’s moveable types to the digital documents as we know it. But somewhere in between, the craftsmanship and best practices of printers and engravers were long forgotten by many web developers—who end up relying on the browser, frameworks, and trial-and-error values to properly display a website’s content.

In this talk, we’ll journey through the basic concepts of Typography; how we can use them to improve a content’s identity, architecture, and readability; and how to do it through HTML and CSS.

Published in: Design

Dominating the Web Typography

  1. 1. Dominating the Web Typography Eduardo Shiota Yasuda — @shiota Conferência CSS Brasil
  2. 2. Hello! twitter.com/shiota github.com/eshiota slideshare.net/eshiota contato@eshiota.com
  3. 3. I Typography
  4. 4. Typography is everywhere.
  5. 5. We gotta remember the roots of what we do.
  6. 6. 15.000 BC – 12.500 BC Altamira & Lascaux
  7. 7. 3.000 BC – 1.500 BC Pictographs
  8. 8. 1.500 BC Phoenician alphabet
  9. 9. 750 BC Greek alphabet
  10. 10. 146 BC Roman alphabet, “Capitalis quadrata”
  11. 11. 0 Better materials, “Capitalis rustica”
  12. 12. 4th – 5th centuries Uncials and semi-uncials
  13. 13. 8th century Carolingian minuscules
  14. 14. 12th century Apex of goth art and Middle Ages
  15. 15. 15th – 16th centuries Renaissance, Gutenberg press, “Cursiva humanista”, type foundries
  16. 16. 19th century Industrial Revolution, linotype, Art Nouveau, display types
  17. 17. 20th century Modern Design, Avant-garde, Bauhaus, sans-serif types, digital typography
  18. 18. 21th century Web typography and CSS
  19. 19. The basics
  20. 20. Basics Classification
  21. 21. Most of the classification systems agree with these type categories:
  22. 22. Serif types
  23. 23. Museo The quick brown fox jumps over the lazy dog. Meta Serif The quick brown fox jumps over the lazy dog. Times New Roman The quick brown fox jumps over the lazy dog.
  24. 24. Sans serif types
  25. 25. Futura The quick brown fox jumps over the lazy dog. Museo Sans The quick brown fox jumps over the lazy dog. Helvetica The quick brown fox jumps over the lazy dog.
  26. 26. Gothic types
  27. 27. Fette Fraktur The quick brown fox jumps over the lazy dog. Goudy Text The quick brown fox jumps over the lazy dog. Wilhelm Klingspor Gotisch The quick brown fox jumps over the lazy dog.
  28. 28. Cursive types
  29. 29. Lucida Calligraphy The quick brown fox jumps over the lazy dog. Mistral The quick brown fox jumps over the lazy dog. Apple Chancery The quick brown fox jumps over the lazy dog.
  30. 30. Display types
  31. 31. Comic Sans The quick brown fox jumps over the lazy dog. Sketch Rockwell The quick brown fox jumps over the lazy dog. GodOfWar The quick brown fox jumps over the lazy dog.
  32. 32. Dingbats
  33. 33. Bodoni Ornaments The quick brown fox jumps over the lazy dog. Travel Icons The quick brown fox jumps over the lazy dog. Wingdings The quick brown fox jumps over the lazy dog.
  34. 34. On the CSS, you may choose generic families as fallbacks.
  35. 35. .my-serif-text { font-family: "Meta Serif", Times, serif; } .my-sans-serif-text { font-family: "Proxima Nova", Arial, sans-serif; } .my-monospace-text { font-family: Monaco, "Courier New", monospace; } .my-cursive-text { font-family: "Zapf Chancery", "Brush Script", cursive; } .my-fantasy-text { font-family: "Sketch Rockwell", Papyrus, fantasy; }
  36. 36. Basics Anatomy of a type
  37. 37. baseline font size
  38. 38. Typography baseline descender height x-height cap height ascender height
  39. 39. Typography
  40. 40. T y p o g r a p h y
  41. 41. Basics Units
  42. 42. Physical units
  43. 43. To deal with physical units, you can’t rely on a screen.
  44. 44. pt picas millimetres inches 12 1 4.22 1/6
  45. 45. A4 (29.7cm × 21.0cm)
  46. 46. Pixel (px)
  47. 47. To deal with screens, you must understand what are physical and reference pixels.
  48. 48. A physical pixel is a physical point on the display.
  49. 49. A reference pixel depends on the device, software and user settings.
  50. 50. A 16px font on a smartphone screen won’t have as many millimetres as on a desktop screen.
  51. 51. Change, test, use media queries, test again.
  52. 52. em unit (em)
  53. 53. “em” is a relative unit used since the movable types.
  54. 54. It represents a type’s full body size.
  55. 55. 1 em
  56. 56. 16px 1 em margin-right: 1em; 16px
  57. 57. It’s always relative to its context’s font size.
  58. 58. .wrapper { font-size: 16px; } .parent { font-size: 1.5em; } .child { font-size: .5em; }
  59. 59. Root em unit (rem)
  60. 60. “rem” is like “em” but always relative to the root (html).
  61. 61. html { font-size: 16px; } .wrapper { font-size: 12px; } .parent { font-size: 1.5rem; } .child { font-size: 0.5rem; }
  62. 62. For most of browsers and cases, the default root font size is 16px.
  63. 63. html { font-size: 16px; } .wrapper { font-size: 12px; } .parent { font-size: 1.5rem; } .child { font-size: 0.5rem; }
  64. 64. html { font-size: 100%; } .wrapper { font-size: 12px; } .parent { font-size: 1.5rem; } .child { font-size: 0.5rem; }
  65. 65. Rhythm
  66. 66. The way you space your characters and text dictates how a person will read it.
  67. 67. Rhythm Line height
  68. 68. Line height is the distance between each line of types.
  69. 69. The quick fox jumps over the dog 0 pixels Meta Serif 102px/102px
  70. 70. The quick fox jumps over the dog Meta Serif 102px/144px 42 pixels
  71. 71. A low line height makes the text too difficult to read.
  72. 72. Helvetica 32px/32px “The Guide says that the best drink in existence is the Pan Galactic Gargle Blaster. It says that the effect of a Pan Galactic Gargle Blaster is like having your brains smashed out by a slice of lemon wrapped round a large gold brick.”
  73. 73. A large line height makes the paragraph loose cohesion.
  74. 74. Helvetica 32px/96px “The Guide says that the best drink in existence is the Pan Galactic Gargle Blaster. It says that the effect of a Pan Galactic Gargle Blaster is like having your brains smashed out by a slice of lemon wrapped round a large gold brick.”
  75. 75. Find a comfortable proportion through trial-and-error.
  76. 76. Helvetica 32px/48px “The Guide says that the best drink in existence is the Pan Galactic Gargle Blaster. It says that the effect of a Pan Galactic Gargle Blaster is like having your brains smashed out by a slice of lemon wrapped round a large gold brick.”
  77. 77. Each typeface might require a different line height setting.
  78. 78. Bembo 32px/48px “The Guide says that the best drink in existence is the Pan Galactic Gargle Blaster. It says that the effect of a Pan Galactic Gargle Blaster is like having your brains smashed out by a slice of lemon wrapped round a large gold brick.”
  79. 79. Caslon 32px/48px “The Guide says that the best drink in existence is the Pan Galactic Gargle Blaster. It says that the effect of a Pan Galactic Gargle Blaster is like having your brains smashed out by a slice of lemon wrapped round a large gold brick.”
  80. 80. Rhythm Baseline
  81. 81. Use a consistent vertical proportion by following a baseline.
  82. 82. 9 reasons why cats will conquer the world. The number 5 will surprise you! “More importantly, a towel has immense psychological value. For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with.”
  83. 83. 9 reasons why cats will conquer the world. The number 5 will surprise you! “More importantly, a towel has immense psychological value. For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with.”
  84. 84. Choose a line height for a baseline, and make all vertical values derive from it.
  85. 85. /* baseline = 24px */ body { font-size: 16px; line-height: 24px; /* baseline */ } .article-title { font-size: 32px; line-height: 48px; /* 2 × baseline */ } .article-excerpt { font-size: 18px; line-height: 24px; /* baseline */ } img { max-height: 312px; /* 13 × baseline */ } p { margin-bottom: 12px; /* 0.5 × baseline */ }
  86. 86. If you pre-process your CSS, you ensure a consistent typography using variables.
  87. 87. // _variables.scss $base-font-size: 16px; $baseline: 24px; // On your project: body { font-size: $base-font-size; line-height: ($baseline/$base-font-size); // 1.5 } .article-title { font-size: 2*$base-font-size; line-height: 2*$baseline; } .article-excerpt { font-size: 18px; line-height: $baseline; } img { max-height: 13*$baseline; } p { margin-bottom: 0.5*$baseline; }
  88. 88. Be aware that each browser has its own baseline.
  89. 89. Rhythm Letter spacing/tracking
  90. 90. Letter spacing is the whitespace between each single type.
  91. 91. Typography
  92. 92. Typography letter-spacing: 10px;
  93. 93. Typography letter-spacing: -10px;
  94. 94. The use of letter-spacing is recommended for titles only.
  95. 95. Epic Movie Title
  96. 96. Epic Movie Title
  97. 97. Rhythm Kerning
  98. 98. Kerning is a fine-tuning between specific pairs of characters.
  99. 99. Task
  100. 100. The browser default is automatically enabling/disabling it.
  101. 101. .kerning { font-kerning: normal; } 32+ 34+ 7+ 10+
  102. 102. Rhythm Text indentation
  103. 103. You can manipulate the text’s indentation, which applies to its first line.
  104. 104. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with.
  105. 105. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with. .post p { text-indent: 2em; }
  106. 106. For long texts, you can skip the indentation on the first paragraph.
  107. 107. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with. .post p { text-indent: 2em; } .post p:first-of-type { text-indent: 0; }
  108. 108. More importantly, a towel has immense psychological value. For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with. .post p + p { text-indent: 2em; }
  109. 109. Text styling
  110. 110. You can use CSS rules to properly style your content, like a well-authored book.
  111. 111. Styling Titles & subtitles
  112. 112. Keep a clear hierarchy by using different font sizes, type faces and variants.
  113. 113. Styling Quotes
  114. 114. A quote block can be highlighted with margins and pseudo-elements.
  115. 115. blockquote { margin: 2em 6em; font-size: 24px; line-height: 1.5; font-style: italic; position: relative; } blockquote:before { content: "“"; position: absolute; left: -.75em; top: 0; font-size: 2.66em; line-height: 1; } blockquote .author { font-size: .75em; line-height: 1.77; }
  116. 116. Styling Elevated caps
  117. 117. Explore CSS selectors to style specific parts of the text.
  118. 118. .post p:first-of-type:first-letter { font-size: 4.5em; }
  119. 119. Styling OpenType
  120. 120. OpenType fonts provide features to control and tweak the styles of your text.
  121. 121. .my-class { font-variant-caps: small-caps; -moz-font-feature-settings: "smcp"; -ms-font-feature-settings: "smcp"; -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp"; } 33+ 4+ 10+
  122. 122. Composition
  123. 123. Composition Grids and column sizes
  124. 124. The text should have an ideal line length.
  125. 125. A line should have between 60 and 70 characters.
  126. 126. .post { width: 744px; margin: 0 auto; }
  127. 127. The column size should respond to font size changes.
  128. 128. The use of em-based column width might solve the problem.
  129. 129. .post { width: 31em; margin: 0 auto; }
  130. 130. Rendering
  131. 131. Rendering Anti-aliasing and hinting
  132. 132. Font shapes are vectors that are rasterised to be displayed on pixels.
  133. 133. Hinting is a manual work of tweaking sub-pixels to maintain a font’s identity and legibility on screen.
  134. 134. Anti-aliasing is an algorithm used to smooth edges.
  135. 135. Each OS and browsers have a different anti-aliasing and hinting setting.
  136. 136. OS + Browser Hinting and AA Win XP — IE6–8 GDI Grayscale Win XP — IE6–8 ClearType GCI ClearType IE9+ DirectWrite Win XP Chrome GDI ClearType Win XP Firefox GDI ClearType Win 7+ Chrome 37+ DirectWrite Win 7+ Firefox Depends? OS X CoreText, ignores hinting * Based on a lot of Google searches, might not be accurate
  137. 137. Test. On. Every. Browser.
  138. 138. Choosing
  139. 139. Choosing Sources
  140. 140. Choose a reliable source for your font.
  141. 141. The font must have a proper unicode table, kerning, hinting etc.
  142. 142. Also check for language support, webfont license, OpenType features.
  143. 143. Fonts are expensive for a reason.
  144. 144. Choosing Personalities
  145. 145. Each typeface has a story and a personality, choose one that match yours.
  146. 146. The quick brown fox jumps over the lazy dog. Bembo — based in engravings from 1495, renaissance style, readable in small font sizes.
  147. 147. The quick brown fox jumps over the lazy dog. Helvetica — Symbol of the Modern Design, is readable, international and neutral.
  148. 148. The quick brown fox jumps over the lazy dog. Museo — The modern, geometric shapes and the rounded, slab serifs give a strong personality to this type.
  149. 149. Serifs have a refined look, need less line height values, and help maintaining a cohesive text.
  150. 150. Sans serifs have a modern look, and increased legibility on screens.
  151. 151. Start simple, with a readable body typeface.
  152. 152. Then format titles and subtitles using different weights and styles.
  153. 153. Choose a second typeface for titles if needed. Avoid going further than that.
  154. 154. Choosing Performance
  155. 155. Each font size is extra data that must be downloaded.
  156. 156. Measure the impact of each added typeface.
  157. 157. You’ll have to choose between speed and non-FOUC.
  158. 158. Avoid loading custom typefaces on mobile devices.
  159. 159. I Typography
  160. 160. We’ve only scratched the surface.
  161. 161. We are the craftspeople of the web.
  162. 162. We should keep our roots in place.
  163. 163. Further reading: The Elements of Typographic Style Robert Bringhurst EN: http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326 PT-BR: http://editora.cosacnaify.com.br/ObraSinopse/11584/Elementos-do-estilo-tipogr%C3%A1fico---vers%C3%A3o-30.aspx Thinking with Type Ellen Lupton EN: http://www.amazon.com/Thinking-Type-2nd-revised-expanded/dp/1568989695 PT-BR: http://editora.cosacnaify.com.br/ObraSinopse/1875/Pensar-com-tipos---2%C2%BA-edi%C3%A7%C3%A3o-%28Previs%C3%A3o-de-envio-a- partir-de-200415%29.aspx Type on Screen Ellen Lupton EN: http://www.amazon.com/Type-Screen-Critical-Designers-Developers/dp/161689170X On Web Typography Jason Santa Maria EN: http://abookapart.com/products/on-web-typography Type and Typography Baines & Haslam EN: http://www.amazon.co.uk/Type-Typography-Portfolio-Phil-Baines/dp/1856694372
  164. 164. Thanks! twitter.com/shiota github.com/eshiota slideshare.net/eshiota contato@eshiota.com

×