CSS: Changing Font Properties

CSS can give you practically unlimited ways to change how your text is displayed. From changing the size to making it bold or underlined. You can also change what font the text is displayed to the user. Do you like Times New Roman or Verdana? While most of the examples so far have been manipulating text colors, size and format. This section will be more in depth about changing font properties.

Changing Font Colors

As you already know from earlier examples, in order for you to change the text color, we need to use the color property. But we aren't just limited to using keywords like 'red', 'blue' or 'lightGreen'.

There are three methods of adding color to your text:

p {color: black;} // Using color names
p {color: #000000;} //Using hexadecimal values
p {color: rgb(0,0,0)} //Using RGB values 

You can find more information about colors in HTML/CSS at our HTML Color Codes page.

Changing Font Families

Font families allow you to define what fonts should be used within your web pages. The two biggest groups of fonts can be placed within the “serif” and “sans-serif” groups. For those of you that understand French, 'sans' means 'without'. A 'serif' is nothing more than small lines that extend beyond the actual letters. Times New Roman is an example of a serif font. From a usability standpoint 'sans-serif' fonts are typically easier on the eyes. This makes it easier for your users to read your content without straining. Some common examples: p {font-family: serif; }

p {font-family: sans-serif; }
p {font-family: Times New Roman; } 

You can also create a list of fonts in order to prevent the browser from defaulting to a standard font. This has the extra benefit of making sure you supply a font that a visitor can actually display. If you only list “Arial Black” as your font, it may not display because the visitor may not have that font installed.

p{font-family: Verdana, Georgia, Times, serif;} 

The above example lists off three specific fonts and a general “catch-all” font. What this CSS rule is saying is:

“Show my site in Verdana. If you can not show it in Verdana, then move to Georgia. If you can't show it in Georgia then use Times. If you can't use any of these fonts, use only a serif font.”

Changing Font Sizes Just like positioning background images (see earlier), there are three ways to change font sizes: pixel values, percentages and “fuzzy” keywords.

p {font-size: 12px;}
p {font-size: 80%;}
p {font-size: large;} 

The pixel method is by far the most precise. The percent method is based off of the web browers default font size (80% of 10px = 8px). The keyword method is the easiest to type in, but lacks the preciseness you may require.

Some common keywords are: xx-small, x-small, small, medium, large, x-large and xx-large.

Changing Font Styles and Weight

Font styles allow you to make your text to italic, oblique or normal.

p {font-style: italic;}
p {font-style: oblique;} 

In order to change the weight (thickness) of a font, you will need to use the 'font-weight' property. The 'font-weight' property can either contain a number from 100 (thinnest) to 900 (thickest) or a keyword. P {font-weight: 100; } p {font-weight: bolder;}

Some additional keywords are: bold, bolder and normal.

Permalink