Of the many aspects of web design, typography is by far the most important one. Yes the colors, graphics and sounds all have their fair share in creation of an awesome design but it is the text that gets the attention from the user. It doesn’t matter just how much effort you have put into the design of a website if the text is not readable or is not really attracting the user’s eye, in most cases your website will be a failure.

Apart from being the most important aspect of a design, typography is also the most difficult one to master. As Dmitry Kirsanov rightly said “No other design discipline requires so much learning and training as typography, and by no other aspect can amateurs be so easily distinguished from professionals.”

It is hard to explain the art of typography in one single article, but i will try to pin point some simple rules that every designer should follow while designing a website.

Try to Use Actual Text Instead of Lorem Ipsum

The problem with using dummy text is that in most cases it bears no similarity to the real text and so you don’t get an idea of what the website will actually look like once its live. In some cases like that of Life in Greenville you will require theactual text to create the actual feel and look of the website.

So what I recommend is that you insist on getting the actual text from your client as early in the project as it is possible. This will allow you to match your overall design with your typography.

Build a Clear Hierarchy

It’s your job to indicate to the user where to start reading the text and how to proceed. All the successful websites have a well developed hierarchy. You should know your hierarchical order before time, by thinking about the size of text and typefaces.

Yes your design’s hierarchy will include a lot more things than just the typography but it is a good starting point anyway. Take a look at the Viljami Salminen site, the designer here has created a well defined hierarchy that immediately lets you know where to start reading.

Use a Reset Stylesheet

No two browsers will show your text in the same way. There will always be differences in the paddings, margins, indentations and headings when you view a website in different browsers. While the differences may be quite small but it will surely not help your cause of creating a consistent page layout across all the major browsers. So using reset stylesheets like Yahoo’s CSS Reset Stylesheet can be a good idea.

Use Proper White Space


White space is the empty space around the content, and its proper usage is utmost important for your design. If you leave too little space then you will end up getting a text that is hard to read, but you will also get the same result if you leave too much white space.

As a good example of right usage of white space take a look at some famous magazines, even though printing each page of such a magazine costs the company a fortune they still leave ample white space so the eye can be easily guided from one element to the next.

Choose the Right Type Colors


The choice of your type color should depend along with the other factors on the background of the website. You will not want to cause an eye strain for the user because text of your website is not easily readable.

And there is no rocket science involved in avoiding such a situation, just use a type color that is completely different to that of the background. Ever wonder why black text on white background or vice versa looks so good and is always easily readable, it’s just because these two colors are completely different from each other.

Know How to Use Smart Quotes and Other Symbols


When you get the text from your client, it’s not always immediately ready for publishing online. The reason is that most of the clients will write the content in one of the many word processors that makes many small changes to text without you noticing them.

The most major change is smart quotes which word processors automatically change for straight quotation marks. The solution here is the same one that i mentioned in the first rule, get the content early and make sure that it not only fits with your design but is also ready to be published online.