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.

Transcript

1. @trentwalton GET YOUR HANDS DIRTY
2. A bit about myself… HOWDY!
11. Typographically, at least… MY BACKSTORY
17. body{ font-family:serif,"or-whatever"; }
19. @font-face{ font-family:"options!"; }
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.
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
45. bit.ly/17ycGiR
47. TEXT SHADOW .something{ text-shadow: x,y,blur,color; }
48. TEXT SHADOW .something{ text-shadow: 10px 10px 0 #b03136; }
52. TEXT SHADOWS .something{ text-shadow: x,y,blur,color, x,y,blur,color, x,y,blur,color, x,y,blur,color; }
58. RGBA & HSLA .something{ color: rgba(241,242,233,0.6); }
63. TRANSFORM: ROTATE .something{ transform: rotate(-45deg); }
70. TRANSFORM: SKEW .something{ transform: skewY(-12deg); }
74. TEXT STROKE .something{ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #f1f2e9; } * -webkit only
79. FAKE TEXT STROKE .something{ text-shadow: 1px 1px 0 #b03136, -1px -1px 0 #b03136, -1px 1px 0 #b03136, 1px -1px 0 #b03136; }
83. BACKGROUND CLIP .something{ background:url(img.png); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } * partial -webkit only
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
89. MASK IMAGE .something{ -webkit-mask-image:url(img.png); } * partial -webkit only
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
98. :FIRST-LETTER h1:first-letter{ something:anything; }
101. :FIRST-LINE h1:first-line{ something:anything; }
104. :BEFORE h1:before{ content:‘this text is’; something:anything; }
107. :AFTER h1:after{ content:‘this text is’; something:anything; }
110. .something:after{ content: ‘CSS Three’; }
111. A BETTER WAY TO LAYER TYPE
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
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; }
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
125. IE9 + WOFF LOST WORLD’S FAIRS
135. Pseudo class selectors weren’t enough. WE NEEDED MORE CONTROL
138. $(“h1”).lettering(); $(“h1”).lettering(‘words’); $(“h1”).lettering(‘lines’);
139. h1 span:nth-child(even){ color:#b03136; }
143. e Moon LETTERS
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>
147. El Dorado WORDS
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>
151. Atlantis LINES
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>
155. People kicked ass with this stuff… IN THE WILD
164. Blogs & Side Projects FURTHER EXPLORATION
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
177. Even More Control OPENTYPE!
183. COMMON LIGATURES .something{ font-feature-settings:"liga" 1; }
186. bit.ly/17ycGiR DOWNLOAD THE DEMO
189. @trentwalton THANKS!