Font Specifications
Font family
A font family is a group of fonts that resemble each other. When you are defining your selector to set the font family your text will be rendered in you can use Exact Names that refer to fonts that are installed on the enduser’s system (Ariel, Verdana) or you can define Generic names as a last resort.
Possible Generic Font Family names include:
cursive, fantasy, mono-space, serif and sans-serif.
When you are defining Generic families do not use quotes.
When you define a selector with more than one font you must use quotes to enclose Family names that include spaces and you should use capital letters where necessary.
Example:
BODY { font-family: "Times New Roman", Verdana, serif }
Font Style
The font style variations of normal, italic, or oblique can be defined Normal is the default style if no font style is set.
P { font-style: italic}
Font Variant
The font variant can be used to choose a variation of a font. In the example below the small-caps value is defined.
H3 { font-variant: small-caps }
Font Weight
The font weight refers to the boldness or lightness of a font. Keywords can be used to set the value or you can use a numeric set of values from 100 to 900 in increments of 100 as: 100, 200, 300, 400, 500, 600, 700, 800, 900 .
The keywords bolder and lighter are used to set values that are relative to the parent element’s font weight.
The keyword bold is equal to the numeric value 700.
An example would be:
<style>
P { font-weight: normal }
P #12 { font-weight: 900 }
</style>
this is normal
this is very bold
Font Size
The font size refers to the size of the font.
The following types of values can be set:
absolute-size, relative-size, length, percentage .
The absolute-size keywords are a series of font sizes that are set by the enduser’s viewing agent.
The values you can choose from are:
xx-small, x-small, small, medium, large, x-large, xx-large
Relative Sizes are dependent on the parent element. When defining a relative size the resulting font size is chosen from the Font table of the enduser’s agent.
The values you can choose from are:
larger, smaller
Leghth
When you apply a length the value can be either relative to the parent or it can be an absolute value.
Relative values are:
em Elements Mheight
ex Elements Xheight
px pixels
Absolute values are:
pt points
in inches
cm centimeters
mm millimeters
pc picas
Percentage
The percentage value is also relative to the parent element.
The selector would be defined as follows:
<style>
P #120 { font-size: 120% }
<style>
Here is a simulation of what it would look like:
<P>this is normal<P ID=120>this is text is 20% larger</P> </P>
Helpful Tip
To make your life easier you should begin by setting up a font definition list that you can include in all of your CSS files.
Using IDs you can set up a list of font specs that you can apply in your documents.
#font12px {font-size:12px}
#font14px {font-size:14px}
#font16px {font-size:16px}
#font20px {font-size:20px}
#font24px {font-size:24px}
#font12pxRed {font-size:12px;color:#FF0600}
#font14pxRed {font-size:14px;color:#FF0600}
#font16pxRed {font-size:16px;color:#FF0600}
#font20pxRed {font-size:20px;color:#FF0600}
#font24pxRed {font-size:24px;color:#FF0600}
Apply the fonts in a <div id=”font16pxRed”> or where ever they are needed.
Setting up a basic list of fonts will allow you to apply site wide colors that match your theme or company colors.
