Slacker's Guide to HTML:

Font Properties in CSS

Font Family
Font Style
Font Variant
Font Weight
Font Size
Font

The font specification is used to specify the family (face), generic or not, of the font, the size, the weight, the variant, and the style of certain text. Font roperties differ from text properties in that the font is specific to the actual characters (the numbers, letters, and symbols your keyboard makes) while text properties entail the spacing and formatting of that text in relation to the environment it's in.

Properties, as you probably don't remember from the introduction, are one half of the declaration. The declaration is the part of the style that says what's happening to what. This is the half of the declaration that says what will be changed, but not what it will be changed to. For more on that, head back to the intro.

Font-family

Font-family is used to define what face the font will take on instead of the default font face, which in most cases is Times New Roman, or Times. When writing a style to define font-family it is good practice to always use three (or more) different font choices for the visitors browser to choose from. I'll explain why now.

Let's assume that you want your page to be in the font Reznor, which is a font quite similiar to Arial. Most computers will not have Reznor stored on them and therefore most browsers will not be able to handle that request. Simple enough. So, in order to stop the browser from then displaying Times as the default since it can't handle Reznor, you give it a second choice. Arial, which is similiar to Reznor, should be the likely candidate. veryone has Arial installed on their PC. So we'll now assume that you want to use Arial as the backup font. Let's even go further and assume that this browser is quite old and obselete, but you still want the visitor to get at least a similiar font. You then specify a generic font-family. The generic font families are listed below:

Generic Font families

serif (ex. Times)
sans-serif (ex. Arial)
cursive (ex. "Brush Script")
fantasy (ex. Braggadocio)
monospace (ex. Courier)

So, the style would resemble the example below if you wanted Reznor as your first choice, Arial as a backup, and sans-serif as a last-ditch effort:

p {font-family: Reznor, Arial, sans-serif;}

And, as always, you can use other HTML tags to define which text will be affected. You don't have to just apply these font properties to the p tag. If you had written this:

b {font-family: Reznor, Arial, sans-serif;}

...then all text enclosed within the bold (b) tag would be affected.

Also, as a side note, whenever you are writing styles for fonts that are made up of more than one word (ex. courier new), then enclose it in quotation marks. Example:

pre {font-family: "courier new";}

Font-style

The font-style property is used to specify whether a font will appear as normal, italic, or oblique. You specify these properties just the same as you would specify the font-family properties, like so:

p {font-style: italic;}

And in this case all text enclosed within the paragraph (p) tag will appear as italic. Also, like font-family (and most styles), you can interchange the preceding HTML tags to your heart's content:

body {font-style: oblique;}

In the above scenario, all text within the body of the document would appear as italic.

Font-variant

The font-variant property is used to denote whether a font will or will not appear in all small-caps or as normal caps. Normal caps, which means the cap sizes change as you want them to, and is the default setting, is suggested. Small-caps will block out capitals and make them into all small case letters. You would write this style like so:

address {font-variant: small-caps;}

That would give all text within the address tag small-caps. Quite self-explanatory. Instead of being capital letters they will be lower-case.

Font-weight

Font-weight is the designation of weight to a font. Bold is an example of font-weight, and font-weight can be measured both absolutely and relatively. Measuring the weight of a font absolutely means that you are using an absolute (unchanging) command to signify the weight. Bold is unchanging, or absolute, because bold will always be bold. No matter what the previous weight was the new weight will be bold. On the other hand, relative sizes include the following:

Bolder
Lighter

The absolute weights are as follows:

Normal
Bold
100-900

Here is an example of a few font-weight styles:

i {font-weight: bolder}
xmp {font-weight: normal}
listing {font-weight: 900}

In the first example, all italic text would be one weight bolder than the previous text. That is a relative measurement. It is getting one step bolder.
In the second example all text within example (xmp) tags would be normal. That is an absolute measurement. There is only one normal.
The third example makes all text within listing tags have a weight of 900. *(A boldness setting of 900 out of 900. On this scale 100 is very light, 400 is normal, and 900 is boldest. Most browsers do not handle this scale well and will round off 500 to 400 and 700 to 900, etc.)

Font-size

Font-size, like font-weight, can be measured both absolutely and relatively. First we will review the relative ways to program font sizes.

Relative Sizes

Percentage:

You can use percentage to signify new font sizes quite easily. This is good to use if you're not sure what fint'size you are at in the first place. If you want to make something twice as big and you don't know the default pixel size, then you can't double the default pixel size by saying 200%.

p {font-size: 200%;}

Larger or Smaller:

You can use larger or smaller as properties, too. Using either of these two keywords will make the present text one size smaller, just as the big and small tags do in HTML. Look at this example:

b {font-size: larger;}

And here is the result of that code. I will put the word "larger" inside the bold tag and it will take on the larger style and the bold:

The word larger is larger than the other words.

Absolute Sizes:

xx-small
x-small
small
medium
large
x-large
xx-large

Each of those keywords, when used, will change the text to just what it says, xx-small to xx-large. Trust me, the xx-small keyword DOES make extra, extra small text, and the xx-large keyword produces some extra, extra large text.

You would implement this like so:

i {font-size: x-large;}

Using that example, all italic text would also appear extra large.

Point and Pixel Sizes:

You would designate point sizes using the pt suffix and the pixel size using the px suffix. I don't know what equals the default font-size in pixels, but I do know that 12 points is the accepted default font-size in point. Here is an example of making all bold text sligntly larger than normal:

b {font-size: 15pt;}

Very simple. You can change the font-size on any text element.

Font

The font style is used to list a multiple of styles to apply to a single tag (or, of course, multiple tags). It runs like so:

p {font: italic bold 12pt/15pt Times, serif;}

This example specifies for p to be a bold and italic font with a point size of 12 points and a line hieght of 15 points. P is also either Times or any serif font. It is all the font styles wrapped up into one line of code.

That's it for font properties!

HTML Link Tutorial

CSS and Links

CSS Cursor Effects