As described in our previous article on icon fonts, icon fonts are vector-based fonts that contain functional pictographs rather than letters. Web developers who use icon fonts benefit greatly from the freely scalable vectors. Unlike pixel fonts, vector fonts are defined in graphical primitives like lines, circles, polygons, and curves, independently of output devices. This enables an easy transformation without any data loss based on CSS; this way, the relevant icons don’t have to be loaded and adjusted separately in a graphics program. Instead, the formatting is done code-based by the web browser. For this purpose, the CSS file with icon fonts has to be included in the HTML header. Individual icons can subsequently be integrated using the HTML attribute ‘class’ on the webpage. Read on to find out how this works using the popular open source font, Font Awesome.
‘Font Awesome’ home page (Source: http://fontawesome.io)
Font Awesome boasts over 600 icons, making it one of the biggest collections of vector-based symbols. The pictographic fonts are available free of charge. To integrate the icon font into the webpage, you just need their installation kit. This is available to download from the Font Awesome website. Here are the three steps for integrating your icon fonts:
The embed code of each icon is documented on the Font Awesome website.
As an alternative to the i-element, you can also embed an icon via a semantically empty span-tag.
Detailed view of the fa-home icon (Source: http://fontawesome.io/icon/home/)
The evolution of responsive web design has had a huge effect on typography, and the appearance of a text now needs to be adjustable to any device. Responsive typography therefore needs flexible, adaptable fonts to ensure maximum readability. Learn more in our overview of font in responsive web design.
Use icon fonts for integrating vector-based pictograms into your website. In contrast to pixel images, vector graphics have the advantage that they can be scaled up or down without sacrificing quality. With the help of CSS (cascading style sheets) web designers can also integrate other code-based design features. There are many different open source projects available that boast large icon...
Responsive typography is a much-neglected aspect of responsive web design, but it’s actually surprisingly easy to create a responsive design for both headlines and main text. So what’s the secret? Find out in part three of our series, as we give you a run-down of the implementation of a responsive font and share tips on how to embed CSS commands into your web presence.
Since the introduction of web fonts, designers have enjoyed a massive increase in options for responsive typography. Their scalability means these fonts are displayed perfectly on every device, making these a perfect solution for responsive design. With thousands of free web fonts available from multiple online platforms, it’s now easier than ever before to find the perfect font for your website....
