iDEA Inspiring Digital Enterprise Awards

Typography

Even something as simple as the font you use can affect the user experience of a visitor to your website. Let’s see what you think the following typefaces reflect:

What would you associate with this typeface? Pick the word below that you think best describes it.

Incorrect

Hmmm. You disagree with most people. Most people think this font looks traditional or serious.

Correct

You agree with 0% of people. Most people think this font looks traditional or serious.

What would you associate with this typeface? Pick the word below that you think best describes it.

Incorrect

Hmmm. You disagree with most people. Most people think this font looks modern.

Correct

You agree with 0% of people. Most people think this font looks modern.

Serif fonts

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

Serif fonts are a typeface where the letters have a small line attached to the end of a stroke in a letter or symbol. Sometimes, serif fonts are referred to as 'Roman' fonts.

Serif fonts are often seen as indicative of tradition and professionalism. Newspaper websites often use them to convey importance.

Sans-serif fonts

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

The letters in a san-serif typeface do not have extending features (serifs) at the end of the strokes in a letter or symbol. They are often called Grotesque/Grotesk or Gothic.

Sans-serif fonts are used to evoke a feeling of modernity. Large technology companies such as Apple and Google use sans-serif fonts to appear on the cutting edge.

Dense and
Intimidating Text

Disjointed and flighty text

Letter spacing

The space between the letters in your content can also have an effect on your visitors’ perception of your website. Too little space and the content can appear dense and intimidating. Too much, and your content can appear disjointed and flighty.

Based on what you've just learnt, select the most appropriate typefaces for these websites.

What sort of typeface would you pick for

A website for an organic food company?

Correct

Correct!

A sans-serif font is perceived as modern and fresh which reflects the nature of the business.

Incorrect

Hmmm. Are you sure?

What sort of typeface would you pick for

A newspaper site?

Correct

Correct!

A serif font reflects the gravitas and seriousness of the news.

Incorrect

Hmmm. Are you sure?

What sort of typeface would you pick for

Medical information?

Correct

Correct!

A sans-serif font reflects modernity and appears more clinical than a serif font.

Incorrect

Hmmm. Are you sure?

What sort of typeface would you pick for

A magazine aimed at pre-teen/early teen girls?

Correct

Correct!

A sans-serif font reflects the modern and less-serious nature of the target audience.

Incorrect

Hmmm. Are you sure?

Correct

Well done!

We’ve looked at colour and we’ve looked at typefaces. Next we’ll look at how image can affect a user’s first impression of your website.

Next Step