ControllingWeb TypographyConverge SE 2011
Howdy!A little bit about myself...
I work with 2 of my best friends in Texas.
I’m this kid’s father. He’s trying to figureout what’s going on with my neck.
I think about food all the time.
My wife had to put me on a font allowance.
As web typographyimproves, webdesigners want thesame level of controlprint designers have.
But what doesthat mean?
I want to use all these...
Not just these.
And put all this...
Into this.
CSS & Web SafeFontsWhat can be achieved with the basics?
CSS We Know.thing{ 	 font-size: 1em;             line-height: 1.5px; 	 font-style: italic;         font-weight: bold; 	 te...
CSS & web safe fontsWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web desig...
CSS & web safe fontsWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web desig...
CSS & web safe fontsWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web desig...
CSS & WEB SAFE FONTSWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web desig...
C S S & WE B S A F E F O N T SWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted...
C S S & WE B S A F E F O N T SWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted...
C S S & WE B S A F E F O N T SWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted...
C S S & WE B S A F E F O N T S        What can be achieved with the basicsThe growing prominence of web fonts seems to hav...
C S S & WE B S A F E F O N T S        What can be achieved with the basicsThe growing prominence of web fonts seems to hav...
CSS & web safe fontsWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web desig...
C S S & WE B S A F E F O N T S         What can be achieved with the basicsThe growing prominence of web fonts seems to ha...
Still, being websafe is limiting.#TypeNerdProblems#GimmeWebFonts
ALTERNATEbrand. No. 2became part of our                   GOTHIC
2009: Our FirstUsage of @font-face
Web FontServicesChoices, Resources & Greater Acceptance
sprungmarker.de
Web Fonts onOur Own Stuff
Alternate Gothic & Proxima Nova
Prociono (pro-cho-no?)via The League of Movable Type
FF Meta Serif & Liquorstore
Gaining ControlWith CSS3We’ve got web fonts, and we’re not afraidto use them!
text-shadow: -3px 2px 0px #514d46;
color: rgba(7, 206, 250, 0.5);text-shadow: 18px 0px 0 #AD0918;
p.intro:first-letter{float:left;margin:0 3px 0 0; font-size:57px;}
Going FurtherLess Supported & More Adventurous
Chandler Van De Water       March 22, 2010This is beautiful. Now do itwith selectable type. ;P
Google: CSS Background Text
.masked{   background: url(img/paint.png);   -webkit-background-clip:text;   -webkit-animation-name:masked-ani;}@-webkit-k...
.css:after{    content: "CSS Three";    -webkit-background-clip: text;    background: url(crosshatch.png);}
But background-clip:text; degrades poorly.
-mask-image: url(css3/header-bkg-mask.png);
The Image PartTransparency knocks out the letters’ color fill
Lost World’s FairsPutting This Stuff into Practice for IE9
Meet my testing compy. It lives in a drawer.
Testing for the IE9 Platform Preview
But how to keep the markup manageable?
Injects <spans> around letters, words, or lines
Targeting Letters
The HTML<!doctype html><html><body> <h1 id="txt_onward">Onward &amp; Upward</h1></body></html>
Add the JS<!doctype html><html><body>  <h1 id="txt_onward">Onward &amp; Upward</h1>  <script src="path/to/jquery.min.js"><...
And you get...<h1 id="txt_onward">  <span class="char1">O</span>  <span class="char2">n</span>  <span class="char3">w</spa...
#txt_onward   .char1{top:13px;}#txt_onward   .char2{top:12px;}#txt_onward   .char3{top:11px;}#txt_onward   .char4{top:10px...
Targeting Words#left_teaser .word6{color:hsla(57, 100%, 39%, .8);}#left_teaser .word7{font-size:60px;}#left_teaser .word4,...
Targeting Lines#txt_gillsorlungs   .line1{font-size:18px; font-weight:700;}#txt_gillsorlungs   .line2,#txt_gillsorlungs   ...
Lettering.js isn’tperfect.But maybe one day, enhanced CSS pseudoselectors could be.
Imagine this:h1:nth-letter(4); or h1:nth-char(4);targeting the 4th letter within an <h1> tagh1:nth-word(3);targeting the t...
Web Fonts onClient ProjectsAfter Lost World’s Fairs, we becamecomfortable using web fonts on client gigs.
Fono Regular (thanks philsfonts.com)
Rooney & Proxima Nova
Web Fonts onMy Blog!Taking Things as Far as I Can
transform: rotate(-8deg); /* w/ vendor prefixes */
text-shadow: #253e45 -1px 1px 0, #253e45 -2px 2px 0,	           #d45848 -3px 3px 0, #d45848 -4px 4px 0;
transform: scale(1) skewY(15deg);transform: scale(1) skewY(-15deg);/* w/ vendor prefixes */
Controlled WebType & ResponsiveCan finely-tuned type be fluid, flexible, andresponsive?
June 2010 Redesign
Elliot Jay Stocks           June 22, 2010Thinking along the ‘touch’ theme youbrought up, I’d be really interested to seeho...
Trent Walton            June 22, 2010Ultimately, all the art-directed bits I had inplace drove me to hold off, but I can’t ...
In Other Words...
Bazinga!
What’s Next?A quick glance at the future...
More support for background-clip:text; andmask-image & text
Layer Blendslayer-blend:color-burn;           :color-dodge;           :multiply;
Gimme Specificity!h1:nth-letter(4); or h1:nth-char(4);h1:nth-word(3);To-The-Letter & Word CSS Selection
Questions?
Thanks!TrentWalton.com@TrentWalton
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Upcoming SlideShare
Loading in...5
×

Controlling Web Typography

18,177

Published on

Converge SE 2011

Published in: Technology, Design
0 Comments
87 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
18,177
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
87
Embeds 0
No embeds

No notes for slide

Controlling Web Typography

  1. 1. ControllingWeb TypographyConverge SE 2011
  2. 2. Howdy!A little bit about myself...
  3. 3. I work with 2 of my best friends in Texas.
  4. 4. I’m this kid’s father. He’s trying to figureout what’s going on with my neck.
  5. 5. I think about food all the time.
  6. 6. My wife had to put me on a font allowance.
  7. 7. As web typographyimproves, webdesigners want thesame level of controlprint designers have.
  8. 8. But what doesthat mean?
  9. 9. I want to use all these...
  10. 10. Not just these.
  11. 11. And put all this...
  12. 12. Into this.
  13. 13. CSS & Web SafeFontsWhat can be achieved with the basics?
  14. 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. 15. CSS & web safe fontsWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designersʼ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.
  16. 16. CSS & web safe fontsWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.font-family: georgia, serif;
  17. 17. CSS & web safe fontsWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.font-size: 60px;
  18. 18. CSS & WEB SAFE FONTSWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.text-transform: uppercase;
  19. 19. C S S & WE B S A F E F O N T SWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.letter-spacing: 2px;
  20. 20. C S S & WE B S A F E F O N T SWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.color: #c44032;
  21. 21. C S S & WE B S A F E F O N T SWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.font-style: italic;
  22. 22. C S S & WE B S A F E F O N T S What can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.text-align: center;
  23. 23. C S S & WE B S A F E F O N T S What can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.line-height: 20px; /* to wrap things up */
  24. 24. CSS & web safe fontsWhat can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designersʼ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.Before...
  25. 25. C S S & WE B S A F E F O N T S What can be achieved with the basicsThe growing prominence of web fonts seems to haveboosted web designers’ interest in typography. Visualinterest can be achieved with these CSS properties &core typographic principals.After.
  26. 26. Still, being websafe is limiting.#TypeNerdProblems#GimmeWebFonts
  27. 27. ALTERNATEbrand. No. 2became part of our GOTHIC
  28. 28. 2009: Our FirstUsage of @font-face
  29. 29. Web FontServicesChoices, Resources & Greater Acceptance
  30. 30. sprungmarker.de
  31. 31. Web Fonts onOur Own Stuff
  32. 32. Alternate Gothic & Proxima Nova
  33. 33. Prociono (pro-cho-no?)via The League of Movable Type
  34. 34. FF Meta Serif & Liquorstore
  35. 35. Gaining ControlWith CSS3We’ve got web fonts, and we’re not afraidto use them!
  36. 36. text-shadow: -3px 2px 0px #514d46;
  37. 37. color: rgba(7, 206, 250, 0.5);text-shadow: 18px 0px 0 #AD0918;
  38. 38. p.intro:first-letter{float:left;margin:0 3px 0 0; font-size:57px;}
  39. 39. Going FurtherLess Supported & More Adventurous
  40. 40. Chandler Van De Water March 22, 2010This is beautiful. Now do itwith selectable type. ;P
  41. 41. Google: CSS Background Text
  42. 42. .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;}}
  43. 43. .css:after{ content: "CSS Three"; -webkit-background-clip: text; background: url(crosshatch.png);}
  44. 44. But background-clip:text; degrades poorly.
  45. 45. -mask-image: url(css3/header-bkg-mask.png);
  46. 46. The Image PartTransparency knocks out the letters’ color fill
  47. 47. Lost World’s FairsPutting This Stuff into Practice for IE9
  48. 48. Meet my testing compy. It lives in a drawer.
  49. 49. Testing for the IE9 Platform Preview
  50. 50. But how to keep the markup manageable?
  51. 51. Injects <spans> around letters, words, or lines
  52. 52. Targeting Letters
  53. 53. The HTML<!doctype html><html><body> <h1 id="txt_onward">Onward &amp; Upward</h1></body></html>
  54. 54. 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>
  55. 55. 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>
  56. 56. #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;}
  57. 57. 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";}
  58. 58. 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;}
  59. 59. Lettering.js isn’tperfect.But maybe one day, enhanced CSS pseudoselectors could be.
  60. 60. Imagine this:h1:nth-letter(4); or h1:nth-char(4);targeting the 4th letter within an <h1> tagh1:nth-word(3);targeting the third word within an <h1> tagFurther reading: http://twa.lt/f4L2zT
  61. 61. Web Fonts onClient ProjectsAfter Lost World’s Fairs, we becamecomfortable using web fonts on client gigs.
  62. 62. Fono Regular (thanks philsfonts.com)
  63. 63. Rooney & Proxima Nova
  64. 64. Web Fonts onMy Blog!Taking Things as Far as I Can
  65. 65. transform: rotate(-8deg); /* w/ vendor prefixes */
  66. 66. text-shadow: #253e45 -1px 1px 0, #253e45 -2px 2px 0, #d45848 -3px 3px 0, #d45848 -4px 4px 0;
  67. 67. transform: scale(1) skewY(15deg);transform: scale(1) skewY(-15deg);/* w/ vendor prefixes */
  68. 68. Controlled WebType & ResponsiveCan finely-tuned type be fluid, flexible, andresponsive?
  69. 69. June 2010 Redesign
  70. 70. Elliot Jay Stocks June 22, 2010Thinking along the ‘touch’ theme youbrought up, I’d be really interested to seehow this design could be enhanced evenfurther still using the responsive webdesign approach to building.
  71. 71. Trent Walton June 22, 2010Ultimately, all the art-directed bits I had inplace drove me to hold off, but I can’t helpbut think that If I change anything in thecoming months, that’d be it.
  72. 72. In Other Words...
  73. 73. Bazinga!
  74. 74. What’s Next?A quick glance at the future...
  75. 75. More support for background-clip:text; andmask-image & text
  76. 76. Layer Blendslayer-blend:color-burn; :color-dodge; :multiply;
  77. 77. Gimme Specificity!h1:nth-letter(4); or h1:nth-char(4);h1:nth-word(3);To-The-Letter & Word CSS Selection
  78. 78. Questions?
  79. 79. Thanks!TrentWalton.com@TrentWalton

×