Madness and You, Perfect together!

  1. Top of Page
  2. Main Menu
  3. Page Content
  4. Page Extras
  5. Bottom of Page

glKernedFont - How it works

So how did I add kerning to textured fonts? By simply storing six extra numbers per font containing everything we need to handle the spacing of most latin characters. I'm creating those numbers by hand for now since it's nice to be able to tweak them - but I plan on trying to put together a tool to automate the process. Thankfully it is not neccessary to check every scanline for distance with Latin characters since they for the most part all follow the same basic structural rules.

Typography terminology

Before we dive too far into this I figure I should cover some basic terms that programmers may not be familiar with.

The space between characters, including the behavior of how certain types of characters can overlap each-other on a square grid.
A styled letter from a font. Aka a character as the font would render it.
The baseline is where the bottom of the majority of text characters sits. It is from this point at the bottom that most fonts are created so they 'line up'.
This is the top of the average capital letter. Some characters might end up taller than this when they have swashes, raised bowls, etc - but that really shouldn't effect our kerning.
Between those two is the meanline, which is the top of the majority of lower case letters. Some letters like "b" and "l" go past this, but really this is a point we are really interested in if we want to kern letter combinations like "ToT" correctly.
Cap Height
Space between the BaseLine and CapLine
The height of a lowercase "x", should in most cases be the same as the space between the meanline and the baseline.
The part of some letters that goes below the baseline - the letters "gpq" all have 'descenders'
Parts of a font that end up above the capheight. Some fonts may in fact do this with their serifs.
Extra bits of a font apart from the main 'bars' that make it up. These extra little flourishes have nothing to do with the actual letter, and are there just to look pretty. In screen rendering serifs often end up looking bad and/or making text hard to read, which is most website content areas are done in sans-serif fonts. There are a whole host of terms for the types of serifs - stem, spur, swash, terminal, teardrop, loop, ear - too many to truly explain here.
I shouldn't have to explain this - sans means without, so a sans-serif font lacks those extra bits.
A horizontal line in a glyph, like that at the top of the letter T.
A vertical line in a glyph, like that in the letters E, T or L.

For a visual explanation of all the various bits and pieces of a font, this reference at is one of the best I've ever seen. You also may want to visit their Font terminology page as it is a great resource.

Over the next few pages, I'll be using most of these terms a good deal as I explain how glKernedFont works.

  1. Top of Page
  2. Main Menu
  3. Page Content
  4. Page Extras
  5. Bottom of Page