71 Squared Blog

What is a Bitmap Font?

Posted by Tom Bradley on Saturday, March 1st, 2014

All the text displayed on your computer is rendered using a font file. Each font contains all the information necessary to draw the shape of each individual character. Each character can then be scaled and rendered at any size without compromising quality.

Unfortunately, the process of scaling and rendering these fonts is fairly processor intensive, especially if you need to draw the font with a number of effects like outlines or shadows. This extra processing is unacceptable in games where the hardware is already under immense pressure. OpenGL itself doesn't even understand fonts, so in order to display text in your game you would need to use whats known as a bitmap font.

A bitmap font is essentially an image file containing a bunch of characters and a control file detailing the size and location of each character within the image. Each character is represented by a number of dots or pixels, rendered in a particular font and size. The major benefit of using bitmap fonts is that each character can be pre-rendered using multiple effects, loaded into OpenGL as a texture, and rendered to the screen using very little resources. An example of a very simple bitmap font with characters 0 through 9 is shown below.

Lets take a closer look at one of the characters in this image. When we zoom up the image we start to see all the pixels that make up the character. This is what happens if you scale the bitmap font up to a larger size. In order to use a larger font, you would have to create a new bitmap font in the desired font size. Bitmap fonts always look best when they are drawn at their native pixel size.

Control Files

The corresponding control file in FNT format for the above image would look like this.

Lets take a closer look at the content of this file. The file starts by describing a few characteristics about the original font. It details the type face, size, and various flags like bold/italic etc. It also details if any padding or spacing was used when rendering the bitmap image. After the header information, the details of each character in the bitmap font are shown with each character taking exactly one line. Lets take a look at the line that describes the character "6".

We are given quite a bit of information about the character. Each line that describes a character starts with the word "char". Then follows all the characteristics.

Parameter Description
id The ID of the character from the font file.
xadvance Number of pixels to jump right after drawing this character.
x X position within the bitmap image file.
y Y position within the bitmap image file.
width Width of the character in the image file.
height Height of the character in the image file.
xoffset Number of pixels to move right before drawing this character.
yoffset Number of pixels to move down before drawing this character.
xadvance Number of pixels to jump right after drawing this character.
page The image to use if characters are split across multiple images.
chnl The color channel, if color channels are used for separate characters.
letter The ASCII value of the character this line is describing. Helpful for debugging.

Glyph Designer, a bitmap font generator

Trying to style a font in a program like Photoshop, then write a corresponding control file would be a really tedious. This is where Glyph Designer comes in. Glyph Designer allows you to add multiple styles to any font, then generate a bitmap image and it's control file automatically. Below you can see a sample of the above text styled using Glyph Designer. The styling makes use of a solid stroke, gradient fill, and an outer shadow.

So what else can you put in a bitmap font?

Bitmap fonts are not just limited to numbers as shown in the examples above. You can render any character the font contains. A font can contain anything from numbers and letters to Chinese logograms or any shape imaginable. For example, Font Awesome contains a whole bunch of really useful icons all in a single font file. Each character in the font is actually an icon. The advantage of this is that each icon can be scaled to precisely the size you require. The below image is a selection of characters from Font Awesome, styled in Glyph Designer.