Understanding Digital Typography

Digital Typography. What is it? Is it relevant to you? Let’s start with this typeface: Helvetica, one of the most popular typefaces in graphic design. You may have subliminally seen it in the branding of Nestlé, Panasonic and American Apparel.

As typefaces go it may not be much to look at, but its appeal is simple: trustworthy, readable and versatile enough to adapt itself to different brands and messages. It’s even been the subject of its own TV documentary, about the effect of graphic design on visual culture.

Think of other omni-present brands like Apple and TFL: we have only to glimpse their branding before recognising them, but a huge part of what we are responding to is the distinctive typography. The video streaming website Netflix have just launched their own typeface to be more in control of the user experience online.

How you use digital typography on your own website can work the same way.

Why is digital typography important?

Typefaces have huge potential to express your brand’s personality, while enhancing the style and tone of your content. Used creatively, typography can even provide enough visual stimulus to save the need for lots of images, which is good news if you want your website to carry a lot of written content.

Choosing a strong typeface to suit your brand is one of the most important decisions you will make when designing your website. Well used typography will tell people at a glance that you’re a professional and speed up your conversion rate.

How do you decide what typefaces to use?

The number one aim of digital typography is to make your content more dynamic, and to enhance and reinforce your ideas. You should firstly be asking yourself the following questions when reviewing the text you are publishing:

• Who is your target audience?
• What do you want them to read?
• Where will they read your text?
• How should it be read?
• On which medium will the text be?

Once you have established these metrics, here are four basic guidelines to choosing the right typefaces:

Guideline 1: Serif or sans serif?

These are the two distinguishing styles of font. A serif is the stroke of line on each letter, Times New Roman being the most recognisable example. Typefaces like Arial and Helvetica are all sans serif (‘sans’ being the French word for ‘without’).

Serif styles have traditionally been associated with print but are becoming more popular in web design for their more expressive characteristics. Sans serifs, on the other hand, are reliable digital fonts given that they’re clearer and easier to read on screen.

Guideline 2: Establish a content hierarchy

Good websites have a visual header with clearly defined levels beneath that guide the reader’s eye down the page from heading to heading. You can direct people’s attention to important information by using two different fonts for header text and body text. Use two or three different weights for emphasis (regular, bold, italic, narrow etc).

Guideline 3: Identify the voice, style and tone of voice of your brand

A bold and expressive serif font will not necessarily convey the correct tone of voice for a chartered accountancy firm as it would for advertising agency. The reverse is obviously true as well.

Guideline 4: Be consistent

Make your typography consistent if you want it to become identifiable. Once chosen, you should use the same typefaces, weights and height sizes.

This blog post, for instance, has consistent styles for sub-headings and body text.

Common mistakes to avoid

Digital typography can be an exacting science to master, and not all of us are savvy graphic design students. But there are a few simple errors you can watch out for:

• Never mix more than three typefaces on your web page, or you risk making the content look chaotic.
• Mismatched font weights (stick to using the same typeface in different weights if unsure).
• Poor content hierarchy with too many paragraphs, and no clear distinction between header text and body text.
• Too much/too little spacing between lines (known as leading).
• Uneven spacing between letters (known as kerning).

And if you’re feeling creative…

The design possibilities of digital typography have exploded in the last two years. We’ve seen the emergence of an increasing array of new typefaces, animated fonts, and the popularity of pictograms and emojis to make content more decorative. Headings and paragraphs have become larger and bolder, and empty space more aesthetic, all seen in the striking new Dropbox web design.

Cursive fonts can also be incredibly versatile and often make attractive headings, with their imitation of handwriting and expressive lettering.

Graphic design trends point towards more animation and more illustrative text on websites by 2020, matching the trends of online behaviour and our preference for video. And if you thought the day when websites could speak was a long way off, then the future’s closer than you think.