The latest trend in web design is to use fonts to do render glyphs, in place of the img tag and the still-elusive SVG. I’m sort of on the fence about this, although I recognize there are definitely some good reasons to do this. Instead of blathering on about theory, let’s go to the chalkboard, shall we?
Positives:
- Less messing with Photoshop and/or sprite sheets
- Load images faster
- Advantages of infinite scaling
- Advantages of CSS (shadows, hover, etc.)
Negatives:
- Limited to the glyphs in the font
- Limited to font limitations (no color, no texture, etc.)
- Bad semantics
- Potential for bad 508
- Potential for bad SEO
- More verbose than img tag
- Potential to cause your site to suffer “Wingding Syndrome”
- Necessary to load an external font, including hundreds of icons you won’t be using
- @font-face, and the baggage that comes with it
Hmm. You know, I was actually meaning for this article to sing the praises of icon fonts, but I’ve suddenly changed my mind. Instead, we’re going to have a fair and balanced look at the above. So without further ado, let’s pit the two technologies against each other…
Logistics
The less dealing with Photoshop for icons, the better, right? Well don’t forget that you’ll also have to deal with font creation software instead (gross) unless you want to use stock images for your icons. That’s fine, except we went down this route in the ’90s with Wingdings 1-3. I still have nightmares to this day.
Also, don’t forget you will need to store and serve several copies of the font. The IE version, FF version, Chrome version, mobile version etc.
Winner: images
Browser and Loading Time
In theory, vectors will load faster than a sprite sheet, right? Here’s the thing. A font is a giant sprite sheet already… well, a vector sheet, but a sheet nonetheless. You might have a 20k PNG representing your icons, but you might have a 60k font representing tons of glyphs, 90% of which you will never use. But let’s say the font is smaller. So it’ll load faster, right? No. Custom fonts can take a few seconds to install, etc. before being applied to the website. In the meantime, you’ll have random letters sitting around you page while it waits for the browser to do its thing. Is it worth it?
Winner: images
FX Advantages
What has always sucked about CSS is the lack of support for image effects. You cannot add drop shadows and change colors (at least, not in the way you’d expect). With glyph fonts, now you can. So I’ll concede to fonts for this, but the question I want to leave you all with is… why do you need to be able to have hover effects and shadows on your glyphs?
Winner: fonts
Scaling
This is another brilliant argument for font glyphs. Img tags are bitmap only at this point, and adding retina resolution is a huge pain and there is no best way to do it.
Winner: fonts
Semantics
You need to add an icon to your page, which is more semantic: <img src=”email.png” alt=”Email:”> or <span aria-hidden=”true”>▨</span> ? Yeah. And what do you do about those with visual impairment?
Winner: images
SEO
How do you think Google feels when it has trouble reading your website? You know that friend of yours that uses Outlook and the smiley faces turn into letters in your email client? J
I know you can use “content:” in CSS, but that’s not going to save you from Google, and “content:” is something you should always strive to avoid using. And it may not be happening now, but eventually black-hat SEO companies could start using ROT-13 rotated fonts to hide stuff they don’t want Google to necessarily see. I don’t think they’re doing it now, but there’s that possibility they’ll spoil the fun.
Winner: images
This reminds me of when we were using Flash and Javascript to render custom fonts 6 years ago. It’s overkill. Wait for SVG, and in the meantime, just deal with bitmaps unless you have really good reason to use this method.
In closing…
Don’t. Just don’t. Unless you plan to build an obnoxious website with tons of glyphs all over it.
Which you shouldn’t.