Design & UX
Article

The Final Nail in the Icon Fonts Coffin?

By Alex Walker

Steve Jobs introducing the retina iphone

Using vector graphics as navigation icons has always made perfect sense.

But it seemed to be the arrival of the retina screen (2011-ish) that really lit a rocket under the idea.

Almost overnight icons that had looked fine on standard screens suddenly looked like they’d been brutally hacked from an old newspaper with rusty pocketknife. The minor niggles we might have had with scalable vectors suddenly seemed well worth tackling.

At the time – as the case is today – there were two ways to deliver vectors to browser and each had their pros and cons.

Web fonts vs. SVG

Although both technologies had been around for a long time, web fonts seemed to grab the early lead. Many of us were already comfortable working with fonts, and there’s no doubt that plug-n-play solutions like FontAwesome made getting started that much easier.

But things have been changing over the past year or so.

While people are beginning to appreciate the power and flexibility of SVG, some of the ‘gotchas’ attached to icon fonts have become more apparent. These include:

  • an arcane patchwork of font-face support (and bugs)
  • positioning limitations (CSS line-height, vertical-align etc)
  • font file re-authoring overheads
  • a lack of tonal/color options

We can now add a handful of new items to that list.

A couple of weeks ago Seren Davies (@Ninjanails) gave a talk at the London Web Standards group called ‘Death to Icon Fonts‘. Seren is dyslexic and detailed some of the issues that icon fonts introduce to her browsing experience.

 Seren Davies giving a talk at the London Web Standards Group

Why Are Icon Fonts and Dyslexia a Bad Mix?

Font choice has a huge bearing on readability for dyslexic users. Ironically, for all the disdain that Comic Sans has attracted over the years, it’s often cited as one of the most readable typefaces for dyslexic users.

This has meant that it’s very common practice for dyslexic readers to override the default font on a site with their own more readable font – perhaps something like OpenDyslexic.

Free OpenSource Dyslexia Font

And this is where we hit problems.

To speed things up, font icons are generally bundled into a single site-wide font that also contains the alphanumeric characters. The icons are placed in an undesignated ‘private’ section of the font.

When a user overrides this font, they replace the alphanumeric characters but there are no replacements for these custom icons. We get left with big, ugly, unhelpful empty boxes instead.

Github icons font fail

Github provides a perfect example of where this problem presents. It’s not a pretty situation, is it?

Seren also talks about the way that screen readers treat icon fonts. Using a unicode star icon to denote a ‘Favorite’ button might feel very clever and resourceful.

That is, until you realize that a screen reader blithely announces that button as the far more cryptic ‘Black star.. favorite!..’.

Unfortunately when you encode a graphic as a typographic character you are almost demanding that any screen reader tries to try to make sense of it.

Perhaps we’re getting to the point where we realize that embedding pictures into fonts was a temporarily convenient detour rather than a true way forward.

I think that’s where I’m at anyway.

There are plenty of interesting insights in Seren’s slides, though currently nowhere to see to her full talk online.

