Color & Font

Not only the pure message of a web site determines the willingness of visitor to stay on that site and get involved in the information provided. Also the way this information is presented on the site may have an impact on the dwell of the visitor. The appearance of a web site can be used to create a certain atmosphere, to evoke certain moods or associations. Beside the spatial arrangement of the single elements of a web page, especially the font properties and, even more important, the coloring plays a crucial part here.

Usually, the choice of a dominant color for the web page is quite easy. You can think about the mood or association you want to induce in the visitor by means of that color: Many publications about web design contain information about the relationship between color and emotions/associations [1,2]. However, after the dominant color has been found the problem will be to find further colors for your page that will harmonize together and improve the general layout—without affecting the intended impact of the dominant color.


[1] Jason Bearid: The Principles of Beautiful Web Design. 2007 (2nd. Ed.). Collingwood: Sitepoint.

[2] Manuela Hoffmann. Modernes Webdesign - Gestaltungsprinzipien, Webstandards, Praxis. 2009 (2nd. Ed.). Bonn: Galileo Press.

There are already some schemes you can use in order to find an appropriate color palette (Jason Beaird, for instance, mentions six different schemes in his book). However, such methods can merely be some auxiliary means for the generation of a color palette. The finishing touch will always be done by means of visual judgment in order to find a balanced color composition.

And this is exactly what this page is about: I programmed this site to provide a helpful tool for creating some harmonizing layout feature. The single elements of this standardized test page can be modified with respect to their font and color properties in a simple and interactive way: Just use the control elements in the boxes on the left to adjust the respective values. Feel free to play around with that tool. If you think that you have found an appropriate style for your web site, you can simply copy the resulting CSS listing from the box “CSS Output” and use it for your web site. Just let me know if you have any questions or helpful suggestions about this tool.


© 2011 G. Wendt