The image to the right illustrates some of the values found in the font descriptor file. The two dotted lines shows the lineHeight, i.e. how far the cursor should be moved vertically when moving to the next line.
The base value is how far from the top of the cell height the base of the characters in the font should be placed. Characters can of course extend above or below this base line, which is entirely up to the font design.
The filled red dot marks the current cursor position, and the hollow red dot marks the position of the cursor after drawing the character. You get to this position by moving the cursor horizontally with the xadvance value. If kerning pairs are used the cursor should also be moved accordingly.
The yoffset gives the distance from the top of the cell height to the top of the character. A negative value here would mean that the character extends above the cell height. The xoffset gives the horizontal offset that should be added to the cursor position to find the left position where the character should be drawn. A negative value here would mean that the character slightly overlaps the previous character. Observe that these values shouldn't be used to move the cursor position.
The green rectangle illustrates the quad that should be copied from the texture to the screen when rendering the character. The width and height gives the size of this rectangle, and x and y gives the position of the rectangle in the texture.
When the bitmap font has been generated with a baked outline, i.e. the outline is pre-generated in the font texture, the text is best rendered in two passes to avoid the outline for a character to overlap the previous character.
In the first pass the application should use only the alpha channel of the font texture as the transparency value when rendering the border.
In the second pass the application should use only the color channels of the font texture as the transparency value to render the characters over the border.
With a two-pass rendering like this it is also very easy to apply different colors to the border and the internal characters dynamically without the need to pre-color the font in the texture. The application simply needs to multiply the transparency value the desired color before blending it to the screen.