Design Tutorial: Fonts, Colors and Spacing


Popular wisdom has it that website visitors don't read, they just skim. We're optimistic that there are still readers out there on the web, but there is certainly a lot you can do to make your texts more readable, better looking, and just plain nicer. We went behind the scenes with the Jimdo design team to learn some tricks (and no-no's) about web typography.



Text is readable in combination with the background color. Very light colors on a light background are difficult to read, as is green text on a red background.


Background color and text color should complement each other.


As a rule of thumb, lighter backgrounds are easier on the eyes than dark ones. And while you are considering how to combine text and background colors, remember that some colors go well together and some do not.


There are several good tools for finding color schemes that look great together: try Color Scheme Designer and Kuler for starters.




Font size and line height

To change the text style on your JimdoPage, log into your site and click on the Style button on the SiteAdmin bar.



Before you start changing the font size from normal to itty bitty, keep in mind that some potential viewers to your site may have difficulties reading very small texts. So while bigger is not always better, it's a good idea to keep font size at 10 points or larger.


As for line height, this setting adjusts the vertical spacing of each line of text on your site. 120% is the standard height; anything larger will increase the white space around your text and make it easier to read.


Don't forget one of the main advantages of online writing over print: there are no length limitations, strictly speaking. If your text runs a bit longer because you increase the white space and font size, this is not a problem.




The purpose of a heading is to announce the content below and to separate one topic/subtopic from another.


If your heading is too big, it can overpower your content and seem out of place. If your heading is too small, however, it doesn't do what it should: make clear to the reader what a text segment is about and where it begins.


Pro tip: To make headings easier to recognize and give them an extra "oompf", you can modify the CSS (using the "Edit Head" function under Settings). The following code condenses the letter spacing and increases the top margin, making headings more effective:

<style type="text/css">

h1,h2,h3 {
letter-spacing:-1px ;

h2,h3 {
margin-top:20px ;



Have fun with the suggestions - hope they help you make your website texts even better!



Comments: 4 (Discussion closed)

  • #1

    osgphoto (Wednesday, 29 February 2012 19:16)

    очень интересно! и необходимо! %)

  • #2

    sakhr bany khalid (Wednesday, 29 February 2012 19:59)

    very nice

  • #3

    Syed Imran Ali (Saturday, 03 March 2012 07:07)

    nice but taht very basic and obvious .. do upload some advance level techniques for further improvements of sites..

  • #4

    handmade-tintin (Thursday, 08 March 2012 09:47)