June 21, 2018
Hot Topics:

Working with SVGAlib Fonts

  • January 13, 2000
  • By Jay Link
  • Send Email »
  • More Articles »

Creating Bitmapped Fonts

You now know that each character in an 8-pixel by 8-pixel bitmapped font is defined by eight values. This, in turn, means that a 256-character font requires 2048 numbers. That's fine, but what do those numbers mean? Would anything bad happen if you changed them? And how can you create your own fonts? Let's find out.

Each character in an 8 x 8 font is actually comprised of eight horizontal lines, containing eight pixels apiece. Accordingly, each font number refers to one of the eight horizontal lines. The lines run from top to bottom, so the numbers refer to the lines in sequential order. For example, a capital "S" can be created with the numbers 126, 128, 128, 124, 2, 2, 252, and 0. (The 0 is to provide a buffer between multiple lines of text). See the illustration below for a better representation.

Figure 3: Bitmap Chart
Figure 3: Bitmap Chart

Did you see how the eight numbers made the letter "S"? Now, what would happen if you just used the number "124" for all eight lines? Here's how that would look:

Figure 4: Character Array
Figure 4: Character Array

So, as you can see, the numbers in the font's char array logically create each character in the font.

That said, how do you know which numbers do what? Is it random? No -- it's organized rather well. As you know, each of the character's eight lines contains eight pixels. That means that there are 256 possible combinations of pixels in each line. (2 possible values [on or off] to the 8th power). So, the numbers 0 - 255 match the 256 possible horizontal lines. Further, far from being random values, they're instead ordered in a logical, binary sequence. The first number, 0, is an entirely blank line. If "0" equals a blank pixel, and "1" equals a painted pixel, line 0 would look like this:

The next line, 1, would look like this:
In turn, lines 2 - 10 would be as follows:
00000010 = 2 (compare this with the "2" line in the letter "S" above)
00000011 = 3
00000100 = 4
00000101 = 5
00000110 = 6
00000111 = 7
00001000 = 8
00001001 = 9
00001010 = 10
Can you see the binary sequence? Of course, line 255 would be this:
11111111 = 255

Although I won't map out all of the 256 font "strips" for you, it would be trivial for you to do this on your own. And to create your own font, you would merely need to match the eight appropriate font strip numbers to the character you were creating. (Then, repeat for the other 255 characters). For more fun, you can even skip over the characters you won't be using by using eight zeros instead.

Of course, this process can be time consuming. Instead, you may find it useful to use a simple program called FontBuilder that I've developed. FontBuilder provides a basic graphical interface for drawing the characters for a new font. When you're finished, it figures out what font strips are needed, and it writes the font file (or char array) for you. See the SVGAlib website for a copy. What a relief!


Hopefully this article helped to clear up the air of mystery surrounding fonts and text in SVGAlib. Once you've written a program or two involving fonts, you'll find that they're just as easy to implement as anything else in console graphics. What's more, you might want to contribute your own bitmapped font to the SVGAlib site! Just send it to fonts@svgalib.org, and you'll get full credit. See, isn't Open Source fun?

Related Resources

  1. SVGAlib home page Web-based resource to download the most recent version of SVGAlib, ask for help and read tutorials.
  2. Brion Vibber's FAQ More help for SVGAlib developers.
  3. SVGAlib mailing list The Rutgers mailing list. Very helpful.
  4. SVGAlib development site Matan Ziv-Av's home page. You'll find the latest beta version of SVGAlib here.
  5. FreeType A Free, Quality, and Portable Font Engine.

Page 2 of 2

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

By submitting your information, you agree that developer.com may send you developer offers via email, phone and text message, as well as email offers about other products and services that developer believes may be of interest to you. developer will process your information in accordance with the Quinstreet Privacy Policy.


We have made updates to our Privacy Policy to reflect the implementation of the General Data Protection Regulation.
Thanks for your registration, follow us on our social networks to keep up-to-date