Designing for Changing Technology: Font Icons vs SVG

The web is changing more rapidly than it ever has before. For designers this poses new challenges. The proliferation of high resolution screens - such as Apple’s Retina - is forcing designers to take a step back and evaluate how they make images for the web to avoid the blur that plagues raster images on HiDPI screens.

There are a few types of vector images that can help future-proof your site while catering to early adopters of new screen technologies.

Font Icons vs Scalable Vector Graphics

Font Icons

Font icons are exactly what they sound like: a font file, or set of font files, comprised of various icons mapped to unicode characters.

Why you should use font icons

  • First, font files are relatively small compared to PNG files or complicated XML files. You can also obtain all of your icons with a single HTTP request. Both of these make pages load faster, which is good for SEO and for user happiness (no one wants to wait for a page to load).
  • You can style it the same way you would style any other text - changing colors, borders, drop shadows, and size with simple CSS rather than creating multiple images or a complex image sprite.

There are a wide variety of icon fonts to choose from and tools you can use to build your own.

The drawbacks of font icons

Font icons are not all daisies and sunshine, however; there are some very real drawbacks to relying on them for your icons.

  • The most restrictive aspect is that they are always just one color. If you need a more complexly colored or shaded icon, you need to use an SVG or a PNG.
  • When using icon fonts, you also run into some of the same rendering issues that plague website text on different browsers. Fine details can get lost in some browsers when the icons are rendered at small sizes. Bolder, simpler icons have less variability in their appearance across platforms.
  • Using icon fonts can cause accessibility issues. By using an icon in text, you are not able to add attributes, such as alt text, like you would do to an image. This lack of fallback causes problems when using the browser Opera Mini, which does not support icon fonts. Researching analytics and target markets will help you decide if this is a concern you need to address on your site or not.

Font Icons in Action

Orbit Media

At Orbit Media, we used an icon font to render all the icons on the site - from the basic social media links in the footer to the icons that appear in the featured sections.

Orbit Media

Timepiece

Timepiece from inostudio.de is a clever use of an icon font to show an analog clock face.

Timepiece

CSS Tricks

CSS Tricks has a demo page where you can try out styling an icon font.

CSS Tricks: IconFont

Scalable Vector Graphics (SVG)

Scalable vector graphics have been around for awhile and offer another form of vector images for the web. SVG files solve a lot of the problems with both the mobile web and high resolution displays.

Why use SVGs

  • SVG images are actually an XML file that is served to a browser, rather than a font or pixel-image. It is up to the browser to render the XML, keeping the images crisp at any size. The XML in the file also offers many opportunities to animate and customize the image using code rather than needing a graphics editor.
  • SVG images also have one main benefit over font icons: the ability to have multi-colored images. For small icons, a solid color is usually a perfectly fine design choice, but larger and more complex images usually benefit from more than one color.

The drawbacks of SVGs

  • First, because the images are not compiled together like they might be in a sprite or icon font, you will have additional HTTP requests.
  • SVG files are also larger in size than icon fonts are, which is something you should consider with every page you design as page load time becomes a more and more important factor for things such as SEO (not to mention the impatience of site visitors).
  • SVG graphics generated from common image editing software can also contain a lot of extra code that bloats the file. It takes a wee bit of savvy to know what code is junk and what is essential, but to keep your files as small as possible, you need to clean out unnecessary code.

SVGs in Action

Playground

Playground has taken SVGs and animated them in a clever and beautiful way

Playground

Font Bureau

Font Bureau’s specimen page for Neue Haas Grotesque uses SVGs to render crisp font samples.

Font Bureau

Vox Media

Vox Media did this incredible animation using SVG, and shared their process.

Vox Media

Conclusion

At the moment, the issues of high pixel density screens and blurry images affect a minority of web users, but it is important to build sites that are going to hold up to a rapidly evolving technological landscape while still being relevant to users today.

By carefully considering your graphic needs and the technological makeup of your target audience, you can make an informed decision about which vector image solution (or combination of solutions) is best for your audience.

Have you adopted Font Icons or SVG in your design? Which do you prefer and why? What do you think is the future for new screen technologies?

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.