January 8, 2014

1038 Views

Use of Icon Fonts in Responsive Design

Responsive design is an emerging design technique among UI developers these days. We have a few techniques for responsive designs, such as grid system, adaptive images, and responsive navigation. I am writing this blog to explain the usage of icon fonts in responsive design.

As a UI designer, I always wanted to use icons to enhance my design and to make my text (links and heading) pictorially informative. But as a UI developer, I wanted to ensure that the icons I use render clearly in all viewports, and do not affect the website’s performance. We can use CSS sprites – grouping icons and loading them. However, it lags in flexibility and scalability.

Let me ask you a question. What if we use icons without using any image file? I can hear your mind asking you whether this kind of a scenario is possible or not. My answer is in the affirmative; this is actually possible using icon fonts.

Icon fonts are fonts, which have commonly used icons put together. Let us discuss icon fonts in more detail.

Image-based icons, when zoomed in or in high resolution retina display


​Icon fonts in the same scenario

Advantages of Icon Fonts Over Image Icons in Responsive Design

The following are the advantages of using image icons as compared to responsive design:

  • Neat and clean output with scalability: As a font is vector-based, an icon font would render neat and clean in all screens (including retina screens), and can also be scalable without losing quality
  • Fast and efficient:Icon fonts can be downloaded at one stretch with less HTTP request
  • Effects: You can apply stunning CSS3 effects, such as color, shadow, stroke, gradient, texture, and transform without losing precision.

Use Icon Fonts in Design
You can use icon fonts using the @font-face rule in either of two ways:

  • Using CSS class
  • Using HTML data attribute

Download the icon font which best suits your design. Before you download a font, make sure you have the font license to use it, and you read the end user license agreement carefully (EULA).There are a  number of sites (both paid and free) for downloading icon fonts - Icomoon (my favorite), fontsquirrel, Fico, weloveiconfonts, and fontawesome. Map the icon font to the design using @font-face.

Implementing Icon Fonts with @font-face
CSS:

  @font-face {
  font-family: 'MyIconFont';/*MyFontIcon  is name of icon font*/
  src:url('fonts/MyIconFont.eot'); 
  src:url('fonts/MyIconFont.eot?#iefix')  format('embedded-opentype'),
  url('fonts/MyIconFont.ttf')  format('truetype'),
  url('fonts/MyIconFont.woff')  format('woff'),
  url('fonts/MyIconFont.svg#MyIconFont')  format('svg');/*use SVG format last as it is bigger than other format*/
  font-weight:  normal;
  font-style:  normal;
}
Using CSS class

HTML

h/*assuming h is the letter for home icon in the font*/

CSS

[class="icon"] {
	font-family: 'MyIconFont';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
}

Output

Using the HTML data attribute

HTML

home

CSS

[data-icon]:before {/* The :before selector inserts content before the content of the selected element(s).*/
content: attr(data-icon);
font-family: 'MyIconFont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}

Output

We can customize our icon fonts using CSS as per our requirements.

Best Practices for Using Icon Fonts for Responsive Design

The following are some best practices using icon fonts for responsive design:

All modern browsers use 16px as the default font size, which is 100% and 1 em. Let us look at an example.  We have a 16px applied to the body and 48px to the icon font. Now you have to apply the rule > target ÷ context = result
target - font size in pixels – icon font (48)
context - font size of the container - body (16)

Font-size: 3em; /* 48 ÷ 16 = 3 font-size has to be set in relative unit - em*/

If we want to alter the font size of an icon font for different viewports, we can alter it using a media query as shown below:

CSS

/* Smartphones ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
	font-size:10px;
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
body {
	font-size:14px;
}
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
body {
	font-size:16px;
}
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
body {
	font-size:24px;
}
}

Since the icon font size is relative to the body font size, it changes as per the different viewports.

An example of the code above can be used in smartphones, iPads, desktop/laptops and large screens.

  • For better icon font rendering:
    • Always define the font weight for the icon font class. Otherwise, it would take the default font weight property (700).
    • Use the property below in the CSS class:

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

  • In the example above, screen readers would read “h home”. To avoid this, use aria-hidden = “true” in HTML or speak: none in the class, or use visualyHidden class from h5bp.
  • Use a separate class for text next to icons. In our example, if we do not use a separate class for the text “home,” the letter “h” in home would render as a home symbol, as shown below:

  • Optimize fonts using online font applications, e.g. icomoonwe can import our own vector images/fonts in SVG format and select particular icons and export them to a separate font
Final Thoughts

Icon fonts are the perfect choice for icons in responsive design, as they scale perfectly without losing clarity in all screen sizes.

If we look at the futuristic point of view, it would be great if there were a framework for icon fonts which had all the built-in properties (styles and  best practices) so we could use something like the directly.Visit HCL's web engineering section to know more about the services.

References:
http://www.hongkiat.com/blog/webfont-icons/
http://icomoon.io/
http://alistapart.com/article/fluidgrids#snippet2