Typography and Website Design - Style
Choosing font style as well as font color and size
Typography on the web
StyleOnce you have decided on the webpage layout of your text; what about the "style" of the text? Style refers to -uppercase, bold, italic, underlined, subscript and superscript text as well as font color and size.
A good rule of thumb in webpage design is to avoid using uppercase text as much as possible; it's difficult to read when you are skimming a page. (Plus, on the Internet, capital letters symbolize "SHOUTING"!) Save the bold, italics and underlining for very important text and use it in small doses.
It is best to use a sans-serif font for all of your website text styles. This not only provides easy reading for your website visitor, promoting ease of user interaction, but also gives an appearance of uniformity and professionalism to the site.
Font color vs backgroundThe color of font you use for the bulk of your content and webpage design should be one that contrasts sharply with the background for easy readability. If the background is too colorful or dark, use a graphics program to lighten it.
The example given below shows the need to contrast your text with it's background. In order for your web text to be easily readable you must consider the webpage background vs the text color. Do they contrast effectively? Are your visitors going to be able to read your content without trouble?
Shown is an example of web page background graphics vs text color and readability.
Font sizeFont size is a matter of preference and is often determined by the type of website theme you have. However, it's usually pretty easy to spot a website by someone new to the Internet ... the font size is very large and is the same for everything. This is because most of us are conditioned to use a size 12pt font for creating printed correspondence and we transfer that habit to a website.
To compare, A 10pt font is used for these pages with a larger 12pt for headers. Here is what a 12pt font looks like on the web. You can imagine how fast this would fill up a webpage. Plus, text this large is unnecessary on the web, except as headers on a balanced webpage layout.
Rather than using bold, italics or underlining, a slightly larger or different colored font can call attention to important information in your website content. And smaller text, as in the links at the bottom of this page, let the reader know this is something different from the rest of the webpage.
Avoid harsh font colorsDon't get carried away with a lot of different text colors; too many and a website can take on a circus-like appearance. Also, this type of color use is unprofessional. Also, be sure to use web safe colors for the benefit of your website visitors.
Simple is always the best betThe colors red and yellow will draw the eye's attention, but they also tire the eyes. So use these colors sparingly - just to emphasize something you really want your visitors to see. Simple is always the best bet.
A lot of text in either red or yellow, and your visitors will move on not even realizing it's because the color has tired their eyes. Keep your target audience happy and you will be happy you did.