Just over 2 years ago, I started work on what turned out to be my largest icon project to date, for the new version of Linotype’s FontExplorer app (or ‘FEX’ as it’s also known). It was great to be asked to work on an app that I use everyday, and as the project grew, over 280 new icons were created for it, and at several different sizes.
The first job was to look at the application icons for Pro and Server editions. Amongst the early sketches, I was very keen on an early idea that used a printers wooden draw of metal type:
However, the child’s block idea was chosen, as Linotype liked how it suggested using the app was ‘childs play’, so this idea was progressed into early vector roughs:
As you can see, the Linotype L logo was common theme to all ideas, some more subtle than others. At one point we considered a transparent version:
These were worked through until we arrived at the final icons. Both apps also have updaters that show them packaged in plastic and brown parcel tape:
One of the requirements of the brief was that the client needed original vector artwork, so for the first time, I used Illustrator to create all the icons, not just the larger application icons. There are pros and cons with this – Illustrator has handy features such as global colour and selecting elements by same stroke or fill, but when it comes to pixel perfect rendering it’s a pain. You end up using little workarounds (such as not making a stroke 1 pixel, but 0.8) in order to achieve crispness.
Finally, to be ready for Resolution Independence (and as no one has created vectors that can scaled down effectively as well as up), several versions were required. So for each of those 280 odd icons, the following sizes were required: 16, 32, 48, 128 px, with application icons requiring a further 256 and 512px version. As a lot of these interface icons are 16px at default, the 128px version didn’t need to be as detailed/photorealistic as an application icon would be at that size, but still look good at that size. Here are some examples:
It was not only a great project to work on, but also a great client to work with!
Sure, there’s trouble ahead with the announcement that Safari will be joining Opera in supporting @font-face, the chance at last for wider typeface choice! Place a font file on your server, and link to it in order to embed the typeface. We’ve been able to do it in PDFs and Flash movies since time began, but so far only one attempt has been made to make them work in HTML.
First problem, yes this will mean some people will specify unreadable/unsuitable type for body copy, but what’s new? It simply means that there will be a wider variety of unreadable fonts to choose from.
Secondly, and this is the real sticking point, font licensing. As John Gruber points out:
The conundrum is that most of the fonts worth using can’t legally be shared as free downloads, and most of the fonts that are legally shareable aren’t worth using.
Even if you purchase a font legally, the file is available to all to take. Now then, I have an idea to get around this – just like Google Maps, you purchase a ‘key’, a unique code, that works with that domain name only, with the font file (possibly) being served by the foundry. The actual filename of the font is hidden, and anyone trying to use that on a different URL, simply won’t get any dice. Whatever the solution – the font foundry that leaps onto this has the chance to lead.
Personally, I’m just happy that we’re reaching a point where we’re having this conversation! I want to be able to specify a face, and enable everyone to see it, without resorting to the image replacement and SiFR workarounds.
Archives by tag:
icon and interface design,
logo and branding design,
website and logo design,