Pixliga ikoner på en iPad med retinaskärm är ingen vacker syn. När knivskarpa typsnitt möter pixliga ikoner, blir det otroligt fult. Att optimera alla ikoner tar tid och kräver ofta rätt mycket jobb. Istället kan man rendera ikonerna med hjälp av ett typsnitt och CSS.

Det finns en utmärkt genomgång av John Hicks från julkalendern 24 Ways. I artikeln Displaying Icons with Fonts and Data-Attributes går han igenom hur man implementerar ikoner som typsnitt på webben. Om du inte redan har läst hans tankar, rekommenderar jag varmt att du ägnar tio minuter åt detta.

CSS-Tricks publicerade även demowebben Icon Fonts are Awesome för ett tag sen. Dessutom kan det vara värt att läsa igenom HTML for Icon Font Usage när du ändå är inne och läser på CSS-Tricks.

Typsnitt som jag gillar:

• Modern Pictograms (Gratis)
• IcoMoon (25-35 dollar)
• Pictos (49 dollar)

Om du vill ha fler förslag, har Megan Fischer sammanställt ett inlägg med snygga ikoner, några av dessa finns tillgängliga som typsnitt.

Drew Wilson (ibland misstänker jag att han aldrig sover) har skapat den smarta tjänsten Pictos Server, som låter dig välja några ikoner, som sedan skapas som ett eget typsnitt. Allt för att minska laddningstiderna.

Fördelarna är rätt många, typsnitt är skalbara och det går snabbt att byta färg, eller skapa effekter med CSS. Dessutom blir det sådär knivskarpt som man drömmer om att det ska vara på en högupplöst skärm.

Stay Creative!