Home CSS Font Use FONT to Cover all the Bases
Search MS Office A-Z   |   Search Web Pages/ Design A-Z

Use FONT to Cover all the Bases

Here’s what the markup code looks like in a style sheet for a family of fonts, as well as for a specific font:

p {font-family: verdana;}
p {font-family: cursive;}


The font-size property sets the actual or relative size of the font used. Actual sizes can be set in points, centimeters, pixels, or inches. Relative sizes are expressed in words (such as Small) or percentages (such as 150%). Here are examples of code for each:

h1 {font-size: 28pt;}
h2 {font-size: 150%;}



The font-style property is used to specify Normal, Italic, or Oblique type. Italic selects the italic form of the current font, whereas the Oblique value slants the text and therefore may resemble Italic. The markup code may look like this:

.fontstyle {font-style: italic;}


The font-weight property sets the weight, or darkness, of the text. Values for font-weight are set from 100 to 900 in increments of 100. Keywords such as Lighter, Normal, Bold, and Bolder also are available. Examples of the code may look like this:

h3 {font-weight: 700;}
.boldtext {font-size: 12pt; font-weight: bold;}



Style sheets give you a variety of ways to use typefaces for your Web pages.

The font-variant property has only two values that currently have support: Normal and Small-Caps. Thus, the code looks like this:

.smallcaps {font-size: 18pt; font-variant: small-caps;}


FONT Covers All The Bases

You can combine all of the aforementioned examples to create one concise statement using the FONT property. FONT also provides for another attribute known as line-height, which specifies the distance between two lines of text. The basic order for using attributes with FONT in your code is:

font: font-style font-variant font-weight font-size/line-height font-family


As a result, an example of using FONT in this manner within your code might look like this:

.fullexample {font: italic small-caps 200% 18pt/24pt verdana;}

Home CSS Font Use FONT to Cover all the Bases
Search MS Office A-Z   |   Search Web Pages/ Design A-Z