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.

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