Good vs. Evil - Two 8-bit style pixelfonts

ill sans's picture

I've started working on a videogame a while back & since it's both inspired & limited by 8-bit standards (I looked up the size & colour limitations of NES-games) I had to make an 8x8 font to fit the 'tiles' (static 'building blocks' for backgrounds & such) & 'sprites' (animations) I've made so far.
At first I made a simple monotype (due to the size restrictions) serif font of which I made several variations, but soon one of them became more & more script-like. Once I finished the entire scriptfont & noticed how 'sweet' it looked I thought it'd be cool to add contrast by making a surly font to go with it so that I could use the sweet font for the good guys & the surly one for the villains.
I'm quite happy with the outcome, especially since the 8x8 size (which already includes the kerning) was quite a challenge to add character to each font.
The x-height for both fonts was 6 giving me 1 extra pixel for both ascenders & descenders. Not a lot, but I hope I still managed to keep it legible. Given that the total height comes to the full 8 pixels of the 'tiles', I'll be forced to include a 'blank' row between every line if I don't want things to get messy.
All in all, I'm quite happy with the result & I'd love to hear your thoughts on it. Especially on the 2 @'s for the good font (which one do you prefer?) & some tips on how to improve the 0 from the same font.
Thanks in advance!

Chris Dean's picture

Great work!. I can’t wait to see how it develops. I recommend changing the title of this thread to “Good vs. Evil -- two 8-bit style pixelfonts” as at a glance I kept seeing “28.”

As far as the @ goes, can you post an enlarged image of them? I think 500 px wide is the max to avoid a horizontal scroll.

When I set an @, I often baseline shift it down so the bottom of the a inside the circle rests on the baseline, as opposed to the outside of the circle. This essentially makes the bottom half of the circle a descender (see below). Perhaps exploring this may open up a few options.

While I seldom evaluate things on an aesthetic level, gut reaction prefers the first one, but upon closer inspection I begin to see a backwards s (and then the beginning of a backwards swastika). My preference then shifts to the 2nd one. Perhaps the 2nd one with the circle continuing around and falling below the baseline?

And, given that there are good guys and bad guys, what’s to stop them from having their own @ characters?

ill sans's picture

Thanks for the tip, I already changed the title of the thread ;-)
I usually try to center my @-sign with the x-height, but due to the single pixels for descenders & ascenders that only allowed me to align the a with the baseline in the first one. I've also included an enlarged image of the 'bad' @ since it probably isn't very clear at the original size.
For both fonts I attempted to give the symbols (@,*, &,...) the same feel as the font it belonged to & for both @-signs I started by making a smaller version of the a. Size limitations however kept me from making a full circle though. To keep in line with that I treated the © the same way extending the c's lower curve into an open circle.

hrant's picture



Jared Benson's picture

I'm digging this. What's the resolution of your target screen, and how big do you plan on displaying the font?

ill sans's picture

The resolution for NES-games was 256x240 although for NTSC the top & bottom screenlines were often omitted leaving you with a resolution of 256x224 which is the one I want to use. I intend to use the fonts at 100% (original image), but since it turned out bigger than expected when put together with the sprites & tiles I've got so far I'll probably be forced to use cut scenes for the dialogues. I do plan on scaling the end result to 200% to fit the screen better & to give it that retro jagged look ;-)
I might still try to make a 4px wide font to use 'in' the game.
I'll try & post some pictures of fonts + tiles/sprites for size comparison later.
Any more thoughts on the @'s or suggestions on how to improve the 'good' zero?

ill sans's picture

I made an gif-file* of some sprites & tiles combined with the fonts at the actual resolution I intend to use (mind you, I intend to scale it to 200% in the finished game). As you can see the fonts take up quite a lot of space so would probably be best for just titles or cutscene dialogues.

*I actually made an swf-file so you could see the animations as well, but apparantly Typophile doesn't support them (no longer?) :-(

ill sans's picture

double post

ill sans's picture

triple post :-/

On another note; is anyone else experiencing problems with Typophile (pages loading extremely slow or not at all)?

Chris Dean's picture

Yes. Yesterday (Sunday).

Syndicate content Syndicate content