Proper use of fonts, colors and graphics for the web

Font Color
When styling text for the web a couple of things should be taken into consideration. These being background color, readability, usability and overall look and feel. In general most text will be displayed on a white or off white background, to make the best use of this a high contrasting color works best for font colors. Naturally black makes the most sense as it is easily readable and stands out from most other colors.

Headings are a different story when designing a site more often than not headings take on one of the colors out of the sites color scheme to ensure that you pick the right color we suggest that you pick the most contrasting color with the chosen background. This will not only bring more interest to the content but also create a clean flow between the content and the layout of the page.

Font Family
When choosing a font for you site insist on using a san-serif font as they show provide better visibility and readability for the visitors of the page. Fonts of this class include: Verdana, Arial, Helvetica, Tahoma and Times New Roman.  While fancy, curly fonts look pretty they are often very difficult to read on a screen and are not platform independent, So if a font is chosen that a person viewing your site doesn’t have, it can ruin the look that page as that persons browser will default to what ever the default font is for that person computer.  To avoid this and give your site redundant font selection the use of font families is highly recommended. To do this in your CSS file you can specify a default font family for the entire site therefore bringing consistency to the entire site. Here is an example of this method:

In your CSS file do this:

Body {
            font-family: Arial, Helvetica, sans-serif;
}

In this example I declared that Arial should be the font of choice but should it not be available the browser will attempt the next font in my list, and if that is not found it will default to the first sans-serif font it finds. Utilizing the “sans-serif” directive I’ve bullet-proofed my site so that no matter what kind of system the site is loaded on the font that the visitor will see, will be an easily readable font.

Font Size
Moving to the appropriate size of font this is one of the most crucial decisions to make as it will impact the usability, accessibility and readability of your content. Too small and no one will obviously be able to read it, too big and it will look disproportioned to the rest of your page.  There are two schools of thought when it comes to sizing text. The first is using pixels to size your text with the standard font size of 11 or 12 pixels in size. The second school it dedicated to using what are known as an em. An em is a unit of measurement in the field of typography, equal to the pt size of the current font. In this system the font is based off a scale of 1em or the default pt size of the given font. For use on the web the normal text size is around .7em - .8em which is equivalent to about the same size we used in pixels. So why use one over the other, the answer is that in using pixel based sizing it is a fixed scale of per pixel sizing so 11px or 12px but not 11.5px, whereas with em based sizing it’s much more flexible as .7em it valid but so is .75em. This provides a much higher level of customization and persicion. While it doesn’t matter which sizing method you use do keep in mind the sizing that I’ve laid out as keeping font size in this range will provide good readability. Another option for sizing text is giving your visitor the option to increase and decrease the size. The normal method is to create three separate style sheets; one for normal font sizes, one for a smaller size and another for large fonts respectively. This way the user can determine which size is best for them.

Graphics
When making use of graphics inside a page as content there are two things to consider. The first is, getting the size right for the space.  While this relies quite a bit on your photographer to shoot the correct way for your space it is still important as small squished images are never attractive and then a waste of page real estate. The second is how your graphics is formatted for the web. In this day of broadband connected pc’s file size is becoming less of an issue but is still relevant, as more and more people are connecting with mobile devices that while faster than dial-up speeds, these users often are charged by the Kb of data they transfer so having large pictures can put stress on their wallets and make them not return to your site.