Paul Howson’s Website

Design and Publishing Notebook

Differences Between Picking Web Fonts and Picking Print Fonts

I recently had two occasions to select fonts, one for a website project and the other for a printed book design project.

This experience highlighted the differences between the two mediums as they currently stand.

For the book project, I was testing a series of fonts for the body text. In this case the requirement is good readability. The candidates were Adobe Garamond Pro and Adobe Arno Pro, two fonts which I already had in my collection. For another recent book project I’d also tested Adobe Caslon and Adobe Jenson, so was familiar with the subtle differences between all these fonts. In the end, I decided to use Adobe Garamond Pro. It sets really well and just “gets out of the way” rather than drawing attention to itself.

The point is that at print resolutions of at least 600dpi, there are significant differences between the look and feel of these fonts at text sizes. They have subtle differences of weight and the idiosyncrasies of letterforms are quite visible.

Contrast this with choosing a font for body text for a website, using the TypeKit library. There are quite a lot of fonts on Typekit which are suitable for body copy (i.e. non-display fonts). At large sizes they all have distinct design differences. However, once you see them at “body text” sizes in a web browser, they all begin to look much the same. The simple fact is there are far too few pixels available to render the subtle differences between these fonts.

In fact what it comes down to is how well a particular font works despite the limitations of screen resolution. This depends, I suppose, on the particular glyph shapes in combination with the quality of hinting. So the choice ends up being about what looks best at text sizes, which often has little to do with what appeals about the letterforms at larger sizes.

The new high resolution “retina” displays on the 2012 Apple iPad may change this situation in the future…