While mobile devices like smart phones and tablets have made life a lot more convenient for everyday consumers, they’ve increased the workloads of web designers by a substantial amount. Responsive web designs must be capable of supporting a wide variety of screen sizes and aspect ratios, which necessitates the use of scalable elements and graphics. Online design shop Zurb has recently released an icon font set that aims to make life a bit easier for amateur and professional web designers in the real world.
Considering the simplicity of the idea, it’s amazing that nobody came up with it sooner. Zurb’s Foundation Icons are a group of vector graphics images embedded within a font set, which makes it incredibly easy to use interactive icons on a web page without having to deal with <code><b>img</b></code> tags, dimensions and other hassles. Whether you’re viewing Zurb’s font-icons on an iPhone, a tablet or your wide-screen laptop, they appear crisp and well-defined without any blur or distortion. Even better, Zurb fonts are easy to install and use.
In order to use Zurb’s font sets, one would simply use the <code><b>@font-face</b></code> trick to import them from within the <code><b>head</b></code> section of any web page. Obviously, you’ll want to download the zip file of the font set beforehand. Once you’ve set up your <code><b>@font-face</b></code> markup, you can easily embed icons in a page by putting the appropriate letter that corresponds to your desired image in a <code><b>span</b></code> and styling the element as needed so that it will scale properly for any screen size.
Zurb’s font-based icon sets are nifty little web design tools that should prove helpful for designers trying to stay abreast of the constant changes in their field. Though a full-sized PC or laptop display is still advised if you want the best visual experience, the truth is that more and more web traffic is moving to mobile devices. Zurb font icons prove that you don’t have to sacrifice quality in order to deliver a satisfying web surfing experience to smart phone and tablet users.