DingBit

I’m pleased to announce a new product shipping today over at the IconShoppe. Chameleon16 is a new pixel font for Mac and Windows, hand-crafted using only the finest pixels available. It’s based on the Chameleon Original icons that we’ve been hocking over here to support our growing latte addiction.
Initially, I’d thought to just convert the GIF images to a bitmap font so that the customer could change the color and add effects at will. The minimalist nature of the icons begs of it, and having the 16×16 icons in font format would sure be handy. But while I was at it, why not create new _alphanumeric_ characters to go along with it, and create a real font in the same style?
As the name suggests, Chameleon16 is designed to be used at 16px. And like its pixel font predecessors, it also works at multiples of that base (32px, 48px, 64px, etc.) for retro, extra blocky goodness.
Since each character is a 16×16 tile, it admittedly has limited use for setting large chunks of text. You’re not going to use this font to display client invoices or proposals. But interesting things can happen when you start playing with kerning and line height, and I’m excited to see some interesting applications where it could be used creatively.
The TrueType font includes standard alphanumeric characters as well as the entire Chameleon Original icon set as alternate characters and costs just $39 bucks. As a special promotion, the first three orders also get a free copy of Bulletproof Web Design, Second Edition that hit store shelves last month First three orders received!.
h4. Special technical geek notes
The process of creating the font was a learning experience, and I would compare it (at times) to removing stubborn wallpaper. I first created the characters in Photoshop, then used a program called BitFonter to turn those into a bitmap font, assigning each character, adjusting metrics, etc.
Over the course of the last six months or so I began chipping away it, navigating the spotty documentation, and teaching myself the wonders of font metrics, character encoding and more. In the end, I needed to create additional outlines of the bitmap characters and export these into TypeTool which could then generate a proper TrueType file (after having problems letting BitFonter do this). If I knew what I was doing this wouldn’t have taken long.
I avoided using something like Fontographer (also by FontLab) because I was creating a bitmap font and BitFonter’s pixel editor seemed a natural choice — and for creating and editing _pixel_ fonts, it’s great (or at least slightly more intuitive). It’s the output and documentation that was confusing, and my respect for _real_ type designers has grown tenfold after this little project.
So, my advice for those looking to create their own pixel fonts: learn Fontographer, or remember that you’ll need TypeTool in order to generate a TrueType file from BitFonter’s outlines.