photo credit: law_keven

This post is part of the “Be nice to your users” web UI design series.

There are many things that contribute to the rise or fall of your website. Anyone, and Google especially, will tell you that content is king. You have to have good, original content. Your site needs to be original, provide good value for your users, etc etc.

But there are always those small things that can make or break it for you.

Design is one of these things.

A good design can make or break you. It’s a fact. Websites can no longer live on content alone. It has to look nice, and it has to feel good. Human beings are aesthetic creatures. We like things to look good, and if your website looks bad – well – your users are going to go somewhere else.

I won’t focus on badly designed websites. The nature of the Internet is that designs change, and sites I may link to here today may no longer look like this in the future. If you want to have a look at some bad design examples, go over to the webpages that suck website and have a look around.

I want to talk about typography.

Typography is fashion

Like everything else about website design (and really, any design at all) – typography is a matter of fashion. It changes, morphes and is being reborned every few months.

Think about webpages from the nineties: default fonts (or worse – Comic Sans), default spacing, awful colors – you get the drift. Reading the web was just not a happy activity.

But design changes. With the emergence of Web 2.0 – we got a lot of white space. Websites today are more airy – there’s a lot of empty space, that brings the actual content to the front. Be it images, blocks of text, or videos – they stand out, because there’s so much white (or other non-obtrusive background color) around them.

When your text stands-out on the merit of it being the black spot in all this white – you don’t need to draw a lot of attention to it based on font, loud colors and size. That being so, designers started making the fonts blend in more with the general background. White background received grayish texts, with large line-spacing, and all was well.

Additionally, we started using larger text size to draw attention to specific parts of the page. The slogan, the mission statement, etc. (See picapp for example)

Websites started using texts as logos, and even when these are images – you still read them.

The font stack

It was only a matter of time until a common font-stack started appearing in all websites. In 2008-2009 many websites switched to the Lucida stack :

However, today (mid-2010) we see more and websites go to the Helvetica and Arial option, which I personally find better on the eyes. Also, and that’s a very important consideration when you’re trying to create an authoritative or business website – fonts have feelings.
That font feeling

It sounds a little silly, I admit, but think about it. Fonts have feelings attached to them. Even if you don’t sense it upfront – it’s there. Have a look at the following fonts, see what you make of them:

I am a very respectable website. I am an authoritative source of information about all things electronics. The writers here know everything there is to know about the gadgets they are reviewing. Really, you don’t need to look anywhere else – read it all here, and buy from me!

What did you feel about this text? Did it convince you? How about if it looked like this?

I am a very respectable website. I am an authoritative source of information about all things electronics. The writers here know everything there is to know about the gadgets they are reviewing. Really, you don’t need to look anywhere else – read it all here, and buy from me!

Ok, so the second example is maybe pushing it a bit too far, but the point I am trying to make, is that some fonts just don’t come across as serious enough. The Lucida stack, or the Comic Sans MS fonts give your users a feeling of reading a childrens book – not a serious website.
For some readers (and you may be one of them) – this feeling is very subtle, but it is there.

Another issue with these fonts is that they are a bit more difficult to read, compared to other fonts. Try reading a long text in any of the Lucida family and you’ll see what I mean. The spacing between the letters, and the ‘not quite there’ shape of each individual letter makes your eyes and brain work more. I would suggest not to use these fonts for long articles…

Let’s try this one:

I am a very respectable website. I am an authoritative source of information about all things electronics. The writers here know everything there is to know about the gadgets they are reviewing. Really, you don’t need to look anywhere else – read it all here, and buy from me!

See? already better.

So fonts have feelings. In the sense that they stir specific feelings in readers. You need to make sure you find the right fonr for your content. Ask yourself:

• What are you trying to achieve?
• What is your goal?
• How do you want users to feel towards your content?
• How long do you want them to spend on your site?

Typography, along with space, multimedia and colors, makes your website appeal or repel. Yes, it’s “just text” – but most of the websites out there are about text. Don’t punish your users – go easily on their eyes.
A final word – why is font choice so very important:

Popularity: 2% [?]