Converge SE 2011

1. Controlling
Web Typography
Converge SE 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. C S S & WE B S A F E F O N T S
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. C S S & WE B S A F E F O N T S
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. C S S & WE B S A F E F O N T S
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. C S S & WE B S A F E F O N T S
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. C S S & WE B S A F E F O N T S
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. C S S & WE B S A F E F O N T S
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. ALTERNATEbrand. No. 2
became part of our
GOTHIC

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. Chandler Van De Water
March 22, 2010
This is beautiful. Now do it
with selectable type. ;P

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. Elliot Jay Stocks
June 22, 2010
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.

87. Trent Walton
June 22, 2010
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.

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);
h1:nth-word(3);
To-The-Letter & Word CSS Selection

96. Questions?

97. Thanks!
TrentWalton.com
@TrentWalton