Ignore typography in web design only at your peril PDF Print E-mail
Thursday, 08 July 2010 13:47

Good typography is most crucial to design. It is.

Good typography is crucial enough on a web page as it is in any other medium. Any thing, good or bad, under the sun and even beyond it hmm… that goes into making the web page pleasing to look at and enticing to read boils down to careful typography. You can not be spared if your website is not visually appealing or digitally inviting in the multitude of sites in cut-throat competition.

Before you make any excuses for a lack of good typography, you might be out of the fray. It is high time you learnt fundamentals of typography that will help your site look – and benefit too – fundamentally different.

A word of relief for web designers! You are not alone on this side of the fence. Ninety percent of web pages that browsers look at have been poured- not designed.

What designers have to pay heed to

Designers have to employ the tools and technique of typography in the best possible manner in conjunction with media needs, target audience aimed at, specialty of communication to be disseminated.

Designing for a computer screen has its own set of uniqueness and problems. Add to these the elastic nature of a web page, which has to work across different computer platforms and screen sizes, communication needs.

The unfailing concern for designers should be about a good match between the style, semantics, and intended impact of your text and corresponding properties of the typeface it uses

What typography means

A page designed to support a childrens TV program should be different for one designed for a politics course in a university. Similarly the text on the Financial Times Website , if it is doing its job right, should be be different from that of the The Tate Modern .

So typography, whether on the Web or otherwise has a job to do. This could be to support and re-enforce the message being presented by the content, or tell you something about the background and the implicit context, that the the page is part of.

Text alignment

Aligning text to the left, ragged on the right, increases reading speed because the straight left edge helps to anchor the eye when starting a new line

Line length

There seems to be little agreement on the best length length for optimum reading speeds. The most commonly advice is that limiting line length to 9 or 10 words can increases speed and comprehension.

Users read faster when line lengths are long, although they tend to prefer shorter line lengths. When designing, first determine if performance or preference is important. If user performance is critical, use longer line lengths to increase reading speed.

Leading (line-height)

Set the leading larger than the default - as a rough guide 1.3cm of leading (130%) will make a big difference to the readability of a web page. Leading and line length however are related; the longer the line the bigger you need to make the leading.

Newspapers have very short line lengths and very little leading - so they can fit as much text into a small space as possible.

Choice of fonts

Choose a font that is suitable to your subject matter. If you use more than two fonts on a page and it can start to look like a ransom note - distracting the users attention from the content. Off-line, headings are commonly set in a sans-serif font, with body text set in serif.

Morever, on-line, sans-serif are often used for both headings and body text; the cleaner outlines of the sans-serif fonts tends to make them easier to read on low resolution screens. Don't mix serif and sans-serif fonts in your body text, as it rarely looks good.


Avoid using italics for small text sizes: the problems of screen display of outline fonts has not entirely disappeared. Italized fonts look particularly bad at small sizes - as italics do not easy to render using a square pixel grid. If you must use italics, avoid using them for large blocks of text.

Use of capitals

Don't use all caps for bodytype - or even capitalise all words in headings. The uniformally of size and shape of capitals make them harder to read than lower case letters.

Readability is increased if only the first letter in a heading is in capitals; each capital - being less recognizable - acts as an interruption to the eye as it scans across the text.


Ensure good contrast between the text colour and the background colour.

Underline links

Make it easy for visitors to understand what is a link and what is not a link. Don't rely exclusively on mouseovers to identify links, as this can be confusing and reduces usability.

Users scan web pages

For Service based website in particular, arrange your text for 'scannability', i.e have lots of headings, provide the most important ideas at the start of paragraphs, and use lists rather than dense passages of text when appropriate.

In short, typography is not so pleasant (Scared? Not too difficult either) means to make your site pleasing to aesthetic senses of surfers. It is done painstakingly and carefully, but definitely, it is worth it. It can either pay you or leave you at peril. So, give it a thought where you are heading for.

Last Updated ( Friday, 26 November 2010 10:00 )

Your are currently browsing this site with Internet Explorer 6 (IE6).

Your current web browser must be updated to version 7 of Internet Explorer (IE7) to take advantage of all of template's capabilities.

Why should I upgrade to Internet Explorer 7? Microsoft has redesigned Internet Explorer from the ground up, with better security, new capabilities, and a whole new interface. Many changes resulted from the feedback of millions of users who tested prerelease versions of the new browser. The most compelling reason to upgrade is the improved security. The Internet of today is not the Internet of five years ago. There are dangers that simply didn't exist back in 2001, when Internet Explorer 6 was released to the world. Internet Explorer 7 makes surfing the web fundamentally safer by offering greater protection against viruses, spyware, and other online risks.

Get free downloads for Internet Explorer 7, including recommended updates as they become available. To download Internet Explorer 7 in the language of your choice, please visit the Internet Explorer 7 worldwide page.