: What considerations are there in designing pixel fonts? I'm designing monospace pixel fonts for a game, and so far I've only been able to work with extremely small sizes (largest I've managed

@Phylliss782

Pixel fonts aren't terribly different from tiny print fonts when you get right down to it*. The one big exception is that you know what the medium will do with pixel fonts -- a very big advantage.

There really isn't an ideal pixel grid, per se. Obviously a larger grid gives you more room to work. The smallest types I've seen work successfully are 7px designs. Joe Gillespie's MiniFonts designs will help you understand designing at the legibility threshold. Another question here dealt with those micro designs and may give you further reference.

Where to start

Every design problem starts with a constraint. With a good font it's [usually] the intended use. Where does your pixel font need to fit? Would your game benefit from easily read text or does the text need to stay out of the way and only be available to "decipher" when needed?

You'll need to clarify whether or not you want a lower case. An all uppercase font can fit in a smaller grid because of the relatively simple shapes and lack of extenders (below the baseline and above the cap height). But lowercase can get quite small as well: Gillespie's Minx provides and excellent reference point for what I would consider the smallest reasonable lowercase alphabet.





The details

You'll notice something in even the best pixel fonts: They look terrible when you get close and try to figure them out. They are meant to be "perceived", that is the gaps in the design are filled in by the brain. So two squares aligned to 45° become a diagonal line. Sometimes a hole in the grid is the "thin" line between two thick strokes.





Design up close from far away: That is the the pixel font designer's challenge. In other words, you create and modify your shapes at ridiculously close distances all the while considering what it will look like when viewed at it's normal size.

The computer is our friend in this confusing situation: Just keep a second window open with a 100% view so you can see how your design is really looking. Having a second monitor around for this "reality view" makes things much more convenient.

Accommodating the lowercase

Since you mentioned the need for lower case at 6 x 12 ...

Here's a quick example I threw together to illustrate the specific considerations with that requirement.



For starters, I sliced a pixel off your height. Working at such small sizes, you'll notice that legibility benefits from a wider character body. The caps only need to be marginally taller than the lowercase. Take a look at 9px Verdana to see how a wide body can benefit legibility.

Lowercase characters with prominent ascenders will often read better if they extend ever so slightly past the cap height (like the b in my example). My example still manages to stay on an 11px tall body. This is aided by the fact that legibility is less influenced by long decenders: Just a couple pixels will do there.

Even on this restrictive grid, you can see what nice little touches of style you can add without totally wrecking legibility.



With the x-height and body highlighted for reference:



At the enlarged size, the M illustrates a notable consideration. With an even number grid you have no single mid-point for a pixel to land on. This isn't necessarily a bad thing, you'll just have to make some decisions that seem odd when close in. The second M, for instance, looks pretty awkward when zoomed in but is actually an improvement at screen size. Those kinds of implied lines are a critical component of most pixel fonts.

Of course, you'll also have to take into account the extra space required for letter spacing. You certainly don't have much room to play there but it is an important part of legibility.

Look to the masters

As with any artform, you'll learn the most by trying to do what the masters do. The examples I've linked above will provide you with a wealth of information.

A classic case study in pixel font excellence is Underware's Unibody 8. The novel upright "italic" acheives it's effect by using 45° alignments to imply the angle of an italic font without compromising the whole font in the process.





Emigre was another one of the pioneers, along with Susan Kare on the early Mac OS.

* Side note:
Retina is a fantastic example of how a print font accounts for the unexpected at tiny sizes, as is what I would consider it's predecessor Bell Centennial.

Vote Up Vote Down