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

Ampersand Conference NYC / Get Your Hands Dirty

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.

Trent Walton

November 02, 2013
Tweet

More Decks by Trent Walton

Other Decks in Design

Transcript

  1. @trentwalton
    GET YOUR HANDS DIRTY

    View Slide

  2. A bit about myself…
    HOWDY!

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. Typographically, at least…
    MY BACKSTORY

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. body{
    font-family:serif,"or-whatever";
    }

    View Slide

  18. View Slide

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

    View Slide

  20. View Slide

  21. As web typography
    improves, web designers
    want the same level of
    control print designers have.

    View Slide

  22. But what does that mean?

    View Slide

  23. I want to use these…

    View Slide

  24. not just these.

    View Slide

  25. And put all this…

    View Slide

  26. into this.

    View Slide

  27. View Slide

  28. TYPE + CSS

    View Slide

  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;
    }

    View Slide

  30. LET’S SET SOME TYPE!

    View Slide

  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.

    View Slide

  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;

    View Slide

  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;

    View Slide

  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;

    View Slide

  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;

    View Slide

  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;

    View Slide

  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;

    View Slide

  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;

    View Slide

  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 */

    View Slide

  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...

    View Slide

  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.

    View Slide

  42. NEWER STUFF
    Text Shadow(s)
    HSLA / RGBA Color
    Transforms
    Pseudo Class
    Selectors
    *Text Stroke
    *Image Mask
    *Background Clip

    View Slide

  43. Using these properties is the easy part.
    BE THOUGHTFUL

    View Slide

  44. View Slide

  45. bit.ly/17ycGiR

    View Slide

  46. View Slide

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

    View Slide

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

    View Slide

  49. View Slide

  50. View Slide

  51. View Slide

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

    View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. RGBA & HSLA
    .something{
    color: rgba(241,242,233,0.6);
    }

    View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. TRANSFORM: ROTATE
    .something{
    transform: rotate(-45deg);
    }

    View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. TRANSFORM: SKEW
    .something{
    transform: skewY(-12deg);
    }

    View Slide

  71. View Slide

  72. View Slide

  73. View Slide

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

    View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. FAKE TEXT STROKE
    .something{
    text-shadow:
    1px 1px 0 #b03136,
    -1px -1px 0 #b03136,
    -1px 1px 0 #b03136,
    1px -1px 0 #b03136;
    }

    View Slide

  80. View Slide

  81. View Slide

  82. View Slide

  83. BACKGROUND CLIP
    .something{
    background:url(img.png);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
    * partial -webkit only

    View Slide

  84. View Slide

  85. View Slide

  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

    View Slide

  87. View Slide

  88. View Slide

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

    View Slide

  90. View Slide

  91. View Slide

  92. View Slide

  93. View Slide

  94. Controlling Web Typography
    TARGETING TYPE

    View Slide

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

    View Slide

  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

    View Slide

  97. View Slide

  98. :FIRST-LETTER
    h1:first-letter{
    something:anything;
    }

    View Slide

  99. View Slide

  100. View Slide

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

    View Slide

  102. View Slide

  103. View Slide

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

    View Slide

  105. View Slide

  106. View Slide

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

    View Slide

  108. View Slide

  109. View Slide

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

    View Slide

  111. A BETTER WAY TO LAYER TYPE

    View Slide

  112. View Slide

  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

    View Slide

  114. View Slide

  115. View Slide

  116. View Slide


  117. layered

    View Slide

  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;
    }

    View Slide

  119. View Slide

  120. View Slide

  121. View Slide

  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

    View Slide

  123. CSS Tricks for everything
    I DON’T REMEMBER THIS STUFF

    View Slide

  124. View Slide

  125. IE9 + WOFF
    LOST WORLD’S FAIRS

    View Slide

  126. View Slide

  127. View Slide

  128. View Slide

  129. View Slide

  130. View Slide

  131. View Slide

  132. View Slide

  133. View Slide

  134. View Slide

  135. Pseudo class selectors weren’t enough.
    WE NEEDED MORE CONTROL

    View Slide

  136. View Slide

  137. View Slide

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

    View Slide

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

    View Slide

  140. View Slide

  141. View Slide

  142. View Slide

  143. e Moon
    LETTERS

    View Slide

  144. View Slide


  145. O
    n
    w
    a
    r
    d

    &

    View Slide

  146. View Slide

  147. El Dorado
    WORDS

    View Slide

  148. View Slide


  149. Discover
    &
    learn
    new
    cultures
    and
    vistas

    View Slide

  150. View Slide

  151. Atlantis
    LINES

    View Slide

  152. View Slide


  153. Hello!
    Gills or
    Lungs
    Come as you are!All welcome

    View Slide

  154. View Slide

  155. People kicked ass with this stuff…
    IN THE WILD

    View Slide

  156. View Slide

  157. View Slide

  158. View Slide

  159. View Slide

  160. View Slide

  161. View Slide

  162. View Slide

  163. View Slide

  164. Blogs & Side Projects
    FURTHER EXPLORATION

    View Slide

  165. View Slide

  166. View Slide

  167. View Slide

  168. WHAT ABOUT RWD?

    View Slide

  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

    View Slide

  170. View Slide

  171. View Slide

  172. View Slide

  173. View Slide

  174. View Slide

  175. View Slide

  176. View Slide

  177. Even More Control
    OPENTYPE!

    View Slide

  178. View Slide

  179. View Slide

  180. View Slide

  181. View Slide

  182. View Slide

  183. COMMON LIGATURES
    .something{
    font-feature-settings:"liga" 1;
    }

    View Slide

  184. View Slide

  185. View Slide

  186. bit.ly/17ycGiR
    DOWNLOAD THE DEMO

    View Slide

  187. View Slide

  188. View Slide

  189. @trentwalton
    THANKS!

    View Slide

  190. View Slide