Why SEOs Should Dump CSS Sprites for Icon Fonts

Icons from IcoMoon Featured

Nick Bernard Jan 30 2014

The SEO community and the web development community can often be at odds. One thing they’ll both agree on, however, is the importance of performance.

The SEO’s favorite site speed tool is Google’s PageSpeed Insights, which I’ve written about before. We’ve all seen this among the suggestions:

css-sprites

CSS sprites. One tactic to improve site speed involves combining social media logos, navigational elements like arrows, and other small, repeated images or icons into single images or “sprites.” CSS then references only the relevant position and area of that sprite to display a specific image on the page. This can improve performance because the fewer images the browser has to request and the smaller the transfer size, the faster the page should load.

CSS sprite from Google

A Better Way

Now, I’m not a web developer, but it seems to me these are about as enjoyable to create, implement, and maintain as watching GEICO commercials on repeat. Whenever the color, size, style, or number of icons needs to change, the developer must update the sprite and re-compute the position values in the CSS by hand. Even if the hassle is automated with things like Grunt tasks, Compass, or tools like SpriteMe, there are a lot of moving parts.

More recently, the disadvantages of CSS sprites have been highlighted by the challenges of mobile-first, responsive web design: how can the same image render as well on very narrow screen widths as it does on super-wide desktop-size screen widths, as well as everything in between—including high-resolution retina displays?

The web development community has already solved this problem with icon fonts. Put simply, icon fonts are groups of vector graphics collected together as a custom font. Like SVG images, icon fonts scale well to any screen resolution and, since they behave just like normal fonts with CSS, styling them is much easier than updating a sprite.

There are dozens of icon fonts out there, such as Pictos, Symbolset, and IcoMoon, and CSS-Tricks offers a nice round-up. For non-developers, the easiest way I’ve found to start experimenting is Font Awesome. Since it’s hosted through the Bootstrap CDN, getting up and running with icon fonts is almost suspiciously simple.

Icons from Font Awesome

Icons from Font Awesome

Why Should SEOs Care?

This is just one example of the changing nature of how websites are or could be built and SEOs need to understand it if we want to keep our clients. Often, the SEO community seems to fancy itself as a lone crusader for the details of websites that developers willfully ignore or discount, when in reality the web development community is way ahead of us on championing clean, semantic code, accessibility, user experience, and, of course, performance.

This is also one reason why you can’t blindly follow a checklist—even if it’s from Google. Some items that come up on the PageSpeed Insights report might actually hurt performance or, at the very least, create some unnecessary headaches for the developer on the other end of the client call. The tool, for example, often advises me to ensure a page serves properly sized images, but that recommendation also removes the images’ ability to scale as the screen width changes with responsive design. SEOs have to understand what they’re recommending—especially if their guidance could unwittingly work against the site.

Thinking beyond just performance advantages, what’s more exciting to me is the opportunity icon fonts present for easily creating slick, interactive content without the aid of a designer. While I’m no CSS master, my coding skills far outshine my Illustrator chops, so icon fonts are an easy way to present something a little more substantial than a blog post for a client or department head. One obvious example is using StateFace and GeoBats to display some geopolitical data, but you’re far more creative than that.

The Web Isn’t Slowing Down

The “use your brain” caveat can be added to anything in our industry. Icon fonts have their limitations, particularly if you need a prohibitively complex or multi-colored icon. There are also potential accessibility issues, covered exhaustively by Filament Group’s technique for “Bulletproof Accessible Icon Fonts.” In general, fonts will render differently across browsers, so that’s also something to pay attention to and test for. Depending on your situation, CSS sprites might actually be the way to go.

Anyone who works on the web should have a goal to improve it. Font icons came into popularity due to advancements in font embedding, browser support, and high-end displays. They’re a small part of a typical website, but it’s important for SEOs and marketers in general to be knowledgeable their context and why they’re significant. No one needs to be told that the web is changing, but we need to understand the evolving technologies and problems of the web in order to provide the best guidance for our clients and, most importantly, the best experience for our users.

Have you seen positive site speed results after implementing icon fonts? Do you have a favorite icon set? Let us know in the comments.

tags : css spritesicon fontsSEO

related articles

1 Comments

  1. Great article and fully agree with this.

    Something interesting you noted in the first part:

    “The SEO community and the web development community can often be at odds.”

    Which I really think is a good point. Some of the best SEO’s I know have zero web development experience and spend most of the time doing their work inside of gmail.

Comments are closed.