Typography: From Points to Pixels

Facebook0Twitter4Google+0LinkedIn0Pinterest0Reddit0

Seven things print designers need to know about web and ebook typography 

As the market for printed matter continues to slowly decrease, the web continues to grow, and ebooks are going from nothing to huge almost overnight. The result is an increasing number of print-focused graphic designers who need to learn the new media. I call them “print refugees,” only half in jest. In today’s tight economy not everyone even has a truly free choice about which work they pursue.

Great typography can be achieved on screen or in print. But there’s no question that these media have fundamental differences. Luckily, recent advances in web and ebook standards mean that typography for screen media is becoming more sophisticated than ever. But it’s still different than print. Here are seven big considerations for designers moving from print design to design for the web and ebooks:

1. Layout is dynamic

You usually don’t know what the size and resolution of the viewing device is going to be. Will it be a computer with a 20-27″ screen and HD resolution, a 7-10″ tablet, or a smartphone? Do you even know the screen orientation for sure, or could it flip? Because of all this, your content has to reflow cleanly. Headlines may sometimes wrap even though you think of them as single-line. To accomodate really extreme change, you need to consider adaptive layout. This is a broader issue than typography, but it certainly affects the typographic choices as well.

2. Color changes are free (but misused)

On the plus side, color doesn’t cost anything on the web, on computers, tablets and most smartphones. On the downside, e-ink devices (like many models of the Nook and Kindle) turn color into black and white, and for web sites, color and shading are often overused.

The big problem isn’t really color, it’s contrast. The meme seems to have gotten into web designers’ heads that lower contrast between text and background is more elegant and subtle, and hence better. Unfortunately, as often as not, they go too far, and end up with sites that are either inherently unreadable, or are unreadable under non-standard but common conditions (like an iPad or laptop in direct sunlight). This issue was one of the key factors in my Legibility Manifesto presentation for AIGA’s “Social Studies Conference” (watch the 15-minute video), and is the core of the Contrast Rebellion.

Contrast Rebellion web site

Contrast Rebellion web site

3. Pixels are free, too (but not used enough)

Paper costs money. So does bandwidth, but pixels per se don’t consume bandwidth. Think about the small text and cramped line spacing you see in newspapers. The only reason to cram stuff in is when your content is being viewed on a small device. But when space allows, you can use bigger type and more generous line spacing (print refugees will call it “leading”).

I cover this in more depth in my talk on setting type for the web (#2 in the best practices series on my resources page), but in short, for layouts being viewed on larger screens, I suggest you think of a default body text size can be around 14 px, and your default line spacing for body text can be 150%. Of course, you can go up or down from those starting points….

4. Font availability is different

For the most part when designing for print, you can use any font you already have (with rare exceptions). Any other font can be licensed at a pretty standardized price. The web is…different. The good news is that recent innovations in browser support for arbitrary fonts mean that you can use all sorts of fonts via @font-face and hosted equivalents, such as our own WebINK. You’re no longer restricted to “web-safe fonts” from a dozen families. For a minimal fee, you can select from over 4000 fonts available, with more coming all the time. Plus, it’s easy to use. If you want to your fonts for free, you’re pretty limited, and if you want to host them yourself it’s complicated and browser support may be more limited (depending on licensing issues).

5. Font fallback is at the end user level

In print, you specify the font, and you can be sure it will get used. On the web, if you use traditional web-safe fonts, it means usually people will see the right fonts…or your next fallback choice if they don’t have your first choice available. Using @font-face or a web font service like WebINK, you can increase your chances of “getting the font” as high as 98-99%. If it’s an e-reader situation, many existing e-readers don’t use publisher-specified fonts but instead use system fonts only. This is changing moving forwards, as epub 3 supports embedded fonts, and all the major vendors have announced epub 3 support for the future, even Amazon (though whether they will all support the embedded fonts angle is TBD). But it’s still a probability thing, and it all depends on what browser or e-reader people have and potentially on which fonts they have on their viewing device. It’s all probabilities. For the web, the odds are in your favor; for e-readers, the story is still evolving.

6. Resolution stinks (pick text fonts carefully)

Sure, an iPhone has 326 pixels per inch. At that resolution you can often use the same fonts as on the desktop. But many devices offer worse resolutions, typically 96-132 ppi, and the appropriate font choices tend to be quite different than those for print. Sans serifs and slab serifs tend to be ideal for body text on screen across a range of devices and resolutions.

But if you need those fonts to look good in all environments, and at small pixel sizes, your selection is further limited, often dramatically so. For WebINK, a live person (sometimes me!) actually rates every single darn font as to its minimum pixel size, even in the worst case environments (usually meaning Windows XP with ClearType off). Drill down to the individual font page and you’ll see that number on the left. For fonts from other sources, you will need to test, test, test!

7. Kerning and ligatures are off by default in today’s browsers

Many browsers don’t support these standard features of print publishing, which happen automatically in applications like Adobe InDesign and QuarkXPress. You can turn them on by using “text-rendering: optimizeLegibility”, which works in current versions of Chrome, Firefox and Safari, assuming that your chosen font has kerning and ligatures available. (Some folks choose to strip these in making “web” versions of their fonts. We try to keep them for WebINK fonts.)

What is kerning? It’s reduced or increased spacing between specific letter pairs. Kerning information is usually baked into a font.

Kerning: top line with, bottom without

Kerning: top line with, bottom without

What are ligatures? They are cases where letters are merged together as a single shape to present a more pleasing appearance. Ligatures can help avoid awkward collisions (as sometimes happen between “f” and “i” for example), or to resolve spacing problems. Most western fonts have at least fi and fl ligatures; some have many more.

Ligatures: top line without, bottom with

Ligatures: top line without, bottom with

Some things are still the same

In the end, there is one constant between typography in all media. It requires an obsessive attention to detail to do well, and most people viewing it will never be aware of what exactly is going on. It’s like watching a movie: people can tell when it’s done well, even if they are never consciously aware of exactly what techniques the filmmaker used. Your sites will look better, and your clients will thank you for it, even if they don’t know what the heck you actually did.

One Response to “Typography: From Points to Pixels”

  1. James Souttar

    This is a very well thought out, well expressed piece – full of good advice. However (as a print typographer who has followed the web from the beginning) what I would observe is that recommendations for typography on the web have always been provisional – compromises for the state of technology today, which have been superceded tomorrow. At this point, it seems pretty clear that we will soon have much higher resolution screens across the board (top of the range MacBook Pro today, bargain basement e-book reader in a couple of years) and that the implementation of CSS 3.0 will finally deliver the possibility of very refined typography in digital media. It’s amusing, in a way, to see how web designers used to dismiss ‘brochureware’ a few years ago, yet are struggling to get up to speed with kerning and ligatures today. The skillset of print typography has held up well, whilst those of web typography have had to be continually upgraded.

    Reply

Leave a Reply