Pixel Placement of screen fonts with FontForge

A brief FontForge howto on fine-tuning kerning and advance width metrics of fonts designed for screen use.

Above is a screenshot of Oxygen font at a point size of 144 pts per em (ppem) at 96dpi in FontForge’s ‘Advance Width Metrics’ window. There is little point editing the metrics of a font designed to be used at sizes 8px-14px at this large size of 144ppem, as character/word spacing at small sizes will be a matter of a few pixels or fractions of pixels. Getting spacing correct at larger sizes will not mean the spacing will be correct at small sizes. To accurately edit the subpixel spacing of small screen fonts you need to edit the characters at their native size, but that can be difficult due to the very small sizes of these glyphs. However, in FontForge the font size previewed when editing metrics can be set to any ppem size and dpi, and the user is also able to zoom in and out of the rendered text to study the placement of pixels at the specificied point size. Below is Oxygen font at 14ppem / 96dpi, but magnified x4 to view the details of pixel placement of the characters and their spacing. This tool allows effective and accurate fine tuning of font metrics on fonts designed to be viewed at small sizes on screen. Below we can see that at 9pts per em the right side bearing of the ‘commercial at’ character is too narrow. At 144 ppem (above) the size of the side bearing is ‘correct’, but at much smaller text sizes the ‘commercial at’ glyph snaps to the pixel grid too close to the following glyph. So the right side bearing of the ‘commercial at’ glyph needs to be increased so that it ‘snaps’ to using more pixels. In this case, at 151 units the right side bearing snapped to the grid and used 2 pixels instead of just 1 pixel. We can also see in the example below that the right side bearing of the lowercase ‘n’ needs to be adjusted to use 2 pixels instead of 3 pixels at 14ppem.

Below the right side bearing, from 142 to 151, the correct pixel ‘snap’ can be found that will result in correct spacing at this small text size (above, right)

This procedure must be carried out for all glyphs, at each ppem size, for example a range from 8ppem to 16ppem. A lot of fine tuning is necessary to ensure that glyphs that snap correctly to the pixel grid at every ppem size. Below are the lowercase ‘n’ and ‘o’ glyphs fine tuned to snap correctly to the pixelgrid from sizes 8ppem to 13 ppem.

These tools also help in the fine-tuning of glyphs themselves. The lowercase ‘a’ of oxygen was conceived as having a relatively low placed bowl, but this meant that at smaller ppem sizes the bowl became ‘too small’ and quashed (see fig. 1, below). By fine tuning the shaping and position of the ‘a’ bowl whilst monitoring an enlarged 9ppem sized ‘a’, it’s easy to find the exact point where at 9ppem the upper arm of the bowl snaps upwards (fig 2, below) to prevent the quashing of the bowl. As seen in the screenshots below it took very small raising of the bowl and some reshaping of the upper arm of the bowl to raise the bowl whilst also retaining the integrity of the original design.


fig. 1 Original design of lowercase ‘a’

fig. 2 Finding the ‘snap point’ for the central arm of the lowercase ‘a’.

fig. 3 Reshaping the central arm of the lowercase ‘a’ whilst retaining the correct ‘snap point’.

Leave a Comment

Your email address will not be published. Required fields are marked *