Supported by :   My Law Forms Ltd. - Deed polls and Tenancy Agreements

CSS Basics – font definitions

CSS fontsSince font tags are deprecated, CSS should now be used to specify document fonts. There are several properties available of which, the most commonly used are the font-family and font-size.

eg.

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;

font-family

font-family defines the font that is to be used on a given element. This needs to be the actual name of a font and if it has spaces then it will need quotes around it. A list of fonts to use should be provided in the event that the first font is not found, so that a suitable substitute may be used. The list should end with a generic font-family such as serif, sans-serif, cursive, fantasy, or monospace. Basic fonts include arial, times, “times new roman”, courier, helvetica, and verdana.

p {font-family:arial,verdana,sans-serif}

font-size

Font-size can be set using values such as xx-small or large but more often it is better to use one of three specific units: em, pixels, or percentages. Both em and percentages are relative to the parent element; because of this, be careful when nesting styles and defining font-sizes, as each one will be relative to the parent element. So if you have a base size of 10px, 2em would equal 20px and 200% would equal 20px.

Pixels will give more control on most standard displays from screen to screen by bypassing the users default font size. Because the font bypasses the users default it is not generally recommended. If someone has a default font size of 40px and your page is set to 10px it’s going to be much too small for the user. They may have to size up the page in order to see it clearly.

Where possible a relative font-size should be used. With an increase in use of mobile phones and other web-browsing devices, there is no guarantee that website visitors are using a ‘standard monitor’ any more.

This entry was posted on Monday, August 6th, 2007 at 1:46 pm and is filed under CSS Tips, XHTML tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

One Response to “CSS Basics – font definitions”

  1. freelancer says:

    I’ve heard base fonts list is different for different operating systems. Is this correct? Is there at least one font which exists by default on Windows, Mac, and Linux? I suspect Arial, but not sure.