Controlling Web Typography

Slides from my talk at Converge SE 2011
http://convergese.com

Transcript

1. Controlling Web Typography ConvergeSE 2011
2. Howdy! A little bit about myself...
3. I work with 2 of my best friends in Texas.
4. I’m this kid’s father. He’s trying to figure out what’s going on with my neck.
5. I think about food all the time.
6. My wife had to put me on a font allowance.
7. As web typography improves, web designers want the same level of control print designers have.
8. But what does that mean?
9. I want to use all these...
10. Not just these.
11. And put all this...
12. Into this.
13. CSS & Web Safe Fonts What can be achieved with the basics?
14. CSS We Know .thing{ font-size: 1em; line-height: 1.5px; font-style: italic; font-weight: bold; text-decoration: none; direction: ltr; font-variant: small-caps; text-indent: .5em; text-transform: none; text-align: left; letter-spacing: .1em; word-spacing: .1em; } Let’s put this stuff to work...
15. 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.
16. 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;
17. 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;
18. 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;
19. 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;
20. 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: #c44032;
21. 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;
22. 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;
23. 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: 20px; /* to wrap things up */
24. 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...
25. 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.
26. Still, being web safe is limiting. #TypeNerdProblems #GimmeWebFonts
27. ALTERNATE GOTHIC No. 1 became part of our brand.
28. 2009: Our First Usage of @font-face
29. Web Font Services Choices, Resources & Greater Acceptance
38. sprungmarker.de
39. Web Fonts on Our Own Stuff
40. Alternate Gothic & Proxima Nova
41. Prociono (pro-cho-no?) via The League of Movable Type
42. FF Meta Serif & Liquorstore
43. Gaining Control With CSS3 We’ve got web fonts, and we’re not afraid to use them!
44. text-shadow: -3px 2px 0px #514d46;
45. color: rgba(7, 206, 250, 0.5); text-shadow: 18px 0px 0 #AD0918;
46. p.intro:first-letter{float:left; margin:0 3px 0 0; font-size:57px;}
47. Going Further Less Supported & More Adventurous
49. This is beautiful. Now do it with selectable type. ;P Chandler Van De Water March 22, 2010
50. Google: CSS Background Text
51. .masked{ background: url(img/paint.png); -webkit-background-clip:text; -webkit-animation-name:masked-ani; } @-webkit-keyframes masked-ani{ 0% {background-position: left bottom;} 100% {background-position: right bottom;} }
54. .css:after{ content: "CSS Three"; -webkit-background-clip: text; background: url(crosshatch.png); }
55. But background-clip:text; degrades poorly.
56. -mask-image: url(css3/header-bkg-mask.png);
57. The Image Part Transparency knocks out the letters’ color fill
58. Lost World’s Fairs Putting This Stuff into Practice for IE9
60. Meet my testing compy. It lives in a drawer.
61. Testing for the IE9 Platform Preview
66. But how to keep the markup manageable?
67. Injects <spans> around letters, words, or lines
68. Targeting Letters
69. The HTML <!doctype html> <html> <body> <h1 id="txt_onward">Onward &amp; Upward</h1> </body> </html>
70. Add the JS <!doctype html> <html> <body> <h1 id="txt_onward">Onward &amp; Upward</h1> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.lettering.min.js"></script> <script> $(document).ready(function() { $("#txt_onward").lettering(); }); </script> </body> </html>
71. And you get... <h1 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 class="char9"></span> <span class="char10">U</span> <span class="char11">p</span>
72. #txt_onward .char1{top:13px;} #txt_onward .char2{top:12px;} #txt_onward .char3{top:11px;} #txt_onward .char4{top:10px;} #txt_onward .char5{top:9px;}
73. Targeting Words #left_teaser .word6{color:hsla(57, 100%, 39%, .8);} #left_teaser .word7{font-size:60px;} #left_teaser .word4, #left_teaser .word6{font:38px/.6 "chunk-1","chunk-2";}
74. Targeting Lines #txt_gillsorlungs .line1{font-size:18px; font-weight:700;} #txt_gillsorlungs .line2, #txt_gillsorlungs .line3{font-size:40px; color:#9ecc3b;} #txt_gillsorlungs .line4, #txt_gillsorlungs .line5{font-size:16px; font-style:italic;}
75. Lettering.js isn’t perfect. But maybe one day, enhanced CSS pseudo selectors could be.
76. Imagine this: h1:nth-letter(4); or h1:nth-char(4); targeting the 4th letter within an <h1> tag h1:nth-word(3); targeting the third word within an <h1> tag Further reading: http://twa.lt/f4L2zT
77. Web Fonts on Client Projects After Lost World’s Fairs, we became comfortable using web fonts on client gigs.
78. Fono Regular (thanks philsfonts.com)
79. Rooney & Proxima Nova
80. Web Fonts on My Blog! Taking Things as Far as I Can
81. transform: rotate(-8deg); /* w/ vendor prefixes */
82. text-shadow: #253e45 -1px 1px 0, #253e45 -2px 2px 0, #d45848 -3px 3px 0, #d45848 -4px 4px 0;
83. transform: scale(1) skewY(15deg); transform: scale(1) skewY(-15deg); /* w/ vendor prefixes */
84. Controlled Web Type & Responsive Can finely-tuned type be fluid, flexible, and responsive?
85. June 2010 Redesign
86. Thinking 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
87. Ultimately, all the art-directed bits I had in place drove me to hold off, but I can’t help but think that If I change anything in the coming months, that’d be it. Trent Walton June 22, 2010
88. In Other Words...
89. Bazinga!
92. What’s Next? A quick glance at the future...
93. More support for background-clip:text; and mask-image & text
94. Layer Blends layer-blend:color-burn; :color-dodge; :multiply;
95. Gimme Specificity! h1:nth-letter(4); or h1:nth-char(4); To-The-Letter & Word CSS Selection h1:nth-word(3);
96. Questions?
97. Thanks! TrentWalton.com @TrentWalton