10 Typography Rules to Conquer In Web Design

January 2, 2019 Posted by creatix9 In Web Design 1 Comment

Typography has gained a lot of attention in the recent years and today websites are bound to follow some fonts and typography trends that can help the businesses in attracting more customers for them, as well as helping them growing and maximizing their profit growth. As per the recent study, 90% of the websites are taking care of typography as per the requirement of the users for enhancing user experience and readability of the text, whereas those 10% websites that don’t follow the rules of typography are pushed to be doomed.

Before we jump any further, let us excavate what typography basically is. Typography is the style and art of the printed matter and how it appears. It is a technique of arranging the type in such a way that the written content becomes legible, readable and appealing when being displayed. But for amazing typography and flawless fonts, there are some rules that must abide and follow religiously. As are going to discuss top ten rules that are essential to follow for flawless web design with a brilliant and sophisticated layout.

1. Single Spacing Between Sentences

It has long been in the debate that between sentences there is to be a single space or double? Traditionally, double space is more readable and legible, especially it can be found in many professional written material. But when it comes to web content, single space gives a more professional look, as on-screen the double space material would become a bit hard to read and requires much attention to read and understand at the same time, as it becomes confusing.


Wrong: Lorem Ipsum is simply dummy text of the printing and typesetting  industry.

Right: Lorem Ipsum is simply dummy text of the printing and typesetting industry.

2. Heading Hierarchy

It is important to use heading hierarchy where the first heading, at the header, has to be of the bigger size, easily readable and understandable. Whereas the next heading has to be smaller in size as compared to the first heading, the next heading i.e. our third heading has to be a bit smaller in size as compared to the second heading, and so on. It is important that the headings and their sizes increases or decreases in a hierarchical format, because, if any of the heading all of a sudden becomes too big or too small, the impact it should make on the minds of the readers may be minimized or completely finished.

3. Special Attention to Micro Typography

Kerning is way too important. Kerning is the adjustment of spaces that are made between the characters for creating a harmonizing pattern. There can be too loose, or too tight spacing errors between the character that spoils the overall look and feel of the content. If the spacing is too loose, the written material would look clumsy whereas if space is too tight, trust us, it would be way too difficult to comprehend the content properly. It is evident that Kerning is unnoticeable when it comes for longer sentences but when you are talking about logo’s or bigger headings, these spaces matter a lot and can turn your content ugly or beautiful with a simple thing. Sometimes smaller things create a huge difference.

4. Proper Punctuation

Using em dash, apostrophe and ellipsis are important in your content, but if they are placed with an error, all the value of the message in the content goes wasted.

Em Dash

There is a difference between a hyphen and an em dash, which is used for emphasis or for the separation in the flow of reading. The hyphen is a short line whereas an em dash is longer, without any break.


Wrong: Lorem ipsum dolor sit amet, consectetur– – Uttellusrisus, laoreet id placerat sed.

Right: Lorem ipsum dolor sit amet, consectetur—Uttellusrisus, laoreet id placerat sed.


While placing an apostrophe in your content, make sure you are using the correct one. There is a lot of typing error in the web pages, where the wrong apostrophe kills the flow of the meaning of the sentence.


Wrong: Lorem Ipsum has been the industry`s standard dummy text ever since the 1500s.

Right: Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.


It is a form of punctuation that looks like three dots but in reality, they are not. They imply for the continuation of the content, such as Read More … on the web pages.


Wrong: Lorem ipsum dolor sit amet, consecteturelit. Uttellusrisus, laoreet id placeratsed…

Right: Lorem ipsum dolor sit amet, consecteturelit. Uttellusrisus, laoreet id placeratsed …

5. Responsive Typography

There is a need for responsive typography for the responsive web design. Keeping the font same, the size has to be different for every device, the web page is supposed to be opened. For desktops, the perfect size of the header can be like 100 pixels, whereas for a tablet, which has smaller screen as compared to a desktop can go for the same heading with 60 pixels, similarly, for a smartphone where the screen is much smaller than both the devices, the same header size can be shorten to 12 pixels. This is how to the responsiveness of the web page and its design remains intact and perfect to read.

6. Wise Color Combinations

For your written web content, color combinations play a pivotal role. If the color contrasts don’t match, then there are chances that the readability of the content would not be possible, leading to the loss of potential customers. Like a dark background with light color written text or a light background with dark written text, these color contrasts are easily readable. But if the dark background such as red color has blue color content written on it, it is barely legible for the customers, but if the color of content is white or lime yellow, the legibility of the text increases.

7. Serif or San Serif Font

There has been a long debate on which font is better for writing? It is evaluated that serif is a great font style when it comes for printed reading material. But on contrary, sans serif looks appealing on the on-screen for proper legibility and understanding. If you are using serif for the on-screen purpose, then you have to increase the text size, as for smaller text size this font is hard to read. On the contrary, sans serif is great to read in smaller fonts, but if you are increasing the font size to a greater volume than sans serif becomes a bit bulky and pixelated, but still easy to read.

8. Usage of Correct Content Emphasis

It is important to use correct font style for adding emphasis on your content or the message you are trying to deliver. There is three way to add emphasis, either use underline font style, or italic font style or bold font style, but for web pages, the protocol is different. For the on-screen content, underline font style is obsoleted now, as it doesnot provide enough prominence while it is a major factor in causing cluttering on the web page.


Wrong: Underlining the content is no more used for adding emphasis on the content.It makes the web page look muddled up and the headers become a mess.

Right: Italicized texts gives a pleasant feel. It is professional and a source of simple emphasis over the text with extra elegance and sophistication.

Right: Bold texts are the most powerful way of adding emphasis on your content. It is an excellent source of making the readers understand your point with clarity.

9. Say No to Stretching

Stretching your content or header either vertically or horizontally simply adds confusion to the content, making it look blurred and confused. Keep a normal height text, just don’t play with it while stretching it in any direction you like. The stretched text does not look appealing and cannot add emphasis over what you are trying to explain briefly.

10. The Right Font

Choose the correct typeface matching with the design and layout. Don’t use vague fonts that make your content look a discomfort work, instead, use easy to read and easy to understand fonts that are widely legible. The experts have shared a list and as per them, the fonts that are not meant to be used on web pages are Comic Sans, Papyrus, Curlz MT, Arial and Courier New. Whereas the fonts that are meant to be used are Vollkorn, Ubuntu, Droid Sans and Lato.

Final Verdict

It is evaluated that correct typography can lead your web page to success, whereas wrong typography has the tendency to eliminate you from the run, leading to utter doom. If you are thinking for in-depth analysis of your website and finding out either your typography is perfect or not, you can contact Creatix9 easily, as we are leading website design agency with skills to satisfy you till the end.

Comments (1)

Leave a comment

Your email address will not be published. Required fields are marked *

Let's Come & Join our Social Circle