Color And Font Converting Better ROI

Website marketing is not just about contents, advertisements, software for competitive search engine optimization and receiving valuable back links. To start with how your website stands out from the crowd on its own, have you ever thought whether your site has been properly groomed or not? Whether it is conveying the right message or not? Of course you are producing great content materials and your e-marketing skills are great, but how do you know what vibes, your website sends to the viewer’s eyes. This is when designers can finally admit content is the King but design is the Queen. The king is nothing if the queen doesn’t come along with him. When it comes to the Queen, that is the design, font and color selection play a vital role in attracting viewers. So, the font and color should be selected right.

Take a look at Apple’s website design for example. The first thing that was seen on opening is the headline


This is the lightweight Myriad form, which Apple used for writing the headline. Apple has chosen this font to emphasize a feeling of weightlessness of the iPad Air 2. The entire website is kept white, the header is gray while specific call to action features like the ‘Buy Now’ button and ‘Watch the keynote’ are kept blue. Why did Apple choose white for the website’s background color? Most website designers consider white to be the color that indicates spaciousness,while gray is the color indicating somberness and coziness. The website is all about somberness and spaciousness and perfectly syncs with what Apple claims “change is in the air”. Blue on the other hand, symbolizes a feeling of loyalty and serenity.

Note: Apple uses Myriad for their headlines while they use Lucinda

Sans for small texts and others. The color and font selection makes it look well organized.

Once you browse through the entire website, you would understand why typography and color is what makes you feel like browsing through the entire website. It plays on your psychology. Scrolling further

down, the website talks about technology and what features to expect. Now that could have turned out to be a boring talk had the words been cramped together to give it a technical touch. Apple does not do that. In order to produce the right essence, i.e. iPad Air 2 is of lightweight, Myriad has been used and as we read on, our eyes can easily take on the message without stressing the eye.

How Color and Font Work On Human Psychology?

Well, Science says that when a person sees a color , it is directly communicated to the hypothalamus part of the brain. This then sends signal to the pituitary gland, a part of the endocrine system and then to thyroid gland. The thyroid gland is responsible for secreting hormones, which in turn affects a person’s mood and behavior. Speaking of typography, according to Microsoft’s sponsored research work by Larson, Chaparro, Hazlett and Picard, a good typography reduces the corrugator muscle activity, causing people to frown less while reading and influences the cognitive task of a reader once he is done with this reading. Big technology tycoon like Microsoft focus a lot on fonts, designs and reading.

You can call design as an amalgamation of Science and Art . It is almost like when you watch a movie. Most people don’t know much about camera angles, video editing and other directional skills. Nevertheless they can still communicate with the film after watching it. Same is with web design. You may write great contents for your website but it remains incomplete if your page design and color fail to communicate what you are trying to convey.

Allow me to give you a plain explanation by using a fictitious example. In this example you (yes YOU!)are the person who owns an online retail shop for womens’ fashion wear. Let’s assume the name is FEMME. How would you want your brand name to look like on the website? Some experiments were done with the font and the color of the name to see which one conveys a more feminine message. Which one do you think goes with your target audience?


 I think your choice would be the same. Picture no. 1 would be that is. The background color and the tone speaks a lot about who your target audience is (Its Fuchsia and not Pink by the way). Picture no. 2 on the other hand, conveys more of a health care brand. The font in Picture no. 1 is more feminine. The ‘me’ part of the word Femme has been increased to emphasize on the boldness that becomes the relevant character in the way you dress when you choose Femme. Comparing the two pictures show how much the above picture caters to what your customers are searching for.

But is it only about selecting the right font and color?

Answer is NO!

Using the right typography helps to control your navigation. Visit a website and study carefully. What is the font size of the header? What is the color for the ‘Buy Now’/ ‘Sign Now’ buttons (if any)? Which part of the website do you first look at? Why did you first look at that spot and not any other place?

Slowly you would come to understand. Let’s have a look at a human resource website.

This was not the only human resource website that was looked at, there were quite a number of websites that had been studied carefully. What was found out that most of the websites had blue as the predominant web color, while white is the neutral color. Blue portrays a sense of professionalism. Most organizations choose white as their background color if they are using blue. White is used to provide rest to the eyes and gives some air to your content. Imagine how the website would have looked like, if the background color was kept gray or say yellow.

