Tiny Typefaces - Five Fine, Free Fonts
Although it's always preferable to make all of your text selectable and accessible, there are times when you will need to embed text into your web graphics -- I'm referring in particular to the small label text often required on diagrams and info graphics.
It's with this type of text that many of the rules of typography change, and our favorite fonts don't work so well anymore.
This is largely because of anti-aliasing, which nearly always improves the legibility of screen fonts at normal and larger sizes. However, once the spaces in and around each letter become less than two pixels, anti-aliasing actually decreases legibility significantly.
Simply turning off anti-aliasing, however, isn't enough. As you can see, fonts like Verdana that are perfectly effective at 10px start to fail badly at 8px. Good small fonts need to be purpose-built to work at one selected size -- most often 8 pixels high. If these purpose-built tiny fonts happen to look OK at other sizes then it's usually just good luck.
Let's have a look at some of my favorites.
Silkscreen
Silkscreen is my personal favorite, and the font you're most likely to see in my screenshots and diagrams. Designed by Jason Kottke, it's the font that launched a thousand buttons on a million blogs. Although it's uppercase only, it's amazingly easy on the eyes for its size. If your priority is legibility, Silkscreen should be your first choice.
Jason also has an excellent expanded version available (Silkscreen Expanded) that's a little more generous with its tracking (the gaps between letters).
Sevenet
Sevenet, one of the free fonts Peter Bruhn has graciously made available at his Fountain type foundry. It's a light-hearted, uppercase pixel font that uses lowercase 'i's and quirky 'g's, and is designed to be displayed at exactly 7pt (or 8px).
Hardcore designers seem to love this font, so if you've ever visited any of the more arty blogs, you'll have seen this font used a lot.
Subatomic Screen
Subatomic Screen is a public-domain font designed by a game coder, Kevin Meinert, and I think you can tell -- there's a touch of early Mario Brothers about it.
However if screen real estate is your problem, Subatomic Screen is your answer. Designed to be displayed at 6px, there are few fonts that will be more readable while taking up so little space.
Handy
Cal Henderson loves making pixel fonts and he has a talent for it. In fact, he even provides a tutorial on rolling your own. Although Handy is probably not as legible as some of the other excellent fonts Cal provides, I think Handy is so unusually human that it deserves a special mention.
Not only is Handy all lowercase, but it's also the only pixel font I know of that has a full set of ligatures (the links between letters in cursive script).
Grixel Acme 7
My last selection is one of many pixel fonts designed by Greek pixel font designer, Nikos Giannakopoulos, which obviously explains the domain name.
Although Acme 7 is a little chunkier than many pixel fonts, it comes complete with both upper and lowercase sets as well as a nice outlined version that is perfect for use over a patterned background.
All of the fonts listed above are free to download and use, but all request that you make a small donation if you find them useful. I've only listed five here, but the creators of these fonts offer plenty of other freebies as well.
I hope that gives you some nice alternatives -- try a comparison on your next diagram!
Best link for fonts here is http://www.dafont.com/alpha.php?lettre=a .
Most of the other stuff is probably not as good as fonts I already have for skins; being more form related. Roll on 2048 skins in SOW
