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.

Have a cup of coffee and think about the font first

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.

Paragraphs in order, please

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.

Justified text

Left-aligned text (default mode)

Justified text with hyphenation (not widely supported)

Justified text with hyphenation (not widely supported)

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.

There’s more hidden in the keyboard

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:

  • Use “smart quotes” instead of ”dumb quotes”.
  • En-dash (-) and em-dash (–) look different.
  • Don’t be scared to use accents: résumé is much better than resume.

If you are on a Mac, don’t be lazy: it’s really easy to access special characters like ÷. And you can also quickly type all the ä, ü, ø, ç … of these stylish European languages.

A note on mobile typography

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?

More great blog posts from Alessandro Lo Verde

  • Grill.rb and Grill.js: One part food, One part drink and whole lot of programming

    Suppose that you want to buy a grill to have a small party with a couple of friends, and then you realize that you’ve placed the wrong order since a monster sized grill arrives at your door. You probably want to send it back, trying to explain that the size was missing from the item’s description...

  • This is how business gets done: Nuremberg Airport and Scrivito

    There are good CMS's out there, and many are fine tools to make blogs, websites for small business and even for a medium-sized one; but can they handle a large website, with a lot of data interaction that comes from external sources? What comes up if you need to build an intranet as well?...

  • Get a better view: The Magic of Viewport Units

    Viewport Units are a fine addition to the new CSS3 properties and allow us to calculate dimensions according to the actual size of the viewport, instead of the parent element (as it’s always been so far). There is a new precious tool for better and easier responsiveness that leads the way to a...

  • Reverse Box Order on Mobile

    It’s a pretty common trend for many presentation websites to have a 3-column “feature box” where products or features are showcased. Since on mobile they would be squeezed too much, it’s a best practice to make these boxes 100% wide and place them one under each other, following the same order...

  • Getting Out of the Fixed Container

    Most of today's websites use a wrapping container element on their pages – for good reason: it’s handy to have an element that surrounds the content, allowing it to shrink and expand to given breakpoints. But our beloved container can sometimes be a prison (and not even a golden one) when we want...

  • Let's Embrace CSS3 Calc()

    Powerful and widely supported, this handy CSS3 property helps save us from headaches when dealing with layout and box model. Back in the day, everything on the web was coded in pixels, but as the desire for flexible design arose, font sizes were frequently defined in ems and more recently in...