Controlling Web Typography
88 likes4,964 views
The document discusses controlling web typography through CSS properties and principles. It demonstrates how visual interest can be achieved using basic CSS properties like font-size, color, and text-transform. Letterspacing, line-height and other properties are shown to manipulate text. Web fonts have increased designers' interest in typography. JavaScript libraries can target letters, words and lines for fine-grained styling control. Future possibilities discussed include better support for text effects and more specific CSS selectors.
Controlling Web Typography
- 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.
- 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
- 69. The HTML <!doctype html> <html> <body> <h1 id="txt_onward">Onward & Upward</h1> </body> </html>
- 70. Add the JS <!doctype html> <html> <body> <h1 id="txt_onward">Onward & 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">&</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?
- 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.
- 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?