CSS Basics - font definitions
Since 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.










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.
August 14th, 2007 at 5:07 pm