SlideShare a Scribd company logo

Controlling Web Typography

•
•
Trent Walton
Trent Walton

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.

Related slideshows

Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web Design
 
CSS in React
CSS in ReactCSS in React
CSS in React
 
CSS Systems
CSS SystemsCSS Systems
CSS Systems
 
1 of 97
Controlling Web Typography Converge 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 figure out 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 typography improves, web designers want the same level of control print designers have.
But what does that mean?
I want to use all these...
Not just these.
And put all this...
Into this.
CSS & Web Safe Fonts What can be achieved with the basics?
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...
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.
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;
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;
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;
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;
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;
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;
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;
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 */
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...
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.
Still, being web safe is limiting. #TypeNerdProblems #GimmeWebFonts
ALTERNATEbrand. No. 2 became part of our GOTHIC
2009: Our First Usage of @font-face
Web Font Services Choices, Resources & Greater Acceptance
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
sprungmarker.de
Web Fonts on Our Own Stuff
Alternate Gothic & Proxima Nova
Prociono (pro-cho-no?) via The League of Movable Type
FF Meta Serif & Liquorstore
Gaining Control With CSS3 We’ve got web fonts, and we’re not afraid to 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 Further Less Supported & More Adventurous
Controlling Web Typography
Chandler Van De Water March 22, 2010 This is beautiful. Now do it with selectable type. ;P
Google: CSS Background Text
.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;} }
Controlling Web Typography
Controlling Web Typography
.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 Part Transparency knocks out the letters’ color fill
Lost World’s Fairs Putting This Stuff into Practice for IE9
Controlling Web Typography
Meet my testing compy. It lives in a drawer.
Testing for the IE9 Platform Preview
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
Controlling Web Typography
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"></script> <script src="path/to/jquery.lettering.min.js"></script> <script> $(document).ready(function() { $("#txt_onward").lettering(); }); </script> </body> </html>
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>
#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;}
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";}
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;}
Lettering.js isn’t perfect. But maybe one day, enhanced CSS pseudo selectors could be.
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
Web Fonts on Client Projects After Lost World’s Fairs, we became comfortable using web fonts on client gigs.
Fono Regular (thanks philsfonts.com)
Rooney & Proxima Nova
Web Fonts on My 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 Web Type & Responsive Can finely-tuned type be fluid, flexible, and responsive?
June 2010 Redesign
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.
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.
In Other Words...
Bazinga!
Controlling Web Typography
Controlling Web Typography
What’s Next? A quick glance at the future...
More support for background-clip:text; and mask-image & text
Layer Blends layer-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

More Related Content

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.
  • 9. I want to use all these...
  • 11. And put all 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
  • 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;
  • 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
  • 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); }
  • 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 &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)
  • 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.
  • 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