• Register
Post news Report RSS Cogmind Fonts

Introduction to Cogmind's many fonts, with a discussion of what is needed and why.

Posted by on

Cogmind currently comes with a whopping 26 bitmap fonts. This unusually large number is somewhat less impressive than it seems, as they are certainly not all completely unique styles, but it still took more than a week to draw, scale, and tweak them all to the point of polish sufficient for at least early releases.

Why does the game need so many fonts?

Target Resolutions

Cogmind's GUI is designed for an 80x60 console, so to keep as close to that amount of content on screen as possible, the most appropriate font will be the one that can draw an 80x60 grid evenly onto a given screen resolution. To determine what font sizes we need, we turn to statistical data regarding the most commonly used resolutions:

cogmind_common_resolutions
The most common resolutions and their respective default font sizes in Cogmind.

Obviously if game is windowed then the whole range of font options is possible depending simply on how large a window (or what size text) the player prefers, but while running in fullscreen mode we want to minimize letterboxing (see Fonts in Roguelikes post for diagrams and discussion under header "Resolution").

First we calculate the largest font compatible with a given resolution. Height will be the limiting factor because Cogmind uses a 4:3 aspect ratio while most screens are 16:9/10. Any remaining space is then filled by expanding the map view, which defaults to 50x50 cells but can show more if there's room. Most fonts still result in a tiny bit of letterboxing in one dimension, but it's a pretty insignificant amount since our grid cells are quite small, and well worth the pixel perfect appearance. Note that we could get closer to our target resolutions by using odd-dimension fonts (specifically a 15x15 font could perfectly match the common 1600x900 resolution's height), but that would make it more difficult to keep different-sized fonts proportional to one another.

Thus from the list above we can see that the optimal font for a majority of players will be either 12x12 (25%), 14x14 (14%), 16x16 (13%), or 18x18 (33%). In addition to those, Cogmind adds another two sizes useful for special cases:

  • 10x10 "mini-fonts" for netbooks with tiny screens (minimum resolution: 800x600). Cells that small can be tough to accurately click on, but are not too small to see (if you're already using a netbook...) and work just as well with keyboard-only play.
  • 20x20 "mega-fonts" for huge screens (like my own 1920x1200). These are required for recording videos, so useful for myself and LP'ers. YouTube compression is notoriously horrible for processing small pixel-perfect ASCII, so the key is to record at high resolution with thicker lines to retain as much information as possible. At least that's the theory--I haven't tested it yet. Cogmind's animated gifs always look good down to the yummy pixel level, but for full immersion we need sound!

In total we have 6 different font sizes to support. Why do we want to draw fonts for all these resolutions instead of just scaling the window? Because scaling looks awful! (The other option discussed in the previous post is TrueType fonts, but they still don't offer pixel-accurate control.)

Font Categories

For each font size, we need at least one separate bitmap for each of three different purposes.

cogmind_font_categories
A screenshot excerpt of the game running in 14x14 mode, showing all three font types in the same interface--the map, text, and art.

Map

The font used to display the map has a square aspect ratio to preserve uniform distribution of space for better tactical decision-making. In the future players will be able to optionally replace these fonts with (simple) sprites/tiles at the press of a button, but the sprites have not yet been added.

Text

Text fonts are half as wide as their respective map fonts, giving them a somewhat restrictive height-width ratio of 2:1 rather than more common ones like 8:14 or 10:16. This makes designing good fonts a bit more difficult, but the tile engine is optimized assuming font widths use multiples of a single value, so other ratios are out of the question.

Art

As discussed earlier (see here and here), Cogmind art is created purely from code page 437 glyphs. Unlike some other roguelikes, Cogmind map and text fonts do not need the entire 255 character range of CP437, instead sticking to standard alphanumerics and punctuation. This at least keeps the total number of required glyphs down from an otherwise ridiculously huge number, but we still need to draw the full character range for art font bitmaps, and need one CP437 art font for every supported font size.

Though map and text fonts use sans-serif styles, I decided to use mostly serifed fonts for CP437 to retain the traditional feel of individual glyphs. They have, however, been converted to a square format to make art creation a little easier and enable balanced symmetry in both dimensions.

Creating an art font is more time-consuming than a map or text font not only due to the greater number of glyphs, but because every different size must do its best to maintain the same proportions. This way pieces of art drawn at a given size (I draw at 12x12), will look more or less the same at all other sizes. (By comparison, map and text font styles should look similar at different sizes, but are not required to have the same proportions and can focus instead on readability, which is much more important in those cases.)

cogmind_art_scaling_phase_cannon
Scaling a Phase Cannon diagram using multiple bitmaps, 10x10 through 20x20.

Making sure this effect will work requires a lot of cross-comparison when drawing the fonts. Sometimes compromises are necessary due to space concerns, or whether there is an odd or even number of pixels available in a given area, etc. There's still (always...) room for improvement, but enough time has been put into polish already.

At this point I've completed REXPaint's library of square-ratio CP437 fonts. That tool's next release (1.0) will include everything from 8x8 to 20x20.

Player Choice

Another reason for the many fonts is that some styles have variants which may be more readable for some players. This applies only to text, for which readability is more of a concern (map and art fonts on the other hand only have a single option at each size). Each size usually has a couple variant styles to choose from.

cogmind_font_variants_16x16
Comparing two 8x16 variants: "cogmind" (top) and "wide" (bottom). This is a dialogue segment from Revision 17, a not-entirely-sane robot who gives you a tiny bit of background at the beginning.

With multiple fonts available it's easy to change the style, and therefore appearance of much of the game overall, via the options menu:

cogmind_font_swapping_12x12
Swapping between two 6x12 fonts, the "crisp" style I've been using in all screenshots before now, and the newly-added "cogmind" style.

It's also easy to add new fonts to the game--just draw a bitmap for one or more of the font categories and add it to the fonts/config.xt file:

cogmind_font_config
The current fonts/config.xt file listing all available font sets selectable in game.

Notes on Style

Keeping a thematic style is tough to do at small sizes, since every pixel becomes valuable in terms of readability, a property we can't sacrifice in the name of style, at least not for a roguelike where reading text should be mostly effortless to avoid slowing down gameplay. I did recreate the cogmind style at 5x10, but it's not very readable and won't be included with the game:

cogmind_unused_font_5x10_styled
An unused cogmind-styled font at 5x10. It looks interesting, but the high pixel density hurts readability.

Instead there are two other 5x10 fonts that focus purely on readability:

cogmind_font_variants_5x10
Cogmind's two smallest fonts: 5x10 all-caps, and 5x10 cased.

There were also symmetry issues designing mid-sized map fonts (16x16). For example, 12x12/14x14 fonts use 2-width ASCII lines, and the next size up should logically use 3-width lines, but you can't center a value of 3 given an even dimension. As an experiment I tried to skip to 4-width lines to keep them centered in their cells, but the relative proportions are noticeably different, causing machines to appear not quite how they were intended. After some testing the best solution was to draw 3-width lines 1px off center (only a couple of fringe case machines look a bit off, as opposed to all machines).

cogmind_font_16x16_offcenter_lines
16x16 map font tests, demonstrating how thinner off-center lines (left) better reflect the original machine design than thicker centered lines (right).

Looking closely at the earlier 5x10 text fonts you'll notice that both line glyphs as well as vertical strokes in certain letters are actually off-center as well. They have only 4 pixels of width for drawing (one is reserved for embedded spacing), and attempting to give them perfect symmetry by doubling the width/height of those lines stands out too much and unbalances the font's overall appearance.

cogmind_font_5x10_unbalanced
Too much attention is drawn to the 'I's and 'T's etc. when trying to design for symmetry at this small a size, throwing off the balance.

Another stylistic consideration for roguelikes in particular is that certain characters can have disproportionately greater impact on the game's appearance. Last time I talked about use of the period for empty spaces, and showed how a couple extra pixels on that one glyph can drastically change the appearance of the entire map. Similarly, the hash ('#') symbol is going to be pretty ubiquitous for any roguelike using it to depict walls, and thus deserves extra attention. Again as a transitional font size the 16x16 map font had to decide between a thin and thick version.

cogmind_font_16x16_hash_thickness
Comparison of hash symbols drawn with 1-pixel or 2-pixel lines (16x16 map font).

The 2-pixel version produces a much higher contrast between open and closed space, but also draws a lot of attention to walls as a character when we care much more about other characters representing interactive objects and entities. Later maps painted with brighter wall colors would suffer even more in this regard (no, we're not setting different object brightness values for different sizes, thus colors that work at one size should ideally work at all sizes).

One aspect I like about thicker hashes is that they better mesh with wall-integrated machines:

cogmind_font_16x16_hash_thickness_machine
Thin vs. thick hashes as they work with wall-integrated machines.

However, this is less important overall so we're going with the thin style (until at some future date I disagree with my current self).

Text Font Comparison

Below are all the text font options available for each cell size, all demonstrated using the same dialogue window. Feel free to share opinions on style, readability, or whatever. I'm interested in knowing what sizes and variants are preferred (or not preferred), as this can affect what fonts I tend to use for screenshots and gifs. The game's default font(s) are also fairly important since many players will probably not immediately realize that switching fonts is so easy and that there are so many options (after all, customizable text is not very common outside of traditional roguelikes).

5x10

cogmind_fonts_5x10
Cogmind 5x10 Fonts: All-caps, Cased.

6x12

cogmind_fonts_6x12
Cogmind 6x12 Fonts: Cogmind, Crisp.

7x14

I've only drawn one font for 7x14 (this particular size was originally going to be left out, until a review of resolution stats showed it could be required by 1 out of 7 players!).

cogmind_fonts_7x14
Cogmind 7x14 Font.

8x16

cogmind_fonts_8x16
Cogmind 8x16 Fonts: Cogmind, Wide.

9x18

As we get larger, there is more room for variety in style.

cogmind_fonts_9x18
Cogmind 8x16 Fonts: Cogmind, Narrow, Wide.

10x20

Regardless of which sizes look better, I'll definitely be using 20x20 to record videos since it should be best able to survive compression. Screenshots and gifs will use smaller fonts to fit more content at their native resolution and avoid shrinking.

cogmind_fonts_10x20
Cogmind 10x20 Fonts: Cogmind, Narrow, Tall.

More Options

Most of the text fonts are currently derived from a single style, attempting to take it in multiple directions and explore the potential for readability at different sizes. Depending on the results--the overall feel is certainly different when experienced in game interacting with the full UI--I may add more fonts with completely different styles that focus purely on readability. Already some good suggestions have come in from readers, including this.

This is the third in a three-part series on roguelike fonts:

Additional Note: Since this post was written, support has also been added for 1440p displays.

Comments
drjd24
drjd24

After reading the long post, im still a bit confused. If and when we run the game full screen, the text wll be scaled upwards? Because the guns look a whole lot better in the smaller text.

Reply Good karma Bad karma+2 votes
Kyzrati Author
Kyzrati

Good question, and something I was just working on a couple days ago. In fullscreen mode the game will default to automatically selecting the largest font that will fit. However, if you want to use a smaller font there a couple ways you can still achieve that. One would be to simply choose a smaller font in the options menu and accept letterboxing; the other would be to increase the amount of visible map space (also in the options) and shrink the UI/font accordingly--if you have a fast enough CPU to handle the extra load.

I agree that the guns look best in the smaller font--that's what they were designed for (size 12). I imagine the larger versions might display better on newer monitors with a higher pixel density.

What resolution is your desktop?

Reply Good karma+2 votes
drjd24
drjd24

Just a standard latop... 13.3-inch (1280 x 800) :D

Reply Good karma Bad karma+2 votes
Kyzrati Author
Kyzrati

Well then, you have nothing to worry about--you can play fullscreen in standard 720p mode using the default font ;)

It'll automatically increase your map view area a bit to see fill the screen.

Reply Good karma+2 votes
kwijl
kwijl

I agree, smaller fonts look better.
8x16 would be the max if you ask me, the others are just too big, and especially hard to read the text in sentences.

But ofcourse its hard to tell from the pictures compared to actually seeing it in a working fullscreen product.

btw, really like the style of the cogmind font, fits the atmosphere of the game perfectly.

Reply Good karma Bad karma+3 votes
Kyzrati Author
Kyzrati

Thanks for the style comment, I agree, though I think it was tough to get it looking good for the larger font ranges, and size 14 looks especially mediocre. True about it being just excerpts and tough to say for sure--we'll see what the general reception is in play, and go from there. At some point I will likely add non-sci-fi fonts as well, just to have that as an option and as something that will maximize readability, for anyone who has trouble with the font as is.

The largest fonts are mostly for players with huge monitors, and many of those now have a higher pixel density, which might balance out the awkward size.

Then there's also the option to use a smaller font even on a larger screen, though you'll have to actually go into the options menu and change a few things to do that. Hope it won't be too much to figure out, but I was torn between making it a very simple UI resolution system and giving you lots of options to tweak the interface you want. I mostly went with the latter.

One thing to know about the examples I've shown is that they're kinda *not* the in-game norm. Here I intentionally used a block of text to sample the fonts because that's the ultimate test of readability. 95% of the text in game is actually just short phrases or lone words, which are much easier to read regardless of the font. So the impact might end up being minimal.

Thanks for bringing up these points!

Reply Good karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

News
Browse
News
New
Post news
Report
Report
Share
Related Games
Cogmind
Cogmind Roguelike
Related Groups
Grid Sage Games
Grid Sage Games Developer