Hopefully we’ll get that opportunity in the coming months.

  • M S i N Lund

    Always nice to have your intuition confirmed by facts.
    =)

  • Tony Pirat Gustafsson

    Yes, I still use web fonts, because they are simple and easy to use… but they are not meant to be advanced graphics. SVG is probably the way to go… but many apps such as icomoon can create SVG sprites for you, but all their icons are still in black.

    • http://sitepoint.com Alex Walker

      I think it’s nice that colored, tonal and even animated icons are possible with SVG, but so far I’m yet to see any cases where those characteristics have been used well. Still, Material Design really showcased how much motion can help a UI – maybe there are similar cool usecases for colored or animated icons.

      Nevertheless I think there are other better reasons for choosing SVG over fonts.

    • http://www.tyssendesign.com.au John Faulds

      With Icomoon, you can change the colour of both SVG and PNG fallbacks from the settings before you download them.

  • Scripter

    The NoScript addon also blocks “icon fonts” – in Alex’s sig at the end of the article I have four “odd boxes”

  • http://architect4wp.com Chris Howard

    Was hoping this article would also point to how to do the alternative. It’s like “Don’t do this!” but without telling you how to do it the right way. Any pointers to those who are enamoured to icon fonts to relearn how to do it the alternate way?

    Why would I stop using icon fonts when you haven’t shown the advantages of the alternate? (The advantages aren’t automatically the disadvantages of the icon fonts.)

    Maybe someone can write a full article on the pros and cons of each.

    • http://sitepoint.com Alex Walker

      Fair call, @chrish341:disqus. I’ve been a proponent of icon fonts in the past, but the strikes against them have been gradually accumulating in my mind. This week Seren’s slides, and the discussion around them, have probably put me over the edge. I think it’s worth talking about as a topic, because sometimes that’s what brings out good counter points.

      But I take your point. I’ll be looking to commission an article covering the comparison.

    • http://www.tyssendesign.com.au John Faulds

      CSS Tricks has articles on how to do the alternative (this is the approach I now use):

      https://css-tricks.com/svg-sprites-use-better-icon-fonts/
      https://css-tricks.com/svg-use-external-source/

    • http://sitepoint.com Alex Walker

      @chrish341:disqus Massimo is putting together a piece on this right now.

  • http://www.sundco.com Mark Sund

    Our design agency totally agrees with you. But SVG support by IE and the Android Browser is inconsistent. Worse is our experience that although Chrome for Android supports SVG, many Android devices are underpowered, so rendering SVG files in general is slow. If you have different experience or insights on these issues, we’d love to hear them, because we’d love to see widespread adoption of SVG.

    http://www.sundco.com

    • http://sitepoint.com Alex Walker

      Mark, just out of interest, how much are you optimizing those SVGs that you’re saying perform poorly in android? I’ve found there is such a huge difference between the SVG you might get by default from Illustrator/vector apps, and what you actually need to get those shapes on screen.

      For instance, most vector applications seem to always write rectangular shapes out as paths rather than rectangles. And extra decimal point precision blows file sizes out without any real advantage. Even using the ‘simplify’ tool in Illustrator can make a huge difference.

      So far manual optimization works best, but takes time too.

      • http://www.sundco.com Mark Sund

        We didn’t work to optimize the SVGs from Illustrator, and we should probably revisit that. I’m just not sure icon fonts are in the coffin yet, let alone that the coffin’s being nailed shut. As a website agency, we’d certainly prefer that – SVG is great, especially with retina displays where line thicknesses less than 1 traditional pixel don’t look terrible.

        The more awareness the better, so thank you for writing about it.

        • http://sitepoint.com Alex Walker

          Although it has been improving as Adobe focus more on it, traditionally Illustrator’s SVG could be unfavourably compared to Microsoft Word generated HTML. Maybe 25% of the file might be drawing colors and shapes.

          That makes up a lot of your performance issues.

  • Gonçalo Espinha

    This seems like a relevant point when SVG becomes stable on all major browsers. Since it still displays a lot of compatibility and rendering issues, I see no real solution besides continuing to use PNG sprites.

    I understand your point, but without seeing the real numbers of how many dislexic users are using these kind of solutions/apps/”dislexic fonts” to browse on the web, these details become pointless.

    The web a platform where analytical data is starting to dictate what still makes sense. I don’t know any API that lets you collect this kind information from a website, do you? Until then, implementing a solution for this seems like one more problem and not a solution to those who have to maintain and manage the frontend.

  • pd

    I’m a webdev of sorts yet at home I use NoScript and a few other prophylactic addons that are, in my view, required these days to use the bloated web safely and sanely.

    I seriously don’t understand why, or just can’t be bothered debugging sites in my downtime, but most sites that rely on icon fonts don’t work for me. This seems strange because AFAIK icon fonts do not have to use JS and even after whitelisting JS, the fonts don’t display. Oh wait, I figured it out. Being more webDEV that webDESIGNER, and wanting to spend my spare time efficiently, I block web fonts globally :) Yep, who needs em? Not me. They’re a ball ache to use with all the compat niggles and hey, I’m no font face nerd. Sometimes I think they were only added to HTML to give graphic designers an excuse to change their job titles to WEB designers, with all the accompanying lack of expertise and form over function preferences they then bring! Garrh!

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.