Font Properties
There are many CSS properties to use in your style sheets. Here are some of the more popular properties and how to use them.
font-family
Defines the font family that the text should be displayed in. (Note: if the computer viewing your page doesn't have the font specified, the browser will guess. This can cause strange effects. It is best to use standard fonts, or the generic font names.)
To define specific font families, write the family names in the order you would like them displayed (most accurate to your design first). Separate each family with a comma:
font-family : arial,geneva,helvetica ;
To define a generic font family:
font-family : serif;Generic font families allow the browser to choose the font most appropriate that is included on the current system. These are:
- serif
- sans-serif
- monospace
- cursive
- fantasy
font-size
Defines the size of the font. The font size can be specified as an exact size, a relative size, a length, or a percentage (of the existing space).
To define the exact size, simply specify the size in one of the following measurements:
- ems (font-size : 13em;)
- pixels (font-size : 13px;)
- picas (font-size : 13pc;)
- points (font-size : 13pt;)
- inches (font-size : 13in;)
- centimeters (font-size : 13cm)
- milimeters (font-size : 13mm)
There are seven standard sizes in HTML and XML documents, you can define your font-size based on those sizes as well (standard text is size medium):
- font-size : xx-small;
- font-size : x-small;
- font-size : small;
- font-size : medium;
- font-size : large;
- font-size : x-large;
- font-size : xx-large;
To define your font-size as relative to the surrounding text, you can simply say:
- font-size : larger;
- font-size : smaller;
font-style
Defines whether the font is italic, oblique, or normal.
- font-style : italic;
- font-style : oblique;
- font-style : normal; (the default)
font-variant
Defines whether the font is normal or small-caps. Try these styles in your Web page:
- font-variant : small-caps;
- font-variant : normal; (the default)
font-weight
Defines how dark or light the text is. These are the options for font-weight. Try out these styles in your Web page.
- font-weight : bold;
- font-weight : bolder;
- font-weight : lighter;
- font-weight : 100;
- font-weight : 200;
- font-weight : 300;
- font-weight : 400;
- font-weight : 500;
- font-weight : 600;
- font-weight : 700;
- font-weight : 800;
- font-weight : 900;
- font-weight : normal; (the default)
Next Page: Other Text Modifications > 1, 2, 3
