Text should be easily legible. If it is too small or the color doesn't contrast well with the background, then it will cause eyestrain and visitors will give up. If it is too large, then visitors will get tired of all the scrolling and go somewhere else.
For large amounts of text, a font size of 3 is very good, with 2 and 4 being acceptable in many cases. Font size 1 should be reserved for small portions of text that most people wouldn't read anyway, and font size 5 or larger should be reserved for headings.
Backgrounds should be chosen so that they do not distract the eyes from the text. A vivid all-over background is normally not a good idea. If you want a splash of vivid color to make your page attractive, either add a few well-placed images, or else choose a border background. This website uses a border background, and the text is kept away from the border by placing
tag [which indents the right as well - leaving space for the watermark].If the color of your text/background combination is glaring, it will cause eyestrain and chase visitors away. Generally, RED text or background [#FF0000] is better replaced by MAROON [#800000], BLUE [#0000FF] by NAVY [#000080], LIME [#00FF00] by GREEN [#008000], etc. except possibly for small portions of the page that you want to catch the eye.
In most cases, it is best to use the same font face throughout a page - and definitely not more than two or three fonts. If you need variety, changing the size, color, bold, or italics is usually enough. Most people find blinking text extremely annoying - just choose one of those loud glaring colors mentioned above and you'll get enough attention.
Unless your visitor has the font face you specify, what he will see is his default font. You can specify alternate font faces this way:
The font that will appear will be the first one that is found. Lastly, it is a good idea to check your page for spelling, grammar, and stray bits of HTML code floating around. These kind of typos leave an impression with your visitors that the site was slapped together in a hurry. Most frequently this is seen as _ right next to an image that is a link - caused by a space between the IMG tag and the link tag parts.
For more information, see the HTML Goodies Tutorials on Text, Fonts, and Backgrounds. You can also get help from NetMechanic, WebsiteGarage, or Dr. HTML.
Next tip
Previous tip
Index of tips
![]()
![]()