The Importance of Typography in Web Design

Typography is unquestionably one of the most fundamental and basic principles of good web design, but that said it’s also one of the most overlooked methodologies too. Ask any typical web designer if the web-standard choice between Verdana or Tahoma would be most suited to your current project and they’ll probably look at you with a distant and vacant expression. Herein lies one of the major defining factors between a good and a great designer.

This said, good typography is not just about the size and style of a font, but also it about helping to establish a high level of visual hierarchy, leading the reader across the page in accordance to the level of importance of the different text and images displayed.

Let’s start  by thinking about headers.

Q. What is the job of a header?
A. To immediately grab a users attention and draw their vision to an area of a page.

Looking at the majority of headers, simplicity seems to be a  key factor - but being simple isn’t always easy. Strong bright colours help give emphasis to a headline and white text on a black background increases readability due to it’s high contrast, but as with most things in design it is all highly subjective.

Here are a couple of examples of great typography on page headers:

I Love Typography

Lovely simple typeface and bold colour choice

Font Game

Strong capitalised font that immediately demands your attention

Joby

Remaining in lowercase but using a powerful colour ensures that this header makes an impact

Kaleidoscope

Simple capitalised white font on a dark background is always striking. The slight drop shadow adds extra emphasis.

So, you’ve picked an amazing looking header font for your webpage; you’ve spent time getting the size, colour and positioning of it on your page just right and all seems well. But then, what about the rest of your page? Even if you plan on playing it relatively safe with a serif font such as Times New Roman or a sans-serif font like Arial, what letter-spacing are you going to use? Are you going to use ‘px’ sizing for precision or ‘em’ sizing for scalability? What’s your line-height going to be relative to your font size? Are you planning to adhere to a baseline grid? (follow-up blog on baseline grids coming soon.)

It’s a potential mine-field out there when it comes to choosing the correct font for your website, but fortunately for the budding — or even for the experienced — web designer, there are a plethora of tools and guidelines out there in the web-o-sphere to point you in the right general direction, as well as more inspiration than you can shake a whole box of sticks at.

Here are a couple of my favourite uses of great typography:

Things We Make

Light font on dark background. Slight serif and slight italic makes this text very engaging.

I Love Typography (again)

Remember, an understated font like Times can still make an impact when used properly.

Using a web designing software like BaseKit can make choosing the correct font for your project a whole lot easier as you can see the changes that you’re making to your text in real-time, allowing you to save a lot of time and avoiding continual “change”, “save”, “refresh” loops.

Remember, that a picture may paint a thousand words, but your text can paint a lot more.

Recommended resources:

Typetester (compare screen type)
EM Calculator (convert ‘px’ to ‘em’) -

Further Reading:

Five Simple Steps To Better Typography
A List Apart’s Typography Guides
Fine Tuning Web Typography
80 Beautiful Typefaces for Professional Design

Author: Andy Whitehead
Role at BaseKit : Developer

With almost 15 years of web design and development experience under his belt, Andy has spent time designing sites for names such as Dreamwork Studios, Walt Disney and lastminute.com. Now as part of BaseKit’s development team, he designs and builds widgets and feature updates for the web platform; including pioneering the recent CSS3 style controllers.