Pixel perfection

Fonts are made of vectors, but computer screens have pixels. When fonts are displayed on the screen, the vectors are rasterized. This is done by laying out the vectors across the pixel grid. Pixels that fall completely on the inside of the vectors are turned black, pixels on the outside stay white, or whatever your foreground and background colors are. Pixels on the outline get some shade of grey, at least as long as anti-aliasing is applied. Hinting does have some effect, but the basic principle stays the same.

Calculating pixel size

Now, the effective font size on the screen is determined by the PPM (pixels per em) value. This value, surprise, surprise, tells you how many pixels are used per em, duh. Glyphs measures all sizes in units. The UPM (units per em) value tells you how many units there are per em, double-duh.

So if we want to know how many units represent one pixel, we need to know the size at which the font is used on screen, i.e. the PPM, and the coordinate resolution of the font file, i.e. the UPM. Then we divide the UPM by the PPM, and we know the unit size of a pixel. It’s that easy. If the resulting value is not a nice, round number, then you may want to alter your UPM in you Font Info (Cmd-I).

• Example 1
  we’re going to use our font at a size of 20 screen pixels, thus the PPM=20. The default UPM value is 1000. Now remember: UPM÷PPM=size of one pixel, so one pixel on the screen corresponds to 1000÷20=50 units in the glyph.
• Example 2
  we’re going to use our font at a size of 16 screen pixels, thus the PPM = 16. The default UPM value still is 1000, so we calculate: 1000÷16=62.5, duh. Not a good number. What are we going to do now? Fear not, let’s first see what would be a better number. I suggest 60 instead of 62.5, because it’s close enough and it is a nice round number. Now, open your Font Info (Cmd-I) and change the UPM value to (Size×PPM=) 60×16=960.

Make sure you don’t get too far off the original 1000 value. Different applications seem to tolerate different UPMs. Experience shows it starts to get hairy at 3000 UPM.

While we’re in the Font Info, you may want to go into Other Settings and set both the Grid Step and the Subdivision to your pixelsize.

Drawing with pixel precision

Now, when you draw your shapes in Glyphs, you’ll see a grid in the background indicating the actual screen pixels for the given PPM. If you stick to that grid, the output will be pixel-perfect for the PPM you chose plus all multiples thereof, e.g. if you draw for PPM=16, then it will also look good at sizes of 32, 48, 64 and 80 PPM.

This is the symbol from above at 16 PPM:

Of course, it’s not going to be pixel-perfect at most other sizes. Any user who chooses to have a non-native screen resolution, and any user who uses zooming, will not see the pixel perfection we have just spent our blood, sweat and tears on. So, for example this is the same drawing at 21 PPM:

But since we cannot force people to use the settings we’d prefer for our vectors, that’s simply how far pixel perfection goes. Duh.

Retina display, anyone?

With the advent of high-resolution screens like Apple’s Retina displays, the need to optimize for the screen is vanishing. In any event, you do not need any further optimization for HD monitors. And for desktop displays, not only the high pixel resolution counts. Keep in mind that fonts also take advantage of subpixel rendering, which effectively triples your horizontal resolution. Triple-duh!

But what does that mean for us? Ever noticed what pixel-perfect GIFs or PNGs look like on a Retina display? Yeah, they look fuzzy, don’t they. You can replace them with an SVG or a webfont, and save the need for pixelized icons, effectively saving you from making extra versions for Retina and non-Retina displays. Plus, a webfont can save a lot of bandwidth if you use a lot of icons on your website. Double-win, high five!

Update 2012-19-12: fixed a few typos and changed ‘at any other size’ to ‘at most other sizes’
Update 2022-16-08: minor formatting changes.