Icon Fonts Follow up

27 Jan 2012

Since publishing a section from The Icon Handbook as part of 24 Ways last December (Displaying Icons with Fonts and Data- Attributes) I’ve been involved in a few discussions regarding its cons, some of which have since gained workarounds, and it felt a good time to do a follow up post.

First of all, its worth mentioning the context of the article – it’s from Chapter 6, where all the various possible methods for deploying icons on the web are laid out. This includes creating icons with CSS, which isn’t something I’d recommend, but just may be a solution for someone out there and work well in a particular context. In the same vein, using fonts to display icons is just one of the options.

Lets go over the 2 cons that keep coming up:

Unicode Mapping

Jon Tan states (rightly) that where matching unicode characters exist, the key should be mapped to that (such as the heart symbol for Favourites) and others that don’t to Private Use Areas where they have no associated meaning or content. This isn’t a problem with the technique as much as the current implementation of the fonts. Its solvable, although doing so will add an extra layer of complexity in specifying the correct letter. There’s also not going to be many icons that can be mapped of course.

Drew Wilson has improved this situation with his release of Pictos Server – a typekit style hosted service where you can choose only the icons you want in the font, as well as what letter its mapped to. It also helps another issue with the technique – that of icon choice. Adding a new icon to a font is complex work, but with 650 to choose from, its less likely to be an issue.

Another option here is IcoMoon which allows icons to be mapped to Private Use Areas in Unicode, thereby avoiding odd content altogether.

See also:

Screenreaders speak generated content

Using CSS to insert content has the side effect of the icon letter being read out by screenreaders. Not the worst accessibility issue, but confusing.

However Eric Eggert discovered that this can be avoided with the ARIA attribute: aria-hidden="true". This is required for every instance, but Eric also points out that this can be automated with a small snippet of javascript. Read Eric’s post A better way to use icon fonts. Not all screenreaders support ARIA, so it may be best avoiding the need altogether by using Private Use Areas mentioned above.

But…

For me, the biggest issue is pixel crispness. Unless you spend an awful lot of time hinting the font properly, you just won’t get the same crispness that you can achieve with a PNG.

Once everyone has high density screens this won’t be an issue, but in the meantime, I’m thinking more along the lines of SVG Sprites to implement my own icons and gain scalability.

Recent Posts

Using the iPad Pro as my main computer

07 Jan 2019

Hicks' top albums of 2018

22 Dec 2018

Hicks Studio Clearout!

17 Dec 2018

New Identity for iHasco

13 Nov 2018

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Instagram Hickstagram

  • 13 Jan 2019

  • 05 Jan 2019

    Just tried the Vegan Sausage Roll from Greggs. Really good - nicer than the meat one, and the thought of Piers Morgan frothing at the mouth makes it even tastier

  • 30 Dec 2018

    Blackbird studies #ipadpro #procreate

  • 27 Dec 2018

    My special egg plinth from @maanthh. You have to say the name in the style of Matt Berry in the IT Crowd ✊

  • 26 Dec 2018

    This is my Pencil. There are many like it, but this one is mine. #applepencil

  • 25 Dec 2018

    Christmas reading 🤗

  • 24 Dec 2018

    Hope you all have a very Happy Christmas folks! 🎄🎉🍸

  • 22 Dec 2018

    The moon tonight was full and large. Taken through a spotting scope with iPhone, hence a bit blurry

  • 21 Dec 2018

    It’s that time, here are my top 9 albums of 2019! 7 - Beach House Columbus (Original Motion Picture Soundtrack) - Hammock The Appearances - Ester Drang The Art of Pretending to Swim - Villagers Twenty Two in Blue - Sunflower Bean In Transit - The Amazing Vide Noir - Lord Huron Marauder - Interpol The Great Untold - Scott Matthews

  • 20 Dec 2018

    Another new music genre

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom