BitFontReader documentation

This is a minimal documentation for BitFontReader (HTML5, Flash).

Making fonts

Creating fonts for BitFontReader is easy - all you need is a pixel art editor of sorts, and a bit of patience.

A pixel font is a horizontal strip with symbols, such as this:

The details that you should be aware of are as following:

Colors

Pixel fonts naturally only contain two colors - foreground and background. BitFontReader will assume background color to be the one in top-left corner of your image, and any other color to be foreground.
This means that you can draw fonts with whatever palette you find appropriate, as long as there is a consistent background color:

Baseline

The left-most column of pixels in the image determines the baseline. If a foreground pixel is placed in it, font's baseline will be set to the "level" right below it, meaning that the row containing that pixel will be "sitting" on the baseline:

Sizes

By default, each pixel in source image will produce a single pixel in resulting font. However, if your font is small enough (6px or less), this may not be the desired effect, as BitFontMaker appears to be setting line height/spacing to 12 pixels.

This means that a 5px font will have enough line spacing to fit another line of text between any given two.

Scaling the font 2X, however, will get you line spacing of 2px, which looks about right.

Options work more or less just like one could expect them to, generally:

The bottom row

The bottom row of pixels in the image is used for hinting spacing before symbols and belonging of groups of pixels to a particular symbol.

This means that you should not have your fonts overlapping that row:

Use of hinting is covered in later sections of this document.

Symbols

Symbols in source image are found automatically, while you specify what each recognized symbol actually is.

The way this works is that the program searches for non-empty (containing at least one foreground pixel) columns of pixels, and considers adjacent non-empty columns to belong to the same symbol.

For a better example, consider the following:

• Symbol 1 (black A) is the most common scenario in fonts. All pixels are connected, and program will always detect such symbols correctly as long as you keep some spacing between symbols.
• Symbol 2 (blue %) is a slightly less common scenario that still always works. Pixels are not connected, but occupy space in adjacent columns, meaning that it will still work fine.
• Symbol 3 (green !) is a situation where you should be paying attention. "Dot" pixel is detached, but resides on a column adjacent to ones occupied by the main shape, thus will work correctly.
• Symbol 4 (red ") is the error case. Two groups of pixels have an empty column between them, which will cause the program to incorrectly detect it as two separate symbols.
• Symbol 5 (gray ") is a fix to previous case. Using the bottom row of pixels in the image, you can tell the program that given 3 columns of pixels belong to the same symbol. Bottom row is not printed into symbols, so it will look and work fine.

Spacing

By default, BitFontReader will detect spacing automatically,

Spacing between characters is set to the interval between first two non-space characters in the image.

Space (" " symbol) width is set to with of first space in the image, but, unfortunately, BitFontMaker currently does not have support for custom space width, having it set to 5 + spacing on export, meaning that adjustments have to be made to exported fonts separately.

If you need to add extra space before a particular character (for example, to have a 4px wide monospace font), you can do so by adding a line to the bottom row of pixels:

FAQ

• Why doesn't my font fit in the editor?
  BitFontMaker 2 supports fonts up to 16px tall, which includes 12px above the baseline and 4px below the baseline. If you have picked a scaling option that boosts the size past the maximum, you can reduce the scaling. For fonts initially above the limit, there currently aren't viable workarounds.
• What is this made in?
  Haxe. HTML5 version is compiled with use of my own openfl-bitfive.
• Couldn't you instead use TOOL_NAME with plugins A, B, and C?
  Maybe so, maybe no.

Haven't found an answer to your question? Ask me, maybe?