DO's and DON'Ts for choosing the right fonts for your website

Posted on 05 Jul 2019 09:09 in Web & App Design
by Margi Mehta

The art and science of selecting the right fonts and amalgamating it with the correct kerning, tracking, leading, layout and colour of the text are collectively known as typography. The perfect font will surely make the readers go through the content once.

Typography has been conventionally ignored in today’s world of web design. If not ignored, definitely other aspects of web design such as images, content and others have always been on a heavier side. Well, any web design is not complete and correct until focused attention has not been dedicated to various aspects of selecting a specific font for your web page. Choosing the right font for our website not only makes the page look attractive but also decided the viewers’ opinion about the website. The obvious reason for this is that what you see is how you feel!


The art and science of selecting the right fonts and amalgamating it with the correct kerning, tracking, leading, layout and colour of the text are collectively known as typography. The perfect font will surely make the readers go through the content once irrespective of the stuff in the content. Well, an attractive face always captures the eyes first!


While selecting a font for your web page, you need not necessarily choose the best font; instead, you need to select the font that best fits your page. The above statement might just pull together but reading it again makes it pretty simple. To throw some light, let us take an example. My personal favourite font is Comic Sans. But what would happen if my company website is written in my favourite font? Well, if you are visiting my company website, you might just comprehend that the company is kind of a fun workplace where things are taken too casually, isn’t it? Here is where the art of selecting the font that best fit for your web page lies.


Here are few DO’s while selecting a font for your webpage.


Readability is a must. 
Increasingly important when there so many mobile devices people are using - digital watch, mobile, iPad, Laptops, car dashboards and many more digital consols. Hence use fonts should be selected based on the devices your users will use to read your contents. 


Consider the tone of your web site. 
Serious matters cannot be conveyed using a playful font such as Comic Sans or Berlin Sans.


Esthetics is also important.
Select fonts in accordance with your leading, tracking and the font size that you want to display. Here, the spacing between words is a necessary factor for selecting the correct font because many fonts are designed to make the words look compressed, and many are designed to make the words look sparse.


Focus on the pairing prospectus. 
A single font might not work for the whole website. Hence, pay attention to the pairing aspects and correctly select the pair. Few good combinations would be to combine two sans-serif fonts or to combine a serif font for a header with a san-serif font for body. The main idea behind a proper pairing is that the texts shouldn’t look too similar, but at the same time, they shouldn’t be too much distinct either. This means that the pairing of fonts should make the texts convey their meaning along with maintaining the harmony for the eyes of the readers.


Your font should always make you stand out of the crowd. 
Standing out here doesn’t mean that you go on searching for the font that has never been used! Because practically, it is impossible to do so. Hence, standing out means that selecting a font that conveys the feelings of what you need to say in the best possible way. Well, if I write OKAY, and then I write Okay; which one was more casual? The later one, right? Here is where feelings come into the picture.


Do not imitate what others are doing.
Even if your website delivers the same purpose as theirs, here keeping your unique element intact and presenting yourself as different is in your control. If someone uses a bigger font size for heading and smaller font size for the body, you might just not need to do that. Instead, you can separate your heading and your body with the help of simple colour change for both or by employing different fonts altogether.


Harmony in fonts and graphics is essential.
Your selected font should always match your graphics on the page. It basically should be in coordination with your emotional aspect conveyed by your page.


Your fonts must look the same everywhere.
Always test the selected fonts, again and again, to make sure that they work perfectly for every web browser and various platforms.


Following the DO’s, let's now focus on the DON’Ts too.


Don’t select more fancy fonts.
Even if they look amazing if they are creating a bottleneck for the loading speed of the webpage, heavy and fancy contents generally face these problems, and hence, one should be really careful about the same.


Don’t use more than three typefaces for a single website.
This makes the website look good and unorganized; giving it a feeling or lack of discipline in the firm.


Don’t forget the main context or goal of the web page.
Select a font that brings together all the elements of the webpage and not the one which individually fits the best.


Don’t add too much style to your page.
Don't overdo in terms of making it bold, italics or underline even while using the same font. This will again goof up with your content and pose a sense of immaturity in writing. Here, you should also avoid using underlines as they often confuse with links.


Don’t blindly follow any rules for font selection.
Because there are no hard rules, in particular, all the content available on various sources is just guidelines. Hence, taking help or support is good, but following it blindly will only make you another follower and not a designer.


So those where DOs and DON'Ts while selecting for your website.


Moreover, let us take a look at one of the many case studies of the well-known website as an example of their typography.


Google typography. 
It is built keeping in mind the Google logo and its overall purpose. Here, Google uses Product Sans for its text. It has taken an idea from the old school books and has amalgamated with the consistency shown by geometric San Serif font to make it look professional as well as more user-friendly.


In a nutshell, selecting the appropriate font for your web page is an essential task as other consideration such as website contents, graphics, images navigation and more. Font selection is a trivial and vital part as it has the responsibility of linking various segments of the web page and convey emotions. Moreover, care should be taken while making the thing look best that we mustn’t end up messing the whole thing in an attempt to make it unique or attractive because readability is the foremost prospectus towards any font selection.


We are eagerly waiting to hear from you -
1. Your opinion about font selection?
2. What are your considerations while selecting fonts?
3. Your thoughts about this article.


About the author

Margi Mehta     
Content Writer. Completed my Bachelors in Computer Engineering and heading towards Santa Clara University, California for Masters in Information Systems. Passionate about penning down my thoughts on paper and unleashing new horizons.

Leave a Comment..

Name * Email Id * Comment *

Create your new website or blog for free.