With the advent of high-density displays (including Apple’s Retina), there has been a scramble in the web design community. Since the creation of the World Wide Web, small and low quality (compared to print) images were the standard way of dealing with slow connection speeds as computer monitors were not advanced enough to display the full size versions.
Now, web designer are being pulled in two different directions trying to balance screens that require high quality images with the increase in mobile devices whose loading speeds and data limits still make large images undesirable.
Ligature Symbols
When I decided to include a few icons in this design, I went looking through my bookmarks for possible solutions: icons at multiple sizes, SVG, pure CSS and endless icon fonts. I was drawn to an icon font as a solution because it solved the problem of multiple display resolutions while only adding one small font file to the download. Because font characters are drawn on the device, they have no resolution and look good on any screen. Because they are characters, they can be styled using the same CSS font rules, allowing me to resize as needed for different screen sizes and making them more appropriate for my plan to change the colors frequently.
Most desktop and mobile browsers now support webfonts and since I planned to use them in addition to text labels I didn’t have to worry about usability issues in older browsers.
I chose Ligature Symbols because it had all the symbols I was looking for initially and came with example code for CSS :before and :after selectors. This means no extraneous markup in the HTML file, it’s all done in CSS. Any browsers that don’t support :before and :after selectors or icon fonts simply don’t display anything.
Using CSS made it very easy to implement and as I added more symbols to the design, it only took a few lines of CSS without impacting the download time. The icons themselves add visual interest and make the site easier to navigate.