An excerpt from http://www.sitepoint.com/final-nail-icon-fonts-coffin/, by @alexmwalker
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.