Icon fonts: web design based on vector icons

The use of data from mobile devices puts forward special requests for website programming and the design of digital user interfaces. It is important that applications for mobile devices are fast and intuitive as it is essential that the contents of a page load quickly. So the trend is a minimalist design, the so-called Flat Design. According to the saying “Less is more”, it is renounced to insert real images preferring to them stylized representations of the commands (icons). For example, a fountain pen indicates a program to write or a speaker the ability to hear a sound. 

The main feature of these two-dimensional icons is that they take up little space, since they are inserted into the source code of a page and into the user interface as a font. Flat Design can be considered a form of scheumorphism, that is a style of representation that reproduces objects by means of symbols in the most realistic way possible, in order to facilitate interaction with digital commands for users. A famous example of Flat Design is the user interface of Microsoft Windows 8 optimized for touchscreens.

Screenshot of the Windows 8.1 user interface with Modern UI

What is an icon font?

The cart in the online store or the envelope near the e-mail address are all icons that you find almost in every website. These help users to orient themselves, they explain the function of the elements and make them understandable without words. 

More and more often, to create icons, developers draw on icon fonts (instead of bitmap images or CSS sprites), that is, fonts that contain vector icons instead of letters. Unlike bitmap images, defined by the number of bits per pixel, vector icons are easily scalable without quality loss and are small. In addition, icon fonts can be created in CSS (Cascading Style Sheets) at will. Since scaling the images there is no loss of quality, the icons are clearly represented even on high-definition displays; unlike the bitmap images however they are monochromatic (CSS also allows the insertion of different shades of colors). Furthermore you must always insert a complete icon font, even if you want to use only one icon. On the Internet you will find many services that offer free font icons, which can be installed in just a few clicks.