Achieving Resolution Independence

Through SVGs and Asset Fonts

Why Resolution Independence?

Photo by miguel77http://flic.kr/p/a7H5jd

@2×

@?×

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

Like Magic!

Photo by eva.pébarhttp://flic.kr/p/9hBrtv

Good for Grandma™

What is an SVG file?

logo.png logo.svg

Live Demo Time!

http://www.w3.org/TR/SVG/

What areAsset Fonts?

Why Asset Fonts?

✓assets.png assets.ttf

✓✓✓

✓ ✓ ✓

✓

×

How Do ICreate One?

joshe.me/asset-fonts

icomoon.io

How Do IUse It?

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

.icon:before { content: attr(data-icon); font-family: 'Cleardings'; speak: none;}

<a data-icon="&#xe012;" href="http://twitter.com/clearleft">@clearleft</a>

CSS

HTML

[data-icon]:before { content: attr(data-icon); font-family: 'Cleardings'; speak: none;}

<a data-icon="&#xe012;" href="http://twitter.com/clearleft">@clearleft</a>

CSS

HTML

What About LigatureAsset Fonts?

f fiif fll

symbolset.com

forecast.is

forecast.is

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

climaliga.woff

19kb

Go forth andcreate resolution

independence!

Thanks For Listening

@joshjegithub.com/joshje/forecast

Fork It!