Styling Fonts With CSS
Lessons Covered


In the previous lesson you learnt how to style text. In this lesson you will learn about fonts and the properties associated with them.

There are two names to which fonts are categorised; generic family and font family.

The generic family can be best described as the font group name. This is a collection of fonts which have an identical appearance. Example: serif fonts and sans serif fonts.

The font family on the other hand describes a particular font. Examples are Arial ( which belong to the generic family sans serif ) and Times New Roman ( which belong to the generic family serif ).


Font-Family Property

The font-family property specifies a number of fonts to be used when displaying a web page. When doing this, the font you want to use should be listed first followed by backup or substitute fonts. These backup fonts are used in the event that your chosen font is not available on the users computer.

It is recommended that when specifying values for the font-family property you end with the generic family name. This will allow web pages to be displayed with a font belonging to the same family as your primary preference if this and all the other alternative fonts you suggested is not available.

In the table below there are two generic family names and some fonts associated with them:

Generic Family Example of Font Family
Serif Times New Roman, Book Antiqua, Georgia
Sans-Serif Tahoma, Arial, Trebuchet MS


A possible layout in a stylesheet could look something like this: 

body
{
font-family: "Times New Roman", Georgia, "Book Antiqua", serif; 
}


In the above code snippet you will note that more than one font is listed. If Times New Roman is not available then Georgia will be the font used and if Georgia is not available Book Antiqua will be the font used. If none of these fonts are available then another font belonging to the serif generic family will be used. That's all there is to it.

A key point to note is that font names that consist of more than one words has to be placed in quotation marks. In the example above, Times New Roman and Book Antiqua are examples. Georgia is a single font name and hence does not require quotation marks.


Font-Style Property

The CSS font-style property is used to format the font to be displayed in italic, normal or oblique ( these are the three values of the font style property ).

The example below demonstrates this property 

#italic
{
font-style: italic;
}

h4
{
font-style: oblique;
{

arrow  Click to see result

Note: Oblique is closely related to italic text but is not very well supported by browsers. The value normal displays text normally.


Font-Weight Property

The font-weight property is used when you wish to display text in bold. The values are bold and normal . Numbers may also be used as a value. The numbers fall between 100 and 900 .

Defined in a style sheet: 

#bold_text    <----- Remember id and class ? Here we are setting an id
{
font-weight: bold;
}

arrow  Click to see result


Font-Size Property

The font-size property defines how big your text appears ( i.e. the size of your text ). The value of the font size property can be specified in percentage, pixels and em.

Defined in a style sheet (in this example it is applied to level 4 headings): 

h4
{
font-size: 48 px;
}

arrow  Click to see result

Note: 16 pixels is equivalent to 1 em by default. Therefore 48 pixels would be equivalent to 3 em (49/16 = 3).


Font-Variant Property

The font-variant property has the possible values of normal and small-caps. With the small caps value then all text is capitalized. Common letters appear in smaller caps when compared to letters that have already been capitalized.

The statement, "Kingston is the capital of Jamaica" with the small caps value would show every single letter in capital. However, the " ingston " in Kingston would appear smaller when compared to the K. The same format would apply for all other letters.

Here is the example:

style.css

#cap_letters
{
font-variant: small-caps;
}


webpage.html

<p id="cap_letters"> Kingston is the capital of Jamaica </p>

arrow  Click to see result



Hope you are finding the formatting using CSS useful and fun. We will now progress to the lesson to backgrounds.


Previous Lesson Previous Lesson - Text                                 Next Lesson - Backgrounds Next Lesson