AA'd TTF comic fonts for my 320x200 game

[SpacePirateCaine]

Ahoy there!

This thread is a quick response to a rather common bit of feedback that I'm getting on my Games in Progress thread regarding the readability of the fonts I'm using in my game. I've taken the large amount of critique that has been offered, and decided that I would do well to get a few extra eyes on this. I always have the option of creating my own comic style TTF font, but I'd like to avoid resorting to doing such for the time being, if at all applicable.

A little bit of background before I share: The game is meant to at least evoke feelings of an English language comic book, using comic-style text in speech balloons for speech (When enabled). Because I am attempting to create something that is reminiscent of this style, I am limiting myself to only comic style fonts that are all upper case (Which is the common style for North America). Unfortunately, my project is also being done in 320x200, though I expect players to resize at least to 2x if not 3x or even full-screen. Because of this, while not being entirely stingy, I still want to minimize screen real-estate taken up by speech balloons and GUIs. This means that my fonts are 7pt for speech, and 5pt for menus. For this reason, readability can be an issue.

While maintaining the above limitations, I'd like to build a consensus as to the readability of 4 fonts that I am courting as ideas for use in the game. I am also willing to mix-and-match if one works better for speech while another works for menus, etc.


Digital Strip 2.0 (Bold)

The above is the font that I originally chose, though I have changed to the bold version for readability's sake.


Kid Kosmic


Web Letterer


Fanboy

I'd greatly appreciate some feedback on which of the fonts here are easiest for everyone to read/understand for both the speech balloons and the menus.
All of the above fonts, for those interested, are available from Blambot.com

[Snarky]

My advice is to drop the TTF font completely and go with pixel-based fonts for the text/menu. I understand that you want it to look like a hand-texted (or handtext-font texted) comic, but at this resolution there's not enough detail for the handdrawn look to really come across, and the antialiasing just makes it look blurry. I think the speech bubble and the all-uppercase text is enough to make it look comic-book-y, and you can of course pick or draw a pixel font that has some of the characteristic aspects (crossbar I, slightly angled vertical strokes and curved laterals, etc.).

Just like you're adapting the graphics style to the medium, you're best off doing the same with the font.

That said, of these options I think Kid Kosmic is the most readable and best-looking one.

[Lasca]

I agree with Snarky. The menus are hard to make out in all of the fonts.
All of the speech bubbles are readable, although the Fanboy font isn't as clear as the other ones (but maybe that's just me).
Personally I prefer Web Letterer!

[Khris]

Seconded, although I didn't have readability problems with the speech bubble font in your GiP screenshots. If possible I'd increase the line height by a pixel though (not sure if the module you're using can do that).
But I'd also try a pixel font.

For a recent game I copied Westwood's bitmap font. It is vastly superior to any other I have encountered. click

[Daniel Eakins]

Snarky said it all.

You can have anti-aliasing, but it should be much more subtle. Have you had a look at other games that use a comic book artstyle? Comix Zone is 320x224 (not counting the TV distortion) and had a very clean anti-aliasing: http://www.hardcoregaming101.net/comixzone/comixzone.htm

[Monsieur OUXX]

For more details on how to start off a TTF font, but then convert it to a 256-chars WFN font in order to edit it: http://www.adventuregamestudio.co.uk/wiki/Fonts

If you have the proper TTF font (for example, go to the "pixels" section of dafont.com), it should be a matter of minutes. I suppose all you have to do is to remove some of those grey/transparent pixels and you're done.

[pro-tip] AGS fonts are monochromatic, except for the black outline. But since your font background is always white, and the font is always black, you could actually:
- define the black part as being the custom outline,
- set the font's color to grey.
This way, you can re-introduce some anti-aliasing, in the form of grey pixels. Unfortunately that would allow you to only use one shade of grey. It's limited for anti-alisaing, but it's better than only black and white.

[Snarky]

Also, since you've posted in this forum and Darth doesn't like us to critique in GIP, let me say that the graphics look really nice! You might want to try to be a little bit more consistent with the outlining, though. In some distant parts of the background it looks like pixels are missing (like when you scale down with nearest neighbor). Notably on the line between the floor and wall under the desk on the left, and in the corner between the walls behind it.

Finally: blond, eye-patch, space pirate, title with Asian symbols and TM... Hey, this is a stealth Oceanspirit Dennis game!

[Monsieur OUXX]

More importantly, this is obviously inspired by 2001:A space Odyssey.
And for that you put me in a transe. I want this game I want this game I want this game.

[HanaIndiana]

I found Kid Kosmic to be the most readable, but the anti-aliasing was still distracting.

[SpacePirateCaine]

Hey folks - Thank you very much for the feedback. Considering everyone's feedback, I have decided to buckle down and just build a bitmap font custom for my game. I'll upload some screens here just to show what I have once I get it done, and will also offer up the font to the community when I'm done with it, if anyone else decides that they want to use it themselves (Because finding fonts that look good at 320x200 is tough.

Once again - thank you all for the feedback!

[SpacePirateCaine]

Monsieur OUXX, I'm intrigued by your suggestion of faking AA with a custom outline, but I'm not entirely sure what you're suggesting.

I've started working up a bitmap font with Radiant's FontEdit and have most of the main characters already worked out so I can use it as a reference:

[imgzoom]http://i558.photobucket.com/albums/ss21/SpacePirateCaine/FONT.png[/imgzoom]

Are you saying I should invert the colors, and somehow change the negative space to fill only points that I would use for AA, or am I misunderstanding? I've taken a look at an outline font (specifically AGSFNT2.WFN, which came with FontEdit) but haven't quite worked out how outlined fonts are meant to work (And didn't find much about custom outlining in a quick search). Would you mind showing me how one letter would be set up in the case of a bitmap like the above?

[Snarky]

With an outline font, you have two font files: one for the characters without outline (drawn in different, configurable colors depending on the speaking character), and one for the outline itself (always drawn in black). To display a character, the character glyph from each font is drawn on top of each other. (Probably the outline first and then the plain version, but conventionally you draw them to not have any overlapping pixels, so it shouldn't matter.)

So since you always want your text to be black, you could draw the main character shapes as part of the outline font, and draw just the antialiasing pixels as the "main" font, and set the speech color to gray. You draw the font as normal, just pick it as the outline font instead of as the main font.

[Khris]

I tested this and it works fine but don't expect too much of it. One shade of AA is very tricky to work with.

On a completely unrelated Note, SpacePirateCaine:
It's probably a good idea to use normal capitalization in your scripts and add a few lines to the speech bubble module that will turn the text to upper case. Or duplicate the uppercase characters in FontEdit into the lowercase slots.

[Calin Leafshade]

Remember my SpriteFont plugin. It means you can draw your own predictable font in full 32bit colour. So you can have very predictable AA.

The plugin is supported by all the ports too.