$30 off During Our Annual Pro Sale. View Details »

Asset Fonts

Josh Emerson
March 02, 2013

Asset Fonts

Asset fonts let you achieve resolution independence for icons on your site. They are web fonts which contain icons, similar to webdings and can be made specifically for your site.

This presentation was given at Responsive Day Out 2013.

Josh Emerson

March 02, 2013
Tweet

More Decks by Josh Emerson

Other Decks in Design

Transcript

  1. Asset Fonts
    (in 10 minutes)

    View Slide

  2. What are
    Asset Fonts?

    View Slide

  3. 
    
    
    
    

    View Slide

  4. 
    
    
    

    View Slide

  5. Why Resolution
    Independence?

    View Slide

  6. Photo by miguel77
    http://flic.kr/p/a7H5jd

    View Slide

  7. @2×
    @?×

    View Slide

  8. @4×
    @1× @2×
    @0.5×
    @0.25×
    @8×
    `
    `
    `
    `
    `
    `

    View Slide

  9. Like Magic!
    Photo by eva.pébar
    http://flic.kr/p/9hBrtv

    View Slide

  10. Good for Grandma™

    View Slide

  11. View Slide

  12. Why Asset Fonts?

    View Slide


  13. assets.png assets.ttf

    View Slide




  14. ✓ ✓

    View Slide


  15. View Slide

  16. ×

    View Slide

  17. How Do I
    Create One?

    View Slide

  18. View Slide

  19. joshe.me/asset-fonts

    View Slide

  20. icomoon.io

    View Slide

  21. How Do I
    Use It?

    View Slide

  22. View Slide

  23. .icon:before {
    content: '\xe012';
    font-family: 'Cleardings';
    speak: none;
    }

    View Slide

  24. .icon:before {
    content: attr(data-icon);
    font-family: 'Cleardings';
    speak: none;
    }
    @clearleft
    CSS
    HTML

    View Slide

  25. [data-icon]:before {
    content: attr(data-icon);
    font-family: 'Cleardings';
    speak: none;
    }
    @clearleft
    CSS
    HTML

    View Slide

  26. View Slide

  27. What About
    Ligature
    Asset Fonts?

    View Slide

  28. f fi
    i
    f fl
    l

    View Slide

  29. symbolset.com

    View Slide

  30. View Slide

  31. forecast.is

    View Slide

  32. forecast.is

    View Slide

  33. View Slide

  34. -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    View Slide

  35. View Slide

  36. climaliga.woff
    19kb

    View Slide

  37. Go forth and
    create resolution
    independence!

    View Slide

  38. Thanks For
    Listening
    @joshje
    github.com/joshje/forecast
    Fork It!

    View Slide