{"id":68,"date":"2012-11-19T14:45:52","date_gmt":"2012-11-19T14:45:52","guid":{"rendered":"http:\/\/blogs.iriss.org.uk\/viewsource\/?p=68"},"modified":"2019-06-24T11:01:22","modified_gmt":"2019-06-24T10:01:22","slug":"resolution-independent-icons-with-custom-icon-fonts","status":"publish","type":"post","link":"https:\/\/blogs.iriss.org.uk\/viewsource\/2012\/11\/19\/resolution-independent-icons-with-custom-icon-fonts\/","title":{"rendered":"Resolution-independent icons with custom icon fonts"},"content":{"rendered":"

As a follow-on from my recent post on responsive web design (RWD)<\/a>, I thought it might be useful to take a look at another one of the challenges arising from the new generation of computing devices, and at one particular solution we\u2019ve arrived at for our own projects.<\/p>\n

The challenge of hi-DPI<\/h1>\n

Hi-DPI is a generic term used to describe the increased-resolution displays featured in many modern mobile devices and a in small number of very recent computers<\/a>. Some manufacturers have there own terms for such screens: most prominently Apple Inc.<\/a> use the trademarked name Retina<\/em> to describe their own hi-DPI displays.
\nThe term hi-DPI is a contraction of \u2018high dots per inch<\/a>\u2019 and refers to the density of pixels found in a one inch line on the given display. To be considered \u2018hi\u2019, the display would typically have a density greater than 160dpi \u2013 often much<\/em> greater.
\n\"Traditional<\/a>
\nThe popularity of these displays presents a significant challenge to web designers as, ever since the web first gained support for images, we\u2019ve optimised all of our graphics down to the standard resolution for traditional desktop PCs \u2013 a lowly 72dpi. Meaning that, although they look ok on old-school displays, these graphics look pretty nasty when viewed on modern devices.<\/p>\n

Why should I care?<\/h2>\n

At Iriss, we\u2019re of the belief that the products we build should represent the best possible quality that we\u2019re capable of producing. While it might be tempting to put off catering for hi-DPI displays until they\u2019ve become the norm rather than the exception, we prefer to ensure that our sites have the highest possible quality of fit and finish for all<\/em> our users. We also believe that clearer text and graphics aid usability, and further, that catering for hi-DPI displays now is the most future-friendly approach (after all, the number of these displays in circulation is only going in one direction, and it isn\u2019t down).<\/p>\n

Designing for hi-DPI<\/h1>\n

There are many different kinds of graphics on the web (photographs, background images, user-interface elements like buttons and icons, etc), and many different formats that these can be rendered in. Addressing the issues and possible solutions around every one of these is well beyond the scope of this article, so today we\u2019re going to look at just one type of graphic that features in nearly every modern web site, and at one particular solution we\u2019ve arrived at that provides pin-sharp images irrespective of resolution.<\/p>\n

\"multiple<\/a>
IcoMoon icons by Keyamoon<\/figcaption><\/figure>\n

Icons<\/h2>\n

Most modern websites utilise icons for a number of purposes, most commonly to help aid at-a-glance identification of buttons and interface elements. When redesigning the Iriss<\/a> website in early 2011 we made the decision to use icons to represent, amongst other things, the RSS and social media links in the footer area of the website. Initially, these were realised as traditional images, and coded into the page using text links in the HTML, with CSS trickery seeing those links replaced in visual browsers with our carefully wrought graphics.<\/p>\n

However, June 2010 had seen the release by Apple of the iPhone 4 \u2013 the first device with a Retina display. Testing the new Iriss site on the iPhone 4 was a sobering experience. The graphics, and the icons in particular, didn\u2019t respond at all well to being displayed at such revealing resolutions. There had to be a better way\u2026<\/p>\n

Raster vs vector<\/h2>\n

Computer graphics essentially come in two flavours \u2013 rasters<\/a><\/strong> (sometimes referred to as bitmaps<\/strong>) and vectors<\/a><\/strong>.<\/p>\n

Raster images are dot matrix structures that are mapped out in a pixel-by-pixel rectangular grid. They have a fixed resolution, and can\u2019t be enlarged beyond that without a serious drop in perceived quality (that \u201cenlarge and enhance\u201d stuff only works in the movies). On the web, raster images are usually found in jpeg<\/strong>, gif<\/strong> or png<\/strong> formats.<\/p>\n

Vectors on the other hand are stored as mathematical expressions, and are drawn geometrically every time they are rendered. For this reason, vector images are said to be \u2018resolution independent\u2019 \u2013 since they are drawn anew each time, they can be set to any size at all without loss of quality. The primary vector format for the web is SVG (Scalable Vector Graphics)<\/a>.<\/p>\n

\"Twitter<\/a>
Raster (left) and vector versions of the same icon at 10x zoom<\/figcaption><\/figure>\n

So SVGs are the perfect solution, right?<\/h2>\n

Sadly not. Although they\u2019ve been around since the end of the last century, uptake of the SVG format has been slow. Support remains patchy at best, with Internet Explorer versions 8 and under, and older versions of Google\u2019s Android operating system, having no support for SVG whatsoever.<\/p>\n

Ah, ok, so that rules out vectors then\u2026<\/h2>\n

That\u2019s what we thought too. Until, one day while marvelling how crisp text looked on a then newly-released Retina iPad, the penny finally dropped \u2013 fonts are vectors too! Typefaces are stored within font files as mathematical expressions, and are drawn at whatever size you need them, just like all other vector graphics. So why not turn our icons into a font?<\/p>\n

Icon fonts<\/h1>\n

The CSS2 specification, published as long ago as 1998, includes something called @font-face<\/em>. This (somewhat controversial<\/a>) technology allows web pages to display their text content using a font which, rather than being installed on the user\u2019s own machine as is the norm, instead lives on a web server. This means that we can safely design our own font, put it on our server, and tell the user\u2019s browser to use that font to render certain text and symbols on our pages.<\/p>\n

Better yet, browser support for @font-face<\/em> is generally superb \u2013 it even works in Internet Explorer 6 (and nothing<\/em><\/strong> works in IE6!)<\/p>\n

With our icons having been drawn in Adobe Illustrator (meaning the original source files were already vectors), all we had to do was package them up into the various web font formats<\/a> that the different web browsers use for @font-face<\/em> substitutions, then map the various icons to characters that our web site could reproduce. There are a bunch of tools available that will do this work for you, including:<\/p>\n