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.
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.
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.
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.
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,
- For those who would like to understand more about colors and their combinations, you can view the information at tiger colors.
- You can check out a thread at stack exchange on User experience on the best type of color combination too.
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 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,
.png)
.png)