Web Typography Done Right

Typography is often a mixed blessing for the web: Developers tend to overlook it since it does not play an important part in their interests, and designers sometimes are disappointed about the limits of the web, compared to print design.

And yet typography is what truly makes the difference these days since more and more websites focus on textual information instead of crowding the pages with full-size background images and Flash elements: after all, we are not in 2007 anymore.

Choosing a proper typeface is one of the most important starting points when dealing with the design of a new website, and at the same time, it's still a field in which substantial mistakes can be made. Developers with little or no design knowledge may assume that only the standard MS Word fonts should be used, thus opting for Arial or Verdana. While professional designers will simply reject that choice since there are many other fonts which look much better for use in body copy.

Let’s make it clear: There’s nothing terribly wrong with Arial or Verdana since they were designed to look sharp and clear on a monitor even at small sizes. Often we cannot say the same for other print designers’ top-pick fonts that on a monitor look messy and blurred if used in small sizes. But Arial and Verdana bring two problems: the first is that they don’t look alike on Windows and MacOS, and second is that they are so widely used (often in unspecialized environments) that they will make your website look like millions of other websites from the past (and not that professional, right?).

So far, the best option is to use a free web font, even better if served by a CDN, like Google Fonts. Open Sans, Source Sans Pro, Ubuntu, Roboto and many others are really good fonts that look consistent on Windows and MacOS. They are easy to implement too; just keep in mind that, since they are so good, everybody is using them now, and in a short span (trends are running fast, you know) they will eventually look as boring as Arial and Verdana. So why not buy your font? There are many inexpensive and fantastic fonts available, designed specifically for web use, that for less than 50$ will give you that spark of individuality that will make you stand out.

One last hint: A lot of designers and developers are working on MacOS and don’t bear in mind that ClearType, the text-rendering engine of Windows, produces slightly thinner fonts. So, if you choose one of these super-stylish-ultra-thin fonts, use it only for big headlines; otherwise, it will be almost unreadable. And don't forget to run real cross-browser testing since it’s the only reliable method if you want to target the widest audience in the best way possible.

When you visit a website that looks professionally composed you may be tempted to borrow some of its features, such as the fonts. But if you’re wondering why your text doesn’t look as appealing, you should consider reviewing a couple of paragraph settings. The most important being surely the leading or vertical spacing. It sets the vertical rhythm of your text and its value should be not too high or too low. Don’t set it in pixels, because if you scale the text within certain resolutions (a good practice), the leading won’t scale accordingly, creating an awkward feeling. Set leading spacing in em instead; a value between 1.25 and 1.5 should be fine.

You also have the possibility to modify tracking (letter-spacing in CSS) to improve the readability or the appeal of some typefaces (a common trend nowadays) but this requires a well-trained eye, especially when working on the body copy.

And please do not justify text: Although it has always been common practice in print design (and a must in MS Word), in web design you don’t have hyphenation (well, let’s talk about that later). Also, you lack all the sophisticated instruments that Adobe InDesign uses to make the lines look balanced. So, text justification in the web will almost always give an unpleasant and hard-to-read result.

One last note about hyphenation. It’s not true that you can’t use it at all but overall support is not good (Chrome can, at present, only handle it on Mac, for example) and you have to rely on a combination of hyphens and word-break properties for decent coverage. If you need to use hyphenation with a certain degree of reliability, you can try Hyphenator.js.

Good text is made even better with small details. Not using the right glyphs for some special characters can make your perfect post start to look sloppy. Here’s a short list:

We can't have a post about typography without mentioning mobile web design best practices. When setting up a font scale system, a typical error is to define for mobile viewports a font size that is smaller than the one used for low-resolution laptops. While this has a certain logic to it (the lower the viewport resolution, the smaller the font), it will make the text too small and hard to read since a mobile phone’s screen is not a shrunken laptop screen but rather a small portion of it. So if 10 – 12px could be a good font-size for a 1024 – 1280 resolution, it would be recommended to use 12 – 14px on a mobile phone.

Finally, try to avoid long text boxes. The ratio between the font size and the text box differs dramatically from desktop to mobile, and while your post could comfortably fit your laptop screen, on your phone it may require you to scroll several times before reaching the end. Eventually, it may be perceived as too long and, possibly, skipped. Of course we cannot write different text for desktop and mobile, but we can use a clever trick: our brain perceives a post as too long depending on the time it takes to reach a breakpoint rather than its real end, so we can use sub-headlines more often to make our brain take a break before continuing.

Thankfully there are lots of inspiring possibilities that were pretty much a risky adventure in the not so distant past. Working with text on the web is definitely more playful now, and the only price to pay is following just a few simple rules. A pretty fair bargain, don’t you think?