The font is kept professional. Notice! Here it is the color of the website that is directing our eyes. Visiting the website, the first thing that will grab your attention is the banner. Then you scroll downward to see the ‘Service’, ‘Resource’ and the ‘How Can We Help You’ sections. They are all in blue color. Once you have gone through the blue ones, only then do the side panels (which are in white) catch your attention. Navigating through the entire website, shows that the titles are written in blue while the body content is written in black. The fonts also vary- titles are bigger than the body copy. This makes us first see the title and only then do we look at the content below the title. Try it out for yourself. You would not find yourself heading straight to the body copy.

Visit A Health-care Website

Three health-care websites were visited for finding out what fonts and colors they use. The common colors, used by most are – blue,green and purple. Blue and purple convey a feeling of professionalism and trust. Green is seen as a color of calmness. Why do you think most hospitals have green all around? Website design can play a great role while communicating with your target audience.

How Google Uses Color And Fonts?

Once you visit Google’s website, you will be invited by its white color background and the search box, with the logo on top. The font that Google uses for its logo is Catull BQ, which gives a calligraphic feeling. This feeling is contrasted with distinct usage of Serifs and stroke weights.

As for the search engine result page, Google primarily uses Arial [].We have seen some change in the font size this year in 2014.

Serif font is used to build up an air of professionalism,seriousness or probably a scholarly attitude. That is why, you would find most newspapers using Serif fonts such as the Times New Roman. They use Serif fonts in black color on a white background. The font and the color portrays their authority over the news they produce. So would you find with The Wall Street Journal website.

Which Font Would Stimulate The Desired Result?

While Serif is used to build an image of tradition and professionalism, Sans Serif is used to give a more sophisticated, clean and modern approach.

If you carefully look at both of them, you would notice certain sections where Sans Serif font is used. New York Times has Sans Serif for its ‘Get It Now’ buttons. Wall Street journal uses Serif for the headlines,while Sans Serif is used for the body copy.

Serif font come with projecting tails – A. Sans Serif on the other hand do not have such features – A.

Websites use Sans Serif fonts to portray that they are updated and modern. 60% of the web design consist of Sans Serif,while only 40% consists of Serif. [ref link:

Combining Modern And Standard Fonts

When designers combine both modern and standard fonts, only then they can bring out a web design full of sophistication. Maybe that is what both Wall Street Journal and New York Times.

You need to understand the basic of human psychology before you start designing your website.

You cannot follow such methods for a children’s website

Sans Serif would be preferable in such case. The simplicity of the letters make it easy for children to recognize. Now if you are looking for a children website for buying a toy for your kid, you would find splash of colors in them. The font would also change to something that is kiddish,with lots of vibrant colors. Sans Serif is used in such websites. A black or a blue website won’t work here. If blue is the predominant color, then play with energizing colors like orange, green, yellow, blue for the font and special call-to-action buttons. You could experiment.

So You Thought Pink Was A Girl’s Best Color?

Well, results don’t match with what we have thought for so long. A recent survey showed that blue was the most preferred color among women while the least was brown or orange.

Survey shows that 35% of women prefer blue as their favorite color, followed by Purple (23%) and Green (14%)

Femme Chart

The preference varies however. The choice of pink does not appeal everyone. But you could try Fuchsia if you want to keep pink. If you have a website that caters to the feminine needs, its time you shake up your thoughts. Don’t jump over to colors like red, it might not work. Maybelline prefers black as the site’s predominant color and uses colors like purple, blue, yellow, red. This color strategy can help them cater to different women with different color choice.

Before Heading Down To Work On Your Web Design

There are plenty of examples which could be shown. However, its endless. The best way to learn about how different websites utilize font and color is to go through all of them and make a detailed study. While this would take time, what you could do is ask your designer to go through the website’s mind map and bring into account all the elements that each of your site contains. Jot them down on an excel sheet along with what fonts do they think of using. Discuss with your designer how the font and the color that he has chosen, would connect with the target audience.

Always Split Test Before Taking The Final Decision

This is the last and final suggestion. Your designer may not always be right. Neither will your sole intuition. At the end of the day, it all falls upon your target audience. Different people react differently. A red ‘Sign In’ button may not give you effective conversions. Maybe a green ‘Sign Now’ button would communicate better with your site. You need to make a careful study and this can be best done with A/B split test. Once you have found out how your audience reacts, keep it but do not keep it for long. If you have a website that has service to provide, it is important that you update your site’s design to give it a fresh look and that also means the font and the color.