Typography

Typography helps to create a visual hierarchy that can guide users through your product in a logical and easy-to-follow manner, which can in turn help users to achieve their goals. Well-designed typography can help to give your product a more professional and polished look, which can instil trust and confidence in your users.

Don’t Use More than Two Typefaces

It’s a pretty common point of confusion, but typefaces and fonts are different things. “Proper” design professionals call them “typefaces,” while fonts are the files on the device that the software uses to display the typeface. Fonts are the paint on the palette, while the typeface is the masterpiece on the canvas.

For example, Helvetica is one of the most widely used typefaces, but a font is a particular set of glyphs within that font family: for example, Helvetica Condensed Bold, 10pt.

Regardless, too often designers add too many typefaces to their products. You should aim to use two typefaces maximum: one for headings and titles, and another for body copy that is intended to be read in depth.

Use weights and italics within that font family for emphasis—rather than switching to another family. Typically, this means using your corporate brand font as the heading, while leaving the controls...

Users Already Have Fonts on Their Computers, So Use Them

Yes, your corporate brand font is lovely. It’s so playful and charming but it delays the web page display by 4 seconds as the font needs to be downloaded from the server and rendered—and nothing appears until it loads—driving your users crazy.

Including custom display fonts for headings and titles is fine; it helps to brand the product and adds some visual interest. However, using custom fonts for body copy is generally a bad idea.

First of all, these fonts have to be loaded from somewhere, whether it’s Google Fonts, Typekit, or your own content delivery network (CDN). This means that there is an overhead in getting the font files down to the user’s machine. Content-heavy pages will often break while the correct fonts are downloaded and rendered—the dreaded Flash of unstyled content or Flash of unstyled text.

Secondly, if, by specifying wild and wonderful body copy...

Use Type Size and Weight to Depict an Information Hierarchy

This is a simple, but effective, method for organizing your views and making them instantly understandable for a wide range of users. Let’s look at an example of how not to do this in an imagined “Calendar” app user interface:

Figure 10.1: This example shows all the type in the pop-over at the same size and weight

Simply by altering the type size by a noticeable factor, we can show the user the most relevant information first:

Figure 10.2: This example shows how using different type sizes (or weights) can help differentiate information

Scale up the information that you want users to see first, or that you think they’ll find most useful, and they can read on further for extra detail.

Another option is to use type weight instead of scale, as in this example. Using a selection of bold, regular, and light typefaces has a similar effect to altering type size, but reduces...

Use a Sensible Default Size for Body Copy

Your customers will be reading a lot of text across your app or site, so how big should the type be?

The days of fixed-size type are long gone. Most browsers on desktop and mobile will let users scale type up and down, switch into “reading mode,” and apply system-wide accessibility settings, like large type and high-contrast colors.

With that in mind, all you’re doing here is setting the default type size that appears when the product is first opened. Ideally, the type should be big enough to be readable, but not so big as to overwhelm the user or take up too much space in a crowded view.

Body copy in 16px, with a 1.5 line height and “auto” or “default” character spacing, is usually a safe bet and a good default for the vast majority of your users.

This can be achieved easily with the following CSS:

body {
    font-size: 16px;
    line-height: 1.5;
}

Trying to set your...