The document discusses asset fonts, which are resolution-independent fonts used for web design. It provides instructions on how to create and use these fonts with code examples for CSS and HTML. Additionally, it mentions the use of ligature asset fonts and offers links to resources for further exploration.

1. Asset Fonts
(in 10 minutes)

2. What are
Asset Fonts?

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

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

5. Why Resolution
Independence?

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

7. @2×
@?×

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

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

10. Good for Grandma™

12. Why Asset Fonts?

13. assets.png
✓
assets.ttf

14. ✓
✓ ✓
✓
✓ ✓

15. ✓

16. ×

17. How Do I
Create One?

19. joshe.me/asset-fonts

20. icomoon.io

21. How Do I
Use It?

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

24. C SS
.icon:before {
content: attr(data-icon);
font-family: 'Cleardings';
speak: none;
}
HTML
<a data-icon="&#xe012;" href="http://
twitter.com/clearleft">@clearleft</a>

25. C SS
[data-icon]:before {
content: attr(data-icon);
font-family: 'Cleardings';
speak: none;
}
HTML
<a data-icon="&#xe012;" href="http://
twitter.com/clearleft">@clearleft</a>

27. What About
Ligature
Asset Fonts?

28. fi fi
fl fl

29. symbolset.com

31. forecast.is

32. forecast.is

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";

36. 19k
b
climaliga.woff

37. Go forth and
create resolution
independence!

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