Interface design is rapidly shifting towards a resolution-independent model. As mobile devices, and screens of all sizes continue to increase pixel density we can no longer rely on 72 pixels per inch (ppi) as an interface design standard for the web. Retina displays pack up to 326 ppi, which render legacy web graphics fuzzy and pixelated. It's not a good idea to simply "up-res" raster graphics because higher resolution raster graphics generate too much overhead causing slower load times, even for users with high speed internet. Luckily, different vector-based solutions are making it easier to implement resolution-agnostic interfaces.

Unicode symbols were among the frist web graphics to be vectorized, which evolved into dingbat fonts, which paved the way for the now mainstream icon fonts. Icon fonts are great for certain interface graphics, but doesn't promise to be a perfect solution for every graphical need. You still have to deal with font-smoothing and anti-aliasing issues for different browsers, causing icons to render slightly different depending on which browser is rendering the font face. SVG offers a more robust solution over icon fonts for a number of reasons, but icon fonts are still a good alternative for most interface icons and pictograms.

It's no doubt that resolution independence has become a key factor in creating responsive web designs. Tools and technical standards will always evolve, but great design is timeless. It’s a delicate challenge to gracefully adapt to emerging technologies while also remaining focused on using design to communicating effectively.

Here are a few of my favorite fonts and vector resources for resolution responsive icons:

Modern Pictograms

Pictos

Entypo

IcoMoon

Fontomas

Font Awesome

Iconic

The Noun Project

Copy Paste Character