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

Controlling Web Typography

Trent Walton
September 27, 2011

Controlling Web Typography

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

Trent Walton

September 27, 2011
Tweet

More Decks by Trent Walton

Other Decks in Design

Transcript

  1. 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...
  2. 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.
  3. 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;
  4. 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;
  5. 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;
  6. 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;
  7. 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;
  8. 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;
  9. 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;
  10. 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 */
  11. 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...
  12. 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.
  13. This is beautiful. Now do it with selectable type. ;P

    Chandler Van De Water March 22, 2010
  14. 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>
  15. 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>
  16. 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
  17. Web Fonts on Client Projects After Lost World’s Fairs, we

    became comfortable using web fonts on client gigs.
  18. 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
  19. 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