Give me the Blues

Let’s continue with the automatic hinting. One characteristic property of (Latin) fonts are the so called Blue Zones. Think of the Blue Zones as the lines in your notebook from the 1st class in school when you learned writing. Translated to fonts, a blue zone is a horizontal stripe within which all points must be aligned to get evenly rendered text. The following diagram illustrates the six blue zones that are calculated in Freetype and Classpath for Latin fonts:

The blue zones are (from top to bottom) SMALL_F_TOP, CAPITAL_TOP, SMALL_TOP, SMALL_BOTTOM and CAPITAL_BOTTOM (collapsed into one zone) and SMALL_MINOR.
The above diagram can be a little misleading, as it seems to imply that these zones are lines. Which is not true. A blue zone is a thin stripe that envelopes the maxima of certain test glyphs. For instance, in order to find out the CAPITAL_TOP blue zone, we analyse the glyphs for the letters THEZOCQS. The maxima of their top points span up the blue zone as illustrated in the next figure:

Later in the hinting process we align all points within such a blue zone at a fixed height. This smooths out the vertical hoppledihopp that is visible in non-hinted rendered TrueType fonts.

Stay tuned to find out how the stem widths are comuted and what else there is done in the autohinter.


Come, die with me a little

Komm stirb mit mir ein Stück. This is the title of Wenzel‘s first LP back in 1986, still in the GDR. Last weekend I had the pleasure to meet him in a concert nearby. I must say that I am very impressed by this german bard. There’s still this youth and love and passion burning inside him. He manages to create a very special athmosphere, all alone on the stage. You know, when time stands still, this would be a good moment for the earth to stop turning around and you think you want to die a little. It’s a pity that so few people know him. Only < 50 people were visiting this concert. If you ever have the luck that he's performing near you (only likely when you live in germany. He made a US tour once with his english album Ticky Tock where he sings songs of Woody Guthrie though) then I strongly recommend you to go to the concert.

For the christmas time he was so nice to present us with one good song: Wenn wir des Nachts

Learning to Write

So I am looking into the automatic hinting right now. I always find it easier to grok something when I explain it to others, so let’s explain what I am doing right now. The automatic hinting process can roughly be divided into 3 phases:

  1. Global font analysis: Certain important properties of the font are determined and stored. The important properties for Latin fonts are the standard stem widths and the so-called blue zones. The former is the usual width of the character stems which has to be the same for all glyphs when things should look good (you know a non-hinted glyph when you see some stems 1 pixel width, others 2 etc). The blue zones are characteristic horizontal stripes, comparable to the lines in the notebook in your first year in school (namely these are capital-top, capital-bottom, small-top, small-bottom, small-minor and small-f-top. you can make up from the names what stripes these are). Later, all points that fall within one of these stripes is aligned. (Again, when you see non-hinted text the height of certain characteristic points is not regular). All this is not really performance critical as it is only performed once per font and not on each rendering of a glyph.
  2. Local glyph analysis: For each glyph to be rendered we need to detect the so-called Segments (points that form an approximately horizontal or vertical line), Edges (sets of Segments that all lie approximately on the same line. For instance, the glyph W has three segments at the top which frequently form an edge) and Stems (Segments that form the characteristic vertical or horizontal lines. For instance an I character has 1 vertical stem – which makes up the whole glyph for sansserif fonts). This is performance critical as it is done in realtime when beeing rendered.
  3. The actual hinting: With the information collected in step 1 and 2 we can now move around the outline points of a glyph so that it fits the target grid. The goal here is that points that fall within one of the blue zones get aligned into one height and points that make up a stem are moved so that all stems have the same rendered width. When this is done, the location of the remaining points of the glyph have to be interpolated so that the glyph is rendered smoothly.

I find it interesting to see what is performed behind the scenes on a normal desktop computer only to get the nice TrueType rendering that we got used to in the past couple of years.

For GNU Classpath I have already implemented most of phase one above which I will finish and test really soon plus some bits of phase 2 because that is actually needed for phase one too, after all, what is done in the global phase is to analyse a couple of characteristic glyphs.

More details to follow soon…


Go replace Firefox with The Real Browser! Here’s why:

  • It’s cool.
  • It’s fresh.
  • It’s Free.
  • Every kid around the block uses it.
  • It supports Web 4.0 right out of the box (no I won’t tell you what that is, you gotta try it out yourself)


Here’s the obligatory screenshot: