Aug 25, 2014

Which Font Color is the best?

Which Font Color is the best front
Did you know font colors can alter moods? Learn how professional award winning websites change text colors to ensure maximum user interaction and understanding.

I recently read an article 'Evoke Emotion through typography' where the author talked about connecting emotionally with people with the help of fonts.

The author stresses on the need of creating a relationship with the visitors on the website, a concept loosely labeled as 'emotional design', which isn't that illogical. Emotions help in decision making, increases motivation, affects memories and much more.

So here's an analysis on different colors (or different shades of grey) that award winning websites use for exceptional user experience. However, before going any further, you must first determine which category your website falls in.

The Study

For better understanding of the readers, the color  variations used by different websites have been clubbed into 7 parts  i.e. #000000, #111111, #222222, #333333, #444444, #555555, #666666 which can be assumed to contain  the color black as percentage 100.0, 93.3, 86.7, 80.0, 73.3, 66.7, 60.0 respectively as shown in the following table.


% of Black Red Green Blue Hex Code
100 % Black 0 0 0 #000000
93.3 % Black 16 16 16 #111111
86.7 % Black 34 34 34 #222222
80 % Black 51 51 51 #333333
73.3% Black 68 68 68 #444444
66.7% Black 85 85 85 #555555
60% Black 102 102 102 #666666


Font Colors for Bloggers

If you have a personal or a professional blog, written by one or many authors about some particular subject and the views are of the author only, then its blog.

The color variations used by bloggers varied a lot, however majority of them about 75% never crossed the 73.3% black mark (Or 75 % websites had fonts darker than #444444 hex).

If you're a blogger I would suggest #222222 or #333333 as your best bet.

color strip for blogFont Colors for Bloggers Donut Chart

Font Colors for News based Websites

If you are not into information or Ideas, and just want to talk about current affairs (i.e.) what is happening currently in the world, country or your locality, you have a news based website in your hands.

News websites on the other hand were fairly obvious; half of them used the color #333333 (Which contains 80% of Black and 20% white).

So If you run a news based website close your eyes and use #333333.

color strip for newsFont Colors for News based Websites Donut Chart


Font Colors for Journal based Websites

If you dig research with charts and tables, then your website is an academic journal.  Examples for such might include anything ranging from journals from academic institutions to private research diary.

Journal websites showed a different trend, in those websites there were two classes. One had the darkest possible color #000000 (i.e. 100% black), which were 44% of the websites.

The second class believed in a lighter approach which used #333333 (i.e. 80% of black and 20% of white), which were 30 % of the websites in the sample.

For research minded Journals, You have an option between #000000 and #333333.

color strip for journalFont Colors for Journal based Websites Donut Chart


Font Color for Information based Websites

And if you're not interested in events or ideas or your opinion, but just want to create a ready reference for others which would help them find factual information, you're involved in an information based website. E.g. Websites like Wikipedia, dictionary.com or thesaurus etc.

Information based websites too had nothing concrete to show, there was no definite trend visible in information based websites.

In short you can use anything.

color strip for informationFont Color for Information based Websites Donut Chart

Conclusion

News based websites can use #333333 as their font color. Academic Journals have a choice between #000000 and #333333. However for Bloggers and news based websites, instead of using any color combination, I would like to attract your attention to the following paragraph.

According to the research conducted on 'The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention', the author contests that color combinations with a higher contrast will ensure higher readability and retention than the ones with lower contrast. According to them, the priority of the color combinations looks like this,


Rank Background color Text Color Example
1 White Black Example
2 Dark Blue Light Blue Example
3 Cyan Black Example

If you're not sure, which category your website falls in, close your eyes and use #000000 or 100% black as your default font color with a white background.


Website Category Font Color
Blog Based Websites #222222 or #333333
News Based Websites #333333
Journal Based Websites #000000 or
#333333
Information Based Websites #000000

Related reading,


More in font research Series

Find out Which Font Color is the best? - Did you know font colors can alter moods? Learn how professional award winning websites change text colors to ensure maximum user interaction and understanding.

Find out Which Font Type is the best? - Which font type is most favored by readers? Which font would keep them hooked to your website?

Find out Which Font Size is the best? - How do you know if your font size is readable enough? What font can be called too large and how many pixels are too small? 


This research was about,
Which Font Color is the best MohitChar

0 comments:

Post a Comment

Thanks for your comments.

Spammers Kindly remember, any hyperlink in the comments will not be indexed by search Engines because of NoFollow attribute.