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

Ampersand Conference NYC / Get Your Hands Dirty

Trent Walton
November 02, 2013

Ampersand Conference NYC / Get Your Hands Dirty

How far can we push type on the web? As webfont choices have expanded over the years, so have our options for what we can do with them. We’ll explore what’s possible with CSS, Javascript, and a little bit of elbow grease.

Trent Walton

November 02, 2013
Tweet

More Decks by Trent Walton

Other Decks in Design

Transcript

  1. 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.
  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. font-family:georgia, serif;
  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-size:60px;
  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. text-transform:uppercase;
  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. letter-spacing:2px;
  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. color:#ee4938;
  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. font-style:italic;
  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. text-align:center;
  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. line-height:1.4; /* wraps up */
  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. Before...
  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. After.
  12. NEWER STUFF Text Shadow(s) HSLA / RGBA Color Transforms Pseudo

    Class Selectors *Text Stroke *Image Mask *Background Clip
  13. FAKE TEXT STROKE .something{ text-shadow: 1px 1px 0 #b03136, -1px

    -1px 0 #b03136, -1px 1px 0 #b03136, 1px -1px 0 #b03136; }
  14. I recommend using a data-attribute on the h1 to keep

    duplicate content out of the way of screen readers and to keep search engines happy. —Brandon Durham
  15. <span 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>
  16. <li id="left_teaser" class="left"> <span class="word1">Discover</span> <span class="word2">&amp;</span> <span class="word3">learn</span> <span

    class="word4">new</span> <span class="word5">cultures</span> <span class="word6">and</span> <span class="word7">vistas</span> </li>
  17. inking 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