Top 5 typography rules for websites & mobile sites

When a person arrives on your site, chances are that s/he is not paying attention to the colours, images or sounds on your page – they’re looking at the text. It doesn’t matter how many bells & whistles are there on your page, the user essentially relies on text to gain information. Whether it is a website or a mobile site, text forms the most integral part of your page. Keeping this in mind, we list the five most important typography rules to keep in mind while designing your next website or mobile site.

Rule #1: Don’t use too many different fonts

You have thousands of fonts installed on your computer. But that doesn’t mean you use all of them on a single site. Use no more than two or three relevant fonts. Keep it simple & clean. This will not only make your life easier but will also increase the clarity of your page. A reader tends to get distracted by too many different types of fonts. The more time a visitor takes to read the text on your site, higher the chances of him/her leaving & never returning.

Rule #2: Watch your kerning

Kerning is the balance of white space between your letters. Proper kerning can make a dramatic impact on your typography by improving your overall site design. Make sure to keep kerning in mind by analysing letter spacing on every piece of typography you use. There is no magic formula for kerning. It depends on your sense of aesthetics & the need of the site. Once this is done on a regular basis, you will get a feel for it.

Source: Jacob Hagen

Rule #3: DON’T use ornate fonts for large blocks of text

When thinking of text, readability is of utmost importance. Large blocks of text require focus. Ornate fonts distract readers from absorbing information. Using a creative font may work well for headlines or short quotes, but can cause paragraphs to look confusing. No one wants to get a headache while reading. The key here is to let the reader scan quickly through large blocks of text.

Rule #4: Pay attention to hierarchy

Text hierarchy helps provide a structure to your page. It visually helps the reader to navigate the content by highlighting the most important points. Use proper title tags for headlines, smaller title tags for less important sections & normal fonts for paragraphs.

Rule #5: Break the rules but occasionally

Always keep the rules in mind. But when there is a trade-off between following rules and coming up with a stunning design, go for the latter. Following the rules will get you a usable site, but breaking the rules might just cause the user to sit up & take notice.

Typefaces are not taken too seriously. But can prove to be the winning or losing point of your site.


Leave a Comment