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

Controlling Web Typography

7aad555700fb85bf9787067349ac7ba9?s=47 Trent Walton
September 27, 2011

Controlling Web Typography

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

7aad555700fb85bf9787067349ac7ba9?s=128

Trent Walton

September 27, 2011
Tweet

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

  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  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

  48. None
  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;} }
  52. None
  53. None
  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

  59. None
  60. Meet my testing compy. It lives in a drawer.

  61. Testing for the IE9 Platform Preview

  62. None
  63. None
  64. None
  65. None
  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!

  90. None
  91. None
  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