There are mainly two types of fonts which are: "serif" and "sans serif". There isn't much difference between them but there are many people that say that "serif" fonts families are easier to read since are more similar to books style fonts.
To set a font using CSS we have to use the following syntax:
CSSp { font-family: "Times New Roman", Georgia, Serif; }As you can notice we can set more than one font, just in case the user doesn't have installed one of them, or the browser doesn't have support for it, the next defined one will be used.
Font style and font weight transforms normal text to italic or bold.
CSSp { font-style: normal; }
p { font-style: italic; }
p { font-weight: bold; }This are the most common values that will be used with both font style and font weight. But just for the record, you must know that there are others to.
As the name states, the CSS property font size it is used to set the text size. We will use the "font-size" as follows:
CSSh1 { font-size: 30px; }
h2 { font-size: 20px; }
p { font-size: 12px; }Using pixels to set the font size, will work in Firefox and Chrome, but it is not the best way to do it in Internet Explorer. The problem is that Internet Explorer will take this as absolute font size and will not let the user resize the font for better visibility if he needs it.
As a simple solution to this problem, you can use "em" instead of pixels. "em" is a length unit relative to the parent size. It is recommended to be used by the w3.org and 1em = 16px. As you can deduce, the formula to calculate text size for "em" is em=number_of_pixels/16.
CSSh1 { font-size: 1.875em; }
h2 { font-size: 1.25em; }
p { font-size: 0.75em; }The "font variant" transforms all lower case letters into uppercase. However this are displayed into a smaller size font hen the original upper case letters. Here is how we use it.
CSSp { font-variant: small-caps; }Use it with caution since it is not a good idea to apply it to a text paragraph.