14

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 is 5x9) because those ones are the easiest to try and err with. Often times the results I come up with for sizes even as small as 7x13 are all blockish and unappealing.

I've analyzed some other pixel fonts, and most of the graphically appealing ones make lots of alternate considerations that I never would have thought of making, such as making entire sections only diagonally connected.

Are there any special block sizes that are "optimal" for designing pixel fonts? Are there any special pixel placements that I might have to keep in mind? Because sometimes when I draw a line that's only 11 pixels long (or make things intersect at such small sizes), it ends up looking like something else once zoomed out.

1 Answer 1

11

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.

Minx is about as small as the lowercase goes

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.

Forgive me, it's a rough illustration

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.

Enlarged, you can see how strange things get

With the x-height and body highlighted for reference:

enter image description here

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.

H&FJ's Retina

7
  • I do in fact want a lower case. I want the 6x12 font to be usable in, say, a console.
    – Joe Z.
    Dec 24, 2012 at 19:31
  • But yes, this is a very good answer, with lots of resources I can look further at. Thank you.
    – Joe Z.
    Dec 24, 2012 at 19:53
  • 1
    very minor addition: "up close and far away" is easily achieved in Photoshop by creating a new window (window menu>arrange>new window for docname-1) and leaving one of them at 100% zoom size off to the side as a "preview copy"
    – horatio
    Dec 27, 2012 at 21:06
  • 1
    No worries, you get the idea. I don't even think you'll need the extra height. I would just add the extra pixel on the width and leave the height between 10 and 12. Play around with a few characters and see where you end up. Dec 28, 2012 at 23:14
  • 1
    By the way, a standard test word that accounts for the basic shapes of the Roman alphabet is Hamburgefonts. Many type designers will start with H, n, and o to get a feel for the essential characteristics. Dec 28, 2012 at 23:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.