Encoding fonts in the GraphicFont format

In order to use a particular bitmap font in your program, you must first encode it in the format particular to GraphicFont. Assuming you have an exisiting font in another format that you wish to encode, here's how to do it manually:

  1. In a paint program such as Adobe Photoshop, create a long blank white (RGB value 255,255,255) canvas, such as 500 by 100 pixels. Set the foreground color to pure black (RGB value 0,0,0).

  2. Set the spacing to at least 3 and type out all the letters of the desired font in this order: 

    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
0123456789~!@#$%^&*()_+|{}:"<>?`-=\[];',./
    It should all be on one line, not wrapped as you see it above. This default order is so because it's easy to type:

    1. Type A to Z in uppercase
    2. Type a to z in lowercase
    3. Type 0 to 9
    4. Hold down the shift key. Going top to bottom and left to right on a standard U.S. keyboard, press all the nonspace character keys with shiftable characters.
    5. Going top to bottom and left to right on a standard U.S. keyboard, press all the nonspace character keys you haven't pressed before.

  3. Draw a vertical one pixel-wide black (RGB value 0,0,0) line between all of the characters. If you haven't set the spacing wide enough, you'll have to make space for the lines. There should be no lines at the beginning (before "A") or end (after "/").

  4. Shift all the characters horizontally so each is separated by a black vertical line by exactly one pure white pixel. if the characters are antialiased, make sure you take into account the small grayscale values around the font (consider them as part of the character).

  5. Crop the image so that a one-pixel border surrounds all of the characters. This means you'll have to make sure that the "tallest" glyph (it may be the double-quote character) has a pixel of space above it, and the "lowest" glyph has a pixel of space below it, that "A" has a pixel of space to the left, and "/" has a pixel of space to the right. The black lines should run the entire height of the image.

  1. Now you will have to take the measurements of the font. Refer to the image above to help you. All of these measurements are in pixels.

    • Ascent is the distance from the top of the alphanumeric (letters and numbers) characters to their baseline.
    • Descent is the distance from the baseline to the bottom of the alphanumeric characters.
    • Leading is the distance between the descent of one line and the ascent of the line below it.
    • Height is the ascent plus descent plus leading.
    • Maximum ascent is the maximum height above the baseline of any character.
    • Maximum descent is the maximum height below the baseline of any character.
    • Word spacing is the average space between words.
    • Character spacing is the average space between characters.

  2. You'll need one more value, and that is the order of the font characters in the image. This value depends on the order in which you put the characters in the image:

    • 0 : GraphicFont ordering, standard U.S. keyboard (the order described above)
    • 1 : Java ordering, ASCII characters 33 to 126 consecutive
    • 2 : Java ordering, ASCII characters 1 to 255 consecutive
    • 3 : Macintosh ordering, characters 1 to 255 consecutive
    • 4 : PC (IBM-compatible) ordering, ASCII characters 1 to 255 consecutive
    • 5 : Custom ordering

Here are some example fonts so you can examine them and see what they look like. They are for noncommercial demonstration purposes only:

Adobe Garamond Italic 14 (antialiased)
Adobe Gill Sans 12

  1. Now you'll need to encode all of these values in the image - this is done by placing the values in RGB colors as shown in the diagram above.

  2. If you want certain characters to be represented by a particular integer code, you will need to encode this value as an RGB color and place a pixel of that color in the lower-left corner of the character's square. This code will override the default code that was specified by the ordering type. The value begins at the blue value and works its way up, so you can use 24-bit integers to specify characters. So, for example, 16 would be encoded as RGB value 0,0,16 and 257 as RGB value 0,2,255.

    You can add more characters at the end of the image and give them their own codes. This way you can extend fonts with glyphs such as copyright and trademark symbols without having to include every single character in the font. Given any ordering, there is basically no limit to how many glyphs can make up a font. (Well, the actual limit is just over 2 billion, but for all intents and purposes...)

    If every character has its own custom code, you should specify custom ordering.

  3. Save the image in the GIF format and make sure that you specify the pure white background as transparent. Don't interlace the image.

  4. Make sure you put the proper name of the font, copyright, and author information in the comment area of the image.

  5. Name the image with the name of the font, the style, and the size. For instance, a good name would be "gill.sans.bold.12.gif". If the style is plain then you don't have to include "plain" in the name. You should use only alphanumeric characters and period separators. If the font is antialiased, prepend the name with "aa.". For instance: "aa.garamond.italic.24.gif".

  6. You are now ready to use this font with GraphicFont!

Format pros and cons

Here are some advantages of this format and GraphicFont in general:

  1. It is fairly easy to make manually, and you don't need any expensive software or hardware to do it. This was one of the main factors in creating the format.

  2. The format is its own preview. Because every character can be seen, there is no need to decode it first to decide if you want to use it or not.

  3. Because the GIF format is compressed, fonts are typically small (2k for a typical 12-point font).

  4. The format supports antialiased characters. Note though that antialiasing can make things look muddier at small size.

  5. Because strings are rendered as images, the images can be cached beforehand in your program and manipulated just like any other bitmap.

Here are some disadvantages and bugs:

  1. There is no way to get the name or style of the font. Ideally, this information could be encoded in the GIF comment area (as well as pointers to T1/T3/TrueType versions), but I have no Java code to read GIF comment areas.

  2. The format has no magic number - no value to check to make sure the image is the right format. GraphicFont will crash if passed a regular GIF image.

  3. You cannot make fonts with any other colors except black, white, and grayscale values.

  4. Up to down and right to left rendering is not supported.

  5. There is no easy way to combine glyphs to make others.

  6. Kerning is not supported.