CSS

Creating Custom Icon Fonts

Wednesday, July 31st, 2013

Benefits of Icon Fonts

I’ve always been obsessed with icons and hieroglyphs, so as a web developer, I got all excited with the sudden popularity of icon fonts. Using icon fonts, as a replacement for images, has many benefits. The most important, in my opinion, is performance. Because icon fonts are vector and are contained in a single file, they perform better then, say, using a sprite as an image container. Although, both a sprite and a font file make a single HTTP request, the icon font file is usually a lot smaller.

Another important benefit of using icon fonts is optimization for high-resolution screens. The media query is a wonderful thing, but if it can be avoided for swapping images for high-resolution screens, it’s a quick win – one file for all screens and device types! Because icon fonts are vector, they will scale without loss of quality and again, when you compare file size and the single HTTP request, it’s a no-brainer.

With icon fonts, it’s also super easy to change color and size using CSS. As browser support for CSS3 becomes more advanced, you will be able to do all kinds of other cool stuff, like apply gradients, drop shadows and background textures.

Getting Started

There are a few icon font generators out there, but I’m using Icomoon because you can import your own vectors, import other icon font packs, only include the icons you need, use the Private Use Area feature, etc. The best part about Icomoon is that it’s 100% free and open!

The first thing you’ll want to do is go to http://icomoon.io/app/. When you first enter the app, you will see icons galore! If the icons that are needed are on the screen, you can simply click to highlight the icons you want. You must make sure that the Select tool is selected, but I’m pretty sure it is by default. There are two other tools available. The second tool is the Delete feature. When selected, it removes the icon from the icon library that displays on your screen. The third tool, is the Edit tool. When selected, simply click on an icon to edit. You will see a pop-up window (figure 1) with the icon you selected and a few features including Rotate, Flip, Scale and Move. You can also download that icon as an SVG. This is helpful if you want to take it into Illustrator and make changes to the icon that wouldn’t be able to made inside of Icomoon.

(more…)

Tags: CSS, design, fonts, HTML, icons
Posted in Code, Design, Development, Mobile | No Comments »

Considering Browser Reflow

Friday, April 5th, 2013

Back in February I attended the HTML5 Denver Users Group presentation – Making Your UI Scream (Not Your Users) by Wesley Hales. From the title of the presentation you can probably guess that his talk was about website performance. Most of what he had to say about performance, I’ve heard before, but one of the things that Wesley brought up was reflow. I’ve built plenty of websites and performance is always at the top of my list, but I never looked too much into reflow. This was my biggest takeaway from Wesley. Now that performance for mobile websites is a huge consideration, I’ve been interested in other micro-optimizations. Maybe another reason that I haven’t taken reflow into consideration before is because I follow one of Wesley’s rules: Don’t let micro-optimizations weigh you down. Finish the project first.

More On Reflow

Reflow is the process in which the browser calculates the positions and geometries of all the elements in the DOM tree for visual presentation. Reflow is a user-blocking browser operation that can effect the UX, and in this day-and-age of immediate gratification, performance is a very important UX consideration. One of the most powerful things about jQuery is it’s ability to easily manipulate the DOM with methods like .show(), .hide() and .attr(), but in order to minimize reflow you should avoid touching the DOM as much as possible.