Mobile data use sets the bar high for those pro­gram­ming websites or digital user in­ter­faces. For mobile apps in par­tic­u­lar, success hinges partly on quick and intuitive usability as well as short loading times for internet content. These re­quire­ments have caused web design to take on an in­creas­ingly sleek and min­im­al­ist style; what’s known as ‘flat design’. Following the motto ‘less is more’, this style avoids depicting user controls with images based on actual pro­to­types (e.g. a pen rep­res­ents a word pro­cessing program or a speaker rep­res­ents the control settings for the sound).

Many designers are instead opting for pic­to­grams. These two-di­men­sion­al icons only feature the basic char­ac­ter­ist­ics of the programs or items they represent. Another trait of pic­to­grams is that they are in­cor­por­ated into the source text and user in­ter­faces in the form of web fonts. With this bold move, flat design is es­sen­tially turning its back on skeuo­morph­ism—a design style whereby symbol objects are depicted as real­ist­ic­ally as possible in order to ease users’ in­ter­ac­tions with controls. A well-known example of such a loyal approach to flat design is the touch­screen-optimised user interface on Windows 8.

Image: Start screen of Windows 8.1 with Modern UI
Start screen of Windows 8.1 with Modern UI
Image: User Interface in Skeuomorphic Design, By Klaus Göttling (Own work)
https://commons.wikimedia.org/wiki/File%3ARedstair_GEAR­com­pressor.png

What’s an icon font?

The mag­ni­fy­ing glass next to the search box, the shopping cart on your favourite online store, or the envelope next to the e-mail address—icons are found on virtually every website. Without using any words, they offer users help while nav­ig­at­ing sites and make it clear which functions are carried out by which controls. In­creas­ingly fewer designers are making use of bitmap icons or CSS sprites. Instead, a growing number of web designers are grav­it­at­ing towards icon fonts. Icon fonts are a type of web font that contain vector-based pic­to­grams instead of letters. In contrast to de­pic­tions that are composed of pixels within a bitmap, vector icons can easily be scaled up without loss of res­ol­u­tion quality or changes in file size.

Icon fonts can also be developed through CSS (cascading style sheets) if desired. Due to their ability to be freely scaled without res­ol­u­tion loss, vector-based icons can be used for HD displays; although unlike bit map graphics, this is only possible in mono­chro­mat­ic form (CCS3 also supports different colour gradients). Ad­di­tion­ally, an entire icon font always needs to be added, even if only one pictogram is to be used. Some providers offer free icon fonts that can be found online, and font kits are also easy to set up.

Icon font providers

Web de­velopers don’t always have to pay to use vector-based pic­to­grams. An array of open source libraries, some boasting quite expansive se­lec­tions, can be found online. Here’s a list of some of the most popular providers of freely available symbol sets:

  • Entypo: unlike Font Awesome, Entypo doesn’t offer any icon fonts; instead, it’s made a set of vector-based pic­to­grams available in SVG format. This provides a found­a­tion for in­di­vidu­al fonts to be in­di­vidu­ally arranged with web font gen­er­at­ors. All Entypo pic­to­grams adhere to the Creative Commons At­tri­bu­tion License (CC BY-SA 4.0), which means they can be used com­mer­cially without having to pay a licensing fee.
     
  • Typicons: typicons are a type of icon font composed of more than 300 screen reader-friendly vector-based pic­to­grams. Available for in­stall­a­tion from its open source man­age­ment tool (that can also be installed into browsers), these icons are offered as vector templates and minified CSS. Typicons are also subject to the SIL open font license.
     
  • Open Iconic: icon fonts from Open Iconic offer more than 200 pic­to­grams in SVG as well as different web font and raster formats. This provider is par­tic­u­larly keen on em­phas­ising the reduced data size of its fonts: the open source Iconic font in WOFF (web open font format) only contains 12.4 KB and as a result is a much smaller font than Awesome. All of the pic­to­grams are re­gistered under the MIT license. The fonts are licensed under SIL OFL and can be used for pro­fes­sion­al projects without need for payment.  

Creating your own font kits

Most web de­velopers don’t need all the pic­to­grams included in a given font. A com­bin­a­tion of icons from different providers is generally the norm; this is where font kits can be of great help. Web font gen­er­at­ors like Fontello, fontastic.me, or the IcoMoon app, allow users to compile sets of various fonts from different sources. The main advantage of an in­di­vidu­al font kit is that the icons can only be added as web fonts that are actually shown on the site. This reduces the data size and in turn, the site’s loading time.

Adding icon fonts

Icon fonts are usually defined in the HMTL source code with the help of CSS classes. To carry out this step, the cor­res­pond­ing icon font needs to be in­cor­por­ated into the head area of the HTML document. Some providers have made a standard CSS file available for this purpose. Bootstrap, the CSS framework, also makes it possible to integrate such elements, provided that it’s also supported by the desired font.

Adjusting icons

Given that icon fonts can be loaded via a cus­tom­ised stylesheet and accessed with pre­defined CSS classes, there are many pos­sib­il­it­ies for drafting designs. In contrast to pixel-based graphic files, vector-based pic­to­grams, which are in­teg­rated using icon fonts, can be easily adjusted in the CSS code. This enables web de­velopers to adjust the size, colour, or opacity of a website ac­cord­ingly. This also gives designers the flex­ib­il­ity of adding texture and shadow effects.

Go to Main Menu