CSS Web Safe Fonts

The CSS font properties are used in order to define the different attributes of the fonts used on a page. Here are some of the attributes that it works on:

  • Family
  • Boldness
  • Size
  • Style

CSS Font Family Names

There are two types of font family names in CSS. The first one is the generic. This refers to fonts that have a similar look or appearance. One example is Sans. The second type is the font family. A good example of this would Arial. Serif fonts are characterized by short lines at the ends of each line of the letter. Sans-serif is characterized by the absence of these lines, the word sans actually means without. Monospace characters are characterized by having the same width as the others.

CSS Web Safe Fonts

The font to be used on a document is determined with the use of the font family property. In practice, this property holds several font types in reserve which will then be utilized should the first font that was chosen is actually not compatible. If the font that you have chosen has more than one word to it you have to add quotation marks to it. Here is an example code that you can use:

p{font-family:”Times New Roman”, Times, serif}

The Font Style

There are other values that you can change when it comes to the font style property. These are the following:

  • Normal- The text would appear as normal.
  • Italic- The text would be italicized.
  • Oblique- This is similar to being italicized.

Here are sample codes for all three values of this property:

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

Font Size Property

Using this property, you should be able to change the sizes of the text so that it would fit your needs. The ability to change the sizes of fonts is crucial when it comes to designing websites. It is important to remember that when you are designing websites, you should not use the font size in order to distinguish the heading from the paragraph. There are two ways of designating the font size value. It can either be absolute size or relative size.

Absolute size means that the size of the font is fixed to a known value. This is known when the output is fixed. Relative size means that the size of the font would depend on the elements around it. The user is able to change the font size.

Here is how you can set the font size using pixels:

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

Using em for Setting Font Sizes

Some experts recommend that users go for em instead of pixels in setting the sizes of the font by pixels. The default size of em is at 16 pixels. Here are some sample codes for setting the font size by em:

h1 {font-size:2.5em;} /* 40px/16=2.5em */

h2 {font-size:1.875em;} /* 30px/16=1.875em */

p {font-size:0.875em;} /* 14px/16=0.875em */

These are just some of the things that you should learn when setting the sizes of fonts.