Willowrose Village presents the...
Webplanner Dashboard
• • • • • A step-by-step tool to help you plan a useful and effective website for your business or art • • • • •
<<< PREVIOUS DASHBOARD MAIN NEXT >>>

 2-6    TEXT

Unless your website is almost completely visual, text will be a part of it.

Now there are all kinds of things you can do with text (in internet language known as "font").

You can change it's size:
Font Size 1
Font Size 2
Font Size 3
Font Size 4
Font Size 5
Font Size 6
Font Size 7
Unless you set it otherwise the default size for website text is #3. However, you will want larger sizes for title and subtitle sections, and sometimes you want some text really small because it needs to be there but you don't necessarily want to draw attention to it. For example, I used a #7 font size as the title for this page -"Webplanner Dashboard", but I used a #1 font size for the "© 2008 - Willowrose Village Web design by Berrywine Webdesign" right at the bottom of the page.

You can change it's color:
Font Color
Font Color
Font Color
Font Color
Font Color
Text color can be used in all kinds of ways. For some websites, I choose a default color for all the text on a page. Sometimes you use color to highlight certain words or sections.

You can change it to Bold or Italic or Underlined or any combination thereof.

You can highlight it in different colors.

You can also choose the kind of font you want. You can specify any font you want, but you need to be aware that if you choose one that is not common to all computers, then what will show up on some computers is just a default text. (Which is why on the samples below I have given you the name of the Font used - if your computer doesn't have that font in its data base, you'll get a default text instead.) The most important consideration here is readability. So choose a text style that is easy to read. You can occasionally use a fancy text for short titles but for main text areas keep it simple and easy to read. But just to show you why you need to consider this, look at these samples:

This is Font Face "Arial". A common and easy to read font - and my favorite. The rest of this is just filler text to help you see how this reads when there is a larger text area of this font face.

This is Font Face "Amazone BT". This is a much fancier lettering style - good for short large letter titles, but hard to read as a block of text.The rest of this is just filler text to help you see how this reads when there is a larger text area of this font face.

This is Font Face "CloisterBlack BT". A Blackletter style of text. Good for titles, but again, difficult to read in larger sections of text.The rest of this is just filler text to help you see how this reads when there is a larger text area of this font face.

This is Font Face "Lucida Handwriting". This font looks a bit more like handwriting, which can be nice in short sections, but again, less easy to read than the Arial.The rest of this is just filler text to help you see how this reads when there is a larger text area of this font face.

This is Font Face "Times New Roman". This is probably one of the most common of the serif lettering styles, and also one that is easy to read. The rest of this is just filler text to help you see how this reads when there is a larger text area of this font face.

Another thing to consider when it comes to text is background color. After all, anything is possible, so why not, eh? Well, not so fast! What you want to consider is readability. Because if you make it difficult for your visitor to read what's on your website, you stand a good chance of loosing them in a hurry. Let me show you what I mean:

How easy is it to read the text in this box? Now this is just a short section of text, but imagine what it would be like to try and read a whole page of this. Now this isn't too bad in this size of font, but now try this:

How easy is it to read the text in this size? This is getting more difficult, and if you try to go with an even smaller size:

How easy is it to read the text in this size? You really have to work at trying to read this. And just imagine a whole big block of text at this size. Not fun to read.


Generally speaking, light text on a dark background is harder to read than dark text on a light background. Use it for short sections of text - and in a font size that is readable - but it's not a good idea to use it for text background in general.

How easy is it to read the text in this box? Now this is just a short section of text, but imagine what it would be like to try and read a whole page of this. Now this isn't too bad in this size of font, but now try this:

How easy is it to read the text in this size? This is getting more difficult, and if you try to go with an even smaller size:

How easy is it to read the text in this size? You really have to work at trying to read this. And just imagine a whole big block of text at this size. Not fun to read.


This is an example of a terrible color combination for readability - because the two colors are so close in value (lightness or darkness), they are almost impossible to read.

How easy is it to read the text in this box? Now this is just a short section of text, but imagine what it would be like to try and read a whole page of this. Now this isn't too bad in this size of font, but now try this:

How easy is it to read the text in this size? This is getting more difficult, and if you try to go with an even smaller size:

How easy is it to read the text in this size? You really have to work at trying to read this. And just imagine a whole big block of text at this size. Not fun to read.


What you want to aim for is a light background with really dark text. This example works reasonably well.

Of course, the best readability is black text on either a white background - like this paragraph - or on a pale yellow background - like this box below.

This text is easy to read because it is a dark text on a very light background. Black text on white or pale yellow backgrounds is the easiest to read.

<<< PREVIOUS DASHBOARD MAIN NEXT >>>
© 2008 - Willowrose VillageWeb design by Berrywine Webdesign