Icons as fonts

Two of the biggest changes on the web recently are custom fonts (thanks to font-face) and responsive design.

One of the problems with responsive design are resizable images and by extension icons. When the interface adapts and changes size this can make displaying crisply rendered icons difficult.

Fortunately a few smart people have turned to font-face for the answer. By turning icons into fonts they become styleable with CSS, are infinitely scalable and are a smaller file size than imagery.

If you are interested in adopting this technique there are two options available to you.

You can download and use one of the royalty free font sets out there such as Modern Pictogram or IcoMoon.

pictos icon hosting

Alternatively you can use a hosted service like Pictos. This is similar to Fontdeck and so has an annual fee associated with it.

My preference is to use a royalty free icon set that I can host myself. This will perform better than relying on a third party service.

Either way, I suspect font-face is the future of icons.

Update: As @wez have pointed out on Twitter, this approach is not currently without its problems. In particular the current use of fonts for icons is not accessible. This is a fair comment although not insurmountable. I am sure this will improve over time and as I conclude “I suspect font-face is the future of icons.

  • Aaron Hodges

    But surely these are read by screen readers, spiders, etc?

    • http://www.shortboredsurfer.com Paul Seys

      My thoughts exactly, surely this has accessibility implications as you’ll end up with random characters dispersed throughout your site. 

  • http://twitter.com/ysub Tim Woodward

    I agree – having random characters strewn about your content isn’t ideal for screen readers, and unlike images can’t be used as background “images”. I wonder if using a text-indent: -10000px as default and correcting it with javascript would work – I don’t know the intricacies of JAWS or other screenreaders. 

  • http://twitter.com/petewarman Peter Warman

    I’m not convinced about 

  • http://twitter.com/heydonworks Heydon Pickering

    The latest development is to use specialised unicode characters to represent the glyphs.

    Incidentally, I offer two free / royalty free sets that you are welcome to extend (so long as you rename the resulting set!).

    These are available on font squirrel: http://www.fontsquirrel.com/foundry/Heydon-Pickering

  • bgrggfe

    Do you know who is the prolocutor star of Louis Vuitton Handbags Online  now? It is the Sofia Coppola, she is well-know with the director of movies. Of course she like the LV very much ,especial the Louis Vuitton Wallet,but she never buy something from the Louis Vuitton outlet store, because she always get freely and show the newest louis vuitton items .

Headscape

Boagworld