On the Grid

October 28, 2015

Drawing icons is a big part of most digital design projects today. With the variety of screen sizes, resolutions, and devices these will eventually end up on, most of us tend to use vector shapes that can be exported in a number of sizes and formats depending on the application.

If the icons are a set, rather than a stand-alone app-icon for example, we also tend to use grids to guide our design and make the entire set look and feel consistent. Even if what we create is vector based and scalable, these grids are often based on pixels since it’s preferable to know exactly how the lines will render in different sizes.

Common practice when drawing icons on pixel grids seem to be to match the stroke width to full pixels to avoid unnecessary anti-aliasing and ensure lines are as sharp as possible. While this may sound good in practice it has a downside that we often find neglected. While straight lines does indeed look sharper, all curved or diagonal lines will still be anti-aliased and therefore create an inconsistent look of lines within the icon.

This will result in two things. Diagonal and curved lines will, because of the anti aliasing, look both thicker and lighter that the straight ones. Since not using anti-alias at all isn’t really an option, what we prefer to do is to use stroke widths of half pixels, to make sure all lines are anti-aliased and therefore rendered equal in terms of thickness and brightness.

Obviously all this won’t matter as much in a few years, when all screens have passed the retina border. But for the time being most people still use low resolutions screen on their desktops and laptops, which makes this relevant for some time still. As always feel free to discuss with us on twitter!

Jonas Salvador, Art Director & Partner