Typography is one of the most important aspect of the Web design process. Setting up a right type can make or break your website. And there are gazillions of font to choose from and there are thousands of ways to use them. You can choose a simple and delicate typo or a strong and bold one, you can use colorful and fun typo or a more subtle and smooth one, but whatever type you use it should fit in with your design. It totally depends upon the design style and the personal liking of a designer but still there are a few rules that needs to be follow to use the typography properly. Let us give you some simple principles to follow while you choose a typo, this is hardly a complete guide but it can be beneficial for a rookie designer who is trying to learn a few tricks of this art.

Systematic Approach for Web Typography:

What it means is that your Typography decisions should provide a variety of results. For example you are designing a website of a brand then your Typography choices should not only be within the brand’s guidelines but also be search engine friendly as a website is useless to your client until it can bring traffic. So while designing such a site you have to make some tough choices regarding your Typography, in this case they can be

i)                    Deviate a little from the brand guidelines and use the fonts that are available online and make the website more SEO friendly.

ii)                   Use the images of the font that cannot be found online and meet the brand guidelines.

There is no clear answer for all this as it will wary with the different clients as for some meeting the brand guidelines will be more important than the SEO friendliness while for others it will be a complete opposite. Sometimes the clients are not sure and in this case it will be your responsibility as a designer to judge which one of these is more important.

Using Typography to Define the Importance of Information:  

One can do this by a number of ways. The type size, color, case, weight and using normal or italics will give a specific information a different importance altogether. But this is not all, what really defines the precedence of information is its placement. For example, if all the other factors remains the same the information put in the main body will have more importance for the user’s eye than the one in the sidebar area. Placement has a great effect on how a user will react to the information. The user eye for the most time block the sidebar area considering it as an advertisement while it reads the main content.

Creating Optimal Page Flow:

Defining the precedence of information correctly will help you in creating a optimal page flow for your website but this is just one part of it. What really optimize the page flow is the proper usage of spacing. Wisely used spacing will tell the user where to start, where to pause and what to do at the end of the page. Both the precedence and spacing will be needed to create an optimal flow and it is up to you as a designer to create it.

Maintaining Legibility Within the Brand Guidelines:

The visual design of a website needs to be of high quality for it to stand out and this results sometimes in illustrative and highly textured sites. In such an environment the typography decisions becomes a lot more tricky than usual as you will have to maintain the legibility while staying within the brand guidelines. A website which is eye appealing otherwise but in which the text is hardly readable is useless for a client. So it’s a designer job to use the size, weight, color and case that will make the text readable.

Use of Text as UI:

Text within a user interface is always of prime importance. Here every letter will make a difference and the word choice is what will make a website a stunning success or an utter disaster. The unstyled letterforms give no indication as to what users should interact with and that is the failure of a designer.

Here are few inspiring examples of beautiful typography in Web design.


7 Days in Havana


Captain Dash

inTacto 10 years

Nike Chosen Series

Haunted Cathouse

Amazee Labs