No other style will have as much impact on your site visitors than your font controls. The appropriate fonts, colors, and sizes have a lot of impact on how user-friendly your site is to others. Keep in mind that a web page is not the same as a printed page in a magazine.
Note: How to specify a font size is an evolving issue. In print, you can choose an exact size in points and it will always be the same size and will always take up the same amount of space. In a web browser, font sizes can vary depending on the individual computer, the operating system, the browser used, and whether the computer is Windows or Mac. We prefer to use a base font size of 100%, and then use pixels (usually for headings) and ems for most everything else.
There are five attributes that define fonts in a web document. They are listed in order as follows:
There are three values for the font-style property: normal, italic, and oblique. Normal refers to standard type. Italic and oblique will render the text as italicized.
In the shorthand property, you do not have to specify a font-style. The default is normal.
This property has two values: small-caps and normal. Small-caps displays the text in capital letters with the first letter being normal sized but the other letters smaller than normal. The small-caps setting should be reserved for headings because it may be difficult to read at smaller sizes. In the shorthand property you do not have to specify a font-variant. The default is normal.
The font-weight property refers to letter thickness. You can choose a value of bold that makes the text darker, a value of bolder that makes the text even darker, and a value of lighter that makes the text less bold than the bold setting. You can also specify a value range from 100 (the lightest) to 900 (the darkest), in increments of 100.
Font-size values can be an exact size such as pixels or they can be a relative size set as a percentage or 'em'. 1.2em is the same as 120%. Font size values can also use keywords such as xx-large, x-large, large, medium, small, x-small, and xx-small. Larger and smaller keywords are set relative to the size of the parent element.
The font-family value allows you to specify more than one font setting. If the first font in the list is not available on the reader's computer, the browser will select the next font listed. It is recommended that you use a generic font type such as serif or sans-serif as the last font. You separate font names with commas. Fonts that have spaces in their names, such as MS Comic Sans, must be enclosed in quotation marks.
The font properties also have shorthand properties. For example, the heading tag rule shown below...
...can also be written as
