Categories
Ambience Gamedev Grievances

Gamedev Grievances #23: Pixel or Rendered Fonts?

About a month ago, I tweeted about choosing between pixel and rendered fonts for Ambience:

It’s been something I’ve had on my mind for a while, and I’ve been busy weighing up the pros and cons of each system. So far, Ambience has always used rendered fonts for its textboxes and menus – that means a font that you choose from the list of default fonts, e.g. Times New Roman, Arial, and so on. While the UI has also used rendered fonts in the past, I’ve been slowly slipping in some pixel fonts there to make the UI a bit clearer and easier to see. The textbox fonts, however, remained rendered.

But recently, after much consideration, I decided to take the plunge and change everything from rendered to pixel fonts. Why did I do this, and why did I take so long to make the switch? Well, there are a few factors which came into play.

Factor #1: The “feel” of pixel fonts

I’m designing Ambience to look and feel a bit like an early 2000’s handheld console roguelike, and having rendered, anti-aliased fonts in the game kinda ruins that feel. Sure, rendered fonts look nice and smooth, but in this case I felt that it made everything a bit too smooth. This was especially in comparison with the other graphics in the game, which are okay but not meant to be stunningly beautiful (I’m not a dedicated artist, after all), and this mismatch between the simple-but-effective graphics and the smooth, anti-aliased font was always a little jarring.

The anti-aliased font looks smooth, but doesn’t really fit with the other graphics.

“But Rhombus, why don’t you just turn off anti-aliasing?” (In other words, make the fonts totally opaque and without smooth edges.) I did try that, but the end results were very sloppy – the edges of the fonts were very rough, and some of the letters were so malformed it was hard to read them.

Factor #2: Control

What was more, I didn’t have much control over how the rendered fonts looked, either with or without anti-aliasing. I wanted to be able to control the appearance and overall “feel” of the game as much as possible. With rendered fonts, what you see is pretty much what you get, and there’s little opportunity for changing the overall font or individual characters to suit your purposes.

Of course, that’s not altogether a bad thing since it means there’s less work for you to do: all you have to do is pick a font that looks good. But sometimes that’s hard, and when you need that extra level of control, it’s nice to have a pixel font so you can tweak those letters until they look just right. And, speaking of tweaking…

Factor #3: Pixel fonts are hard work!

The number one thing that’s prevented me from implementing a pixel font sooner is the fact that suitable pixel fonts are either hard to find or hard to make. Finding public domain pixel art can be easy, but finding stuff that’s suitable for your work can be difficult.

And making those pixel fonts are hard, too. Like I said earlier, I’m not an artist, and that applies to making pretty fonts too. Sure, I can do it if I really need to (and have a few hours to spare), but it doesn’t really come naturally for me. As a result, it takes a lot more work for me than it might for a more talented artist.

But you know what? The hard work’s worth it. It’s always worth putting in a little more effort to get something looking right, rather than leaving it second-rate and having regrets later – especially when it comes to a very large, special project like Ambience.

In the end, I did finally pick a public domain pixel font from OpenGameArt.org that I liked. But I still had to tweak it a little. The original characters were 12×12 pixels, which was about the right size horizontally, but not quite tall enough vertically, and so the characters were a little bit too “square” and cramped. So I stretched all the characters vertically to make a 16×12 font, and then did some minor tidying up. And it turned out pretty well!

From this:

To this:

I also did some fiddling with the textbox to make it a bit smaller and give it a border, making it look a bit more like an older, handheld console game. (Like I said earlier, getting the feel that you want is important. And it’s a good thing to put in a little extra work to make that happen.)

Leave a comment