Dutch Icon

we make icons

articles

Let's talk about all things icon


Let’s not write off pixel perfect just yet


Posted by Hemmo de Jonge


Resolutions are getting higher and vectors are everywhere. HTML5 provides scalable vector graphics, retina display with IPS technology; 2880x1800 resolution at 220 pixels per inch with support for millions of colors. All this is available for iPhones, iPads and soon in all iMacs and Mac Book Pros. With all this exciting and promising new technology, we still see poor quality or poorly used icons all too often. It might feel like pixel perfect design is over but it's not quite over yet!

 

Clients often ask "why would I need pixel size variations for vector icons?". Of course, you can resize vector icons to any desired size but if you make them smaller than 64 pixels, the result will most likely be disappointing. That is if razor sharp quality is important to you! In Illustrator and Photoshop, you can snap to pixel-grid, but at the expense of the proportions. The icon's quality and detail will simply not hold up at any given size. Instead of looking sharp it will end up looking blurry. Only bigger pixel sizes like 64 pixels and more will usually be fine on retina displays.

We recently introduced a new chunky icon style specially developed to be pixel-perfect and at the same time vector-perfect. She loves tiny integration, looks sharp at any given size and looks gorgeous on any display - that is why we named her pretty Pika. In contrast to our beloved monochromatic Raw style, which was designed to feel friendly, human-like and sharp over 32 pixels - perfect for the retina. We took the liberty of designing this series intuitively, without any technical restrictions.

 

Why not make it a font? They leave a small footprint and are easily scaled so it might seem like a good idea. For those of us who value quality and like web fonts the (huge) downside is that the icons will look different in every browser and platform, hence there is no quality guarantee. Resize a 32 pixel-optimized-icon to 12 pixels and view it in Chrome on a PC instead of in Safari on a Mac; you will see a world of difference.

 

It's a challenge every single time to convert a perfectly styled icon into another size variation and maintain that sharp end result you established in your base icon. Truthfully, we can't wait for every display resolution to rise and forget all about pixels. Invest all that time usually spent on pixel precision and pump it into the creative process of developing new ones, styles and features.

 

For now, we at Dutch Icon stress the importance of designing icons separately per additional size under 64 pixels. This is a best practice for any icon designer. Remember pixels and respect proportions - for quality's sake.

 

Are you a developer working on some amazing developments in this area? We would love to hear about it and possibly work together. Feel free to contact us or just to say "Hi".

 

Hi there!

We created this space for the more curious to share and discuss thoughts, experience, developments, knowledge, information - all kinds of stuff.

 

To keep you informed and for us to keep asking questions.

 

Make your voice heard. Also you'll want to keep an eye out for free gifts passing by. 

 

All articles Blue Weather app SS Pika About Dutch Icon Free icons Pink and the brain Wolfsheep icon Illustration Work process Pixel perfect
Freshly baked cookies from Dutch Icon Cookies, freshly baked — homemade Some anonymous statistics, a pinch of social tracking and 100% safe web surfing. Read more about our wholesome cookie recipe here. accept cookie madness no cookies for me