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

Ampersand Conference NYC / Get Your Hands Dirty

7aad555700fb85bf9787067349ac7ba9?s=47 Trent Walton
November 02, 2013

Ampersand Conference NYC / Get Your Hands Dirty

How far can we push type on the web? As webfont choices have expanded over the years, so have our options for what we can do with them. We’ll explore what’s possible with CSS, Javascript, and a little bit of elbow grease.

7aad555700fb85bf9787067349ac7ba9?s=128

Trent Walton

November 02, 2013
Tweet

Transcript

  1. @trentwalton GET YOUR HANDS DIRTY

  2. A bit about myself… HOWDY!

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. Typographically, at least… MY BACKSTORY

  12. None
  13. None
  14. None
  15. None
  16. None
  17. body{ font-family:serif,"or-whatever"; }

  18. None
  19. @font-face{ font-family:"options!"; }

  20. None
  21. As web typography improves, web designers want the same level

    of control print designers have.
  22. But what does that mean?

  23. I want to use these…

  24. not just these.

  25. And put all this…

  26. into this.

  27. None
  28. TYPE + CSS

  29. THE BASICS .something{ font-size:1em; line-height:1.5px; font-style:italic; font-weight:bold; text-decoration:none; direction:ltr; font-variant:small-caps;

    text-indent:0.5em; text-transform:none; text-align:left; letter-spacing:0.1em; word-spacing:0.1em; }
  30. LET’S SET SOME TYPE!

  31. CSS & web safe fonts What can be achieved with

    the basics The growing prominence of web fonts seems to have boosted web designers’ interest in typography. Visual interest can be achieved with these CSS properties & core typographic principals.
  32. CSS & web safe fonts What can be achieved with

    the basics The growing prominence of web fonts seems to have boosted web designers’ interest in typography. Visual interest can be achieved with these CSS properties & core typographic principals. font-family:georgia, serif;
  33. CSS & web safe fonts What can be achieved with

    the basics The growing prominence of web fonts seems to have boosted web designers’ interest in typography. Visual interest can be achieved with these CSS properties & core typographic principals. font-size:60px;
  34. CSS & WEB SAFE FONTS What can be achieved with

    the basics The growing prominence of web fonts seems to have boosted web designers’ interest in typography. Visual interest can be achieved with these CSS properties & core typographic principals. text-transform:uppercase;
  35. CSS & WEB SAFE FONTS What can be achieved with

    the basics The growing prominence of web fonts seems to have boosted web designers’ interest in typography. Visual interest can be achieved with these CSS properties & core typographic principals. letter-spacing:2px;
  36. CSS & WEB SAFE FONTS What can be achieved with

    the basics The growing prominence of web fonts seems to have boosted web designers’ interest in typography. Visual interest can be achieved with these CSS properties & core typographic principals. color:#ee4938;
  37. CSS & WEB SAFE FONTS What can be achieved with

    the basics The growing prominence of web fonts seems to have boosted web designers’ interest in typography. Visual interest can be achieved with these CSS properties & core typographic principals. font-style:italic;
  38. CSS & WEB SAFE FONTS What can be achieved with

    the basics The growing prominence of web fonts seems to have boosted web designers’ interest in typography. Visual interest can be achieved with these CSS properties & core typographic principals. text-align:center;
  39. CSS & WEB SAFE FONTS What can be achieved with

    the basics The growing prominence of web fonts seems to have boosted web designers’ interest in typography. Visual interest can be achieved with these CSS properties & core typographic principals. line-height:1.4; /* wraps up */
  40. CSS & web safe fonts What can be achieved with

    the basics The growing prominence of web fonts seems to have boosted web designers’ interest in typography. Visual interest can be achieved with these CSS properties & core typographic principals. Before...
  41. CSS & WEB SAFE FONTS What can be achieved with

    the basics The growing prominence of web fonts seems to have boosted web designers’ interest in typography. Visual interest can be achieved with these CSS properties & core typographic principals. After.
  42. NEWER STUFF Text Shadow(s) HSLA / RGBA Color Transforms Pseudo

    Class Selectors *Text Stroke *Image Mask *Background Clip
  43. Using these properties is the easy part. BE THOUGHTFUL

  44. None
  45. bit.ly/17ycGiR

  46. None
  47. TEXT SHADOW .something{ text-shadow: x,y,blur,color; }

  48. TEXT SHADOW .something{ text-shadow: 10px 10px 0 #b03136; }

  49. None
  50. None
  51. None
  52. TEXT SHADOWS .something{ text-shadow: x,y,blur,color, x,y,blur,color, x,y,blur,color, x,y,blur,color; }

  53. None
  54. None
  55. None
  56. None
  57. None
  58. RGBA & HSLA .something{ color: rgba(241,242,233,0.6); }

  59. None
  60. None
  61. None
  62. None
  63. TRANSFORM: ROTATE .something{ transform: rotate(-45deg); }

  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. TRANSFORM: SKEW .something{ transform: skewY(-12deg); }

  71. None
  72. None
  73. None
  74. TEXT STROKE .something{ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #f1f2e9; } * -webkit

    only
  75. None
  76. None
  77. None
  78. None
  79. FAKE TEXT STROKE .something{ text-shadow: 1px 1px 0 #b03136, -1px

    -1px 0 #b03136, -1px 1px 0 #b03136, 1px -1px 0 #b03136; }
  80. None
  81. None
  82. None
  83. BACKGROUND CLIP .something{ background:url(img.png); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } *

    partial -webkit only
  84. None
  85. None
  86. BACKGROUND CLIP .something{ background: -webkit-linear-gradient(transparent, transparent),url(img.png); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

    } * partial -webkit only
  87. None
  88. None
  89. MASK IMAGE .something{ -webkit-mask-image:url(img.png); } * partial -webkit only

  90. None
  91. None
  92. None
  93. None
  94. Controlling Web Typography TARGETING TYPE

  95. PSEUDO CLASS SELECTORS :hover :link :visited :active :focus :target :enabled

    :checked :indeterminate
  96. PSEUDO CLASS SELECTORS :first-letter :first-line :before :after :first-child :last-child :nth-child

    :nth-of-type :first-of-type :last-of-type
  97. None
  98. :FIRST-LETTER h1:first-letter{ something:anything; }

  99. None
  100. None
  101. :FIRST-LINE h1:first-line{ something:anything; }

  102. None
  103. None
  104. :BEFORE h1:before{ content:‘this text is’; something:anything; }

  105. None
  106. None
  107. :AFTER h1:after{ content:‘this text is’; something:anything; }

  108. None
  109. None
  110. .something:after{ content: ‘CSS Three’; }

  111. A BETTER WAY TO LAYER TYPE

  112. None
  113. I recommend using a data-attribute on the h1 to keep

    duplicate content out of the way of screen readers and to keep search engines happy. —Brandon Durham
  114. None
  115. None
  116. None
  117. <h1 data-highlight="layered"> layered </h1>

  118. .h1{ font-family:'Cyclone Background A'…; } .h1:after{ content: attr(data-highlight); font-family:'Cyclone Inline

    A'…; position: absolute; left: 0; right: 0; top: 0; }
  119. None
  120. None
  121. None
  122. PSEUDO CLASS SELECTORS ✓:first-letter ✓:first-line ✓:before ✓:after :first-child :last-child :nth-child

    :nth-of-type :first-of-type :last-of-type
  123. CSS Tricks for everything I DON’T REMEMBER THIS STUFF

  124. None
  125. IE9 + WOFF LOST WORLD’S FAIRS

  126. None
  127. None
  128. None
  129. None
  130. None
  131. None
  132. None
  133. None
  134. None
  135. Pseudo class selectors weren’t enough. WE NEEDED MORE CONTROL

  136. None
  137. None
  138. $(“h1”).lettering(); $(“h1”).lettering(‘words’); $(“h1”).lettering(‘lines’);

  139. h1 span:nth-child(even){ color:#b03136; }

  140. None
  141. None
  142. None
  143. e Moon LETTERS

  144. None
  145. <span id="txt_onward"> <span class="char1">O</span> <span class="char2">n</span> <span class="char3">w</span> <span class="char4">a</span>

    <span class="char5">r</span> <span class="char6">d</span> <span class="char7"> </span> <span class="char8">&amp;<span> </span>
  146. None
  147. El Dorado WORDS

  148. None
  149. <li id="left_teaser" class="left"> <span class="word1">Discover</span> <span class="word2">&amp;</span> <span class="word3">learn</span> <span

    class="word4">new</span> <span class="word5">cultures</span> <span class="word6">and</span> <span class="word7">vistas</span> </li>
  150. None
  151. Atlantis LINES

  152. None
  153. <p id="txt_gillsorlungs"> <span class="line1">Hello!</span> <span class="line2">Gills or</span> <span class="line3">Lungs</span> <span

    class="line4">Come as you are!</s <span class="line5">All welcome<span> </p>
  154. None
  155. People kicked ass with this stuff… IN THE WILD

  156. None
  157. None
  158. None
  159. None
  160. None
  161. None
  162. None
  163. None
  164. Blogs & Side Projects FURTHER EXPLORATION

  165. None
  166. None
  167. None
  168. WHAT ABOUT RWD?

  169. inking along the ‘touch’ theme you brought up, I’d be

    really interested to see how this design could be enhanced even further still using the responsive web design approach to building. Elliot Jay Stocks June 22, 2010
  170. None
  171. None
  172. None
  173. None
  174. None
  175. None
  176. None
  177. Even More Control OPENTYPE!

  178. None
  179. None
  180. None
  181. None
  182. None
  183. COMMON LIGATURES .something{ font-feature-settings:"liga" 1; }

  184. None
  185. None
  186. bit.ly/17ycGiR DOWNLOAD THE DEMO

  187. None
  188. None
  189. @trentwalton THANKS!

  190. None