Typography of Our New Website

This is the next in a series of posts on a case-study of the re-design of our website. In the last part we looked at what our goals were and how we created our constraints around these goals. In this part we're going to look at how we set our type, how we chose the fonts and sizes, and how this relates to our goals.

95% of the web is simply typography—words on the screen. Good typography can totally change how a design is received, and ultimately how successful it is.

Chosing a Font-Face

Typography starts with the face; the actual “font”, but it is more than that. Our company font is “Helvetica Neue”. This is the font that's used in our logo and using it on our website and in our marketing material helps lend to the continuity of our brand. There are 3 problems with this font though:

  1. Lighter varieties are not clear at normal reading sizes

A font can come in numerous weights. Weight refers to the width of the stroke—the lines that make up the glyph—which is the specific rendering of a letter or character for that font.

As you can see in this image, as the weight gets lighter, it becomes less legible. These are all set at the same size as our normal text on the website.

The 100% easy-to-read standard says that text should be set at at least 16px to make it easy to read at normal screen reading distance. This varies depending on the size of the glyphs in your chosen font-face, but it should usually be set larger rather than smaller.

We set our text at 18px here. The lighter Helvetica Neue varieties simply don't look good at this size.

  1. It has ambiguous glyphs for certain characters

One of the key characteristics of a good user interface font is clarity. You don't want to be trying to guess whether something is a capital I or a lowercase L. Helvetica Neue isn't great in this regard, as you can see in the image below, which is a number 1, a lowercase i, an uppercase I, an uppercase L and a lowercase l.

  1. Users prefer long form text (which is what we've already established 95% of the web is), to be set in Serif fonts, and Helvetica is a Sans-Serif font.

Serifs are the little lines attached to each glyph in the font, and they are the more like traditional fonts that you get in books and print media.

As a result of these 3 points, I decided to use Helvetica Neue only for headings, which are set at a larger size and therefore can tolerate a lighter weight, and aren't used enough to worry about ambiguous glyphs.

Typographic Colour

This meant I needed to chose a serif font for the main text. There are lots of things to consider here. As we've already mentioned, we want the glyphs to be significantly different, so that we don't create any ambiguity. Also, the text will need to be legible on smaller screens, such as iPhones and iPads, which means we want a font with a larger x-height (the height of the “x” character, which is usually the average height of all lowercase characters), so that it will still be clear at smaller sizes.

As a result of the desire for Outstanding User Experience, the overall “feel” of the design I want to achieve is also one of cleanliness, clarity, and minimalism; introducing lots of whitespace (the space between things), to reduce the mental stress on our visitors. This means I need to choose a body font that doesn't create too much typographic colour. Typographic colour being the colour created by the density of the text. It looks something like this:

The effect here is subtle. Both fonts are set at 18px with the same leading (space between the lines), yet PT Sans appears to be “bolder”, even though it's not. It's just the effect of the glyphs in this font, the width of the default stroke, the size and style of the serifs, the “width” of the space between the n, h, the hole in the o etc. (called the “counter”).

I need to choose a font that looks lighter—or has a lighter variety, like Helvetica Neue does.

There are a variety of tools you can use to browse different fonts. Google Web Fonts, TypeKit, & Adobe Edge being the most popular. I ended up settling for Source Serif Pro. It's a font that was designed by Adobe to be used for writing source-code, where differentiating characters is vital, so was specifically designed with that in mind, and comes with a “light” variety, so I could use the lighter version and create the feeling of space I wanted to achieve.

Whilst Source Serif Pro is of a lighter design itself, it's light version gives an even greater feeling of clarity, and has the added continuity of being designed for writing source-code; and as a software development company that felt fairly harmonistic.

Typographic Hierarchy

The next element of typesetting is the typographic hierarchy. That is the size of fonts available to us. This is similar to a musical scale, and is really easy to work out mathematically. In the musical scale, the octave vibrates at exactly twice the frequency of the original note. In the classical typographic scale, this translates to the main heading size being exactly twice the size of the main body text. If we've set our body text at 18px, that means our main heading should be 36px.

The classical typographic scale also has 5 steps, in musical terms this makes it a pentatonic scale. The “notes” of our scale are all equidistant, which means it's really easy to work them out. We end up with something like this:

There are alternative scales, but they're pretty much all worked out the same. Rather than use the classic scale with a ratio of 2, we use the golden ratio of 1.618. This is because it nicely ties in to the rule of thirds, which is what we're using to compose our layout, and helps to create a harmony between the two.

In the next post, we'll look at composition and the rule of thirds. How we've used it to construct a simple grid and how this is related to our typography.