Controlling Web Typography

  • 17,689 views
Uploaded on

Converge SE 2011

Converge SE 2011

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
17,689
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
0
Likes
87

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. ControllingWeb TypographyConverge 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 figureout 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 typographyimproves, webdesigners want thesame level of controlprint designers have.
  • 8. But what doesthat mean?
  • 9. I want to use all these...
  • 10. Not just these.
  • 11. And put all this...
  • 12. Into this.
  • 13. CSS & Web SafeFontsWhat 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 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Still, being websafe is limiting.#TypeNerdProblems#GimmeWebFonts
  • 27. ALTERNATEbrand. No. 2became part of our GOTHIC
  • 28. 2009: Our FirstUsage of @font-face
  • 29. Web FontServicesChoices, Resources & Greater Acceptance
  • 30. sprungmarker.de
  • 31. Web Fonts onOur Own Stuff
  • 32. Alternate Gothic & Proxima Nova
  • 33. Prociono (pro-cho-no?)via The League of Movable Type
  • 34. FF Meta Serif & Liquorstore
  • 35. Gaining ControlWith CSS3We’ve got web fonts, and we’re not afraidto use them!
  • 36. text-shadow: -3px 2px 0px #514d46;
  • 37. color: rgba(7, 206, 250, 0.5);text-shadow: 18px 0px 0 #AD0918;
  • 38. p.intro:first-letter{float:left;margin:0 3px 0 0; font-size:57px;}
  • 39. Going FurtherLess Supported & More Adventurous
  • 40. Chandler Van De Water March 22, 2010This is beautiful. Now do itwith selectable type. ;P
  • 41. Google: CSS Background Text
  • 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. .css:after{ content: "CSS Three"; -webkit-background-clip: text; background: url(crosshatch.png);}
  • 44. But background-clip:text; degrades poorly.
  • 45. -mask-image: url(css3/header-bkg-mask.png);
  • 46. The Image PartTransparency knocks out the letters’ color fill
  • 47. Lost World’s FairsPutting This Stuff into Practice for IE9
  • 48. Meet my testing compy. It lives in a drawer.
  • 49. Testing for the IE9 Platform Preview
  • 50. But how to keep the markup manageable?
  • 51. Injects <spans> around letters, words, or lines
  • 52. Targeting Letters
  • 53. The HTML<!doctype html><html><body> <h1 id="txt_onward">Onward &amp; Upward</h1></body></html>
  • 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. 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. #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. 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. 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. Lettering.js isn’tperfect.But maybe one day, enhanced CSS pseudoselectors could be.
  • 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. Web Fonts onClient ProjectsAfter Lost World’s Fairs, we becamecomfortable using web fonts on client gigs.
  • 62. Fono Regular (thanks philsfonts.com)
  • 63. Rooney & Proxima Nova
  • 64. Web Fonts onMy Blog!Taking Things as Far as I Can
  • 65. transform: rotate(-8deg); /* w/ vendor prefixes */
  • 66. text-shadow: #253e45 -1px 1px 0, #253e45 -2px 2px 0, #d45848 -3px 3px 0, #d45848 -4px 4px 0;
  • 67. transform: scale(1) skewY(15deg);transform: scale(1) skewY(-15deg);/* w/ vendor prefixes */
  • 68. Controlled WebType & ResponsiveCan finely-tuned type be fluid, flexible, andresponsive?
  • 69. June 2010 Redesign
  • 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. 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. In Other Words...
  • 73. Bazinga!
  • 74. What’s Next?A quick glance at the future...
  • 75. More support for background-clip:text; andmask-image & text
  • 76. Layer Blendslayer-blend:color-burn; :color-dodge; :multiply;
  • 77. Gimme Specificity!h1:nth-letter(4); or h1:nth-char(4);h1:nth-word(3);To-The-Letter & Word CSS Selection
  • 78. Questions?
  • 79. Thanks!TrentWalton.com@TrentWalton