The font family property is a prioritized list of font names for an element. It is possible (and good practice) to specify more than one font typeface in case the user does not have the font you are specifying loaded on their computer system. In CSS, your browser will use the first font that it recognizes; hence we always list our font families in a priority order:

body {
font-family: Arial,Courier,sans-serif;
line-height: 1.3em;
margin: 0px;
font-size: 12px;
color: #333;
}

In the previous example, the font Arial will be used ahead of the font Courier.

There are two types of font-family values:

In a Joomla! Template CSS file, the font family is usually applied to the body tag. This specifies a main font to be used for your website body text. If you require additional styling to other Joomla! text elements, then we define those accordingly using further CSS.

body {
font-family: Arial,Helvetica,sans-serif;
}

In the previous example, the browser will look for the font Arial, then Helvetica, and if for some unknown reason the user didn't have those fonts installed on their computer device, then the browser would substitute an available sans-serif font to use.

Where you use font families having more than one word in the name, it is important to surround these font names with double quote marks. While some browsers can read these fonts without the quote marks, problems can occur if the white space in between the words is considered or ignored.

body {
font-family: Arial,"Times New Roman",sans-serif;
}

Note the Times New Roman in quotation marks.

The font size property in CSS sets the size of your text. Font sizing methods that you can utilize in CSS can either be of absolute (fixed), or relative size.

The debate regarding which method to use is as on-going as which font typeface is best for the screen. Specifying in pt or px (absolute methods) has been classified as non-W3C accessible, but allows you to style text in a confined container with more design control. If the layout of your text is important, then you may require this styling method to align your text as you wish.

If text can just spill out on the page and be resized by the user if required, then relative is the preferred and accessible method of managing font size. Relative sizing can be done using em measurement or % (percent).

As a general rule:

1em = 16px = 12pt = 100%

To cater for all browsers and retain accessibility standards on your website, most designers are trying to adopt the em relative text sizing method. This is the preferred text resizing method by the W3C standards.

The way em sizing works is: 1em is equal to the current font size of the element in question. If you have not set a font size in other areas of your CSS, then it will take the user's default browser font size. The default text size in browsers is 16px, and usually a font such as Arial font or Times. This means the default size of 1em = 16px. If you were to set a font size for the body, say 18px, then 1em = 18px.

For general body text, you may see something similar to this Joomla! CSS file:

body {
font-family: Helvetica,Arial,sans-serif;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #333;
}

Once the main body text font size has been specified, as in the previous example, other text elements in your CSS can then be set relative to this using em's:

h2, .contentheading {
padding: 0;
font-family: Arial, Helvetica,sans-serif;
font-size: 1.4em;
font-weight: normal;
vertical-align: bottom;
color: #333;
text-align: left;
width: 100%;
}

Sizing using percentages works, as you would probably expect a percentage to work. Just like em's, using a percentage styling method is relative.

If the parent item has a font size of 24px, and the child has a percentage of 50%, then it will be displayed with font size of 12px.

Just like em's , one popular technique for sizing using percentages is to set a parent font size on the body of your CSS, and then use percentages for all other styling. Everything will be relative to that one parent size which is set:

.tool-text {
font-size: 95%;
margin: 0;
}

Pixels are fixed size units that are used in screen media. One pixel is equal to one dot on your screen and when using pixels to size your text you are telling the browsers to render the text exactly that number of pixels high. Using pixels to define our text size provides us with excellent control over the size and layout of the text. Using pixels, however, does not allow the ability to scale upwards for visually impaired users, nor scale downwards for mobile devices.

Sizing your text using pixels will allow browsers such as Firefox and Safari to still retain some text control, but when viewing with Internet Explorer 6 the user will not be able to resize this absolute styled text. All in all, setting font sizes with px is an accurate method, but do take into consideration the IE 6 lack of accessibility.

The unit of points (pt) is usually associated with print media. Points are much like pixels in that they are of fixed size and cannot be scaled to size. Just like pixels are accurate for screen resolutions, points are accurate on paper.

72pts = one inch

It is not good practice to use pt styling for your Joomla! Template CSS, but it would be good to use points when creating a separate print.css stylesheet.

An example of print CSS may look like:

body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
}

body {
font-style: italic;
}

p
{
font-weight: bold;
}

p
{
font: italic bold 900 12px/14px arial;
}