CSS Styling Fonts

Wednesday, March 14, 2012

tags CSS

CSS provides you with much control over the way your text is displayed on your web pages. Aside from applying color to text, applying style to your fonts is the also very common. When styling fonts, the general method is to apply a font-family to ensure that the style of font that you want to present to your users is achieved. This is important because there are thousands of fonts available, but not all of them are installed on your user's computers, nor do all different types of browsers support all fonts. So for this reason, it is important to have more than one font type available for the user's browser to use to style the text on the screen. The most common font families used on web pages are Serif and Sans-Serif. Although there are other types of families such as Monospaced, Fantasy, and Script which can be used on web pages, but are not commonly used because they are not optimal for reading.

Serif vs Sans-Serif

The main difference between Sans-Serif and Serif fonts is that the Sans-Serif fonts do not include the small lines at the end of characters as do the serif fonts do. Research has indicated that Sans-Serif fonts are much easier to read on a computer monitor than serif fonts, so it is highly suggested that you use Sans-Serif fonts for your web pages. Here is an example of the difference between these two font families.


This text is styled with a Sans-Serif font.
This text is styled with a Serif font.
This text is styled with a Monospaced font.
This text is styled with a Fantasy font. Your browser may not support this font.
This text is styled with a Script font. Your browser may not support this font.

Font Family

Since it will be difficult to know which fonts are supported by your users' computers, rather than assigning one font value to apply to your text, you should use the font-family property instead. The font-family property should hold several font names as possible "alternatives". If the browser does not support the first font, it tries the next font on the list of values. Start the list of values with the font you prefer to use , and end with a generic family. Specifying a family will allow the browser pick a similar font in the generic family, if no other fonts are available from this values you provided. If the name of a font consists of more than one word, it must be placed within quotation marks, such as with the example: "Times New Roman". More than one font family value is specified in a comma-separated list.

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

Font Style

The font-style property is most commonly used to style italic text. This method is preferred over using the <i> HTML element. This property has three values you can assign.

  • normal
  • italic
  • oblique (similar to italic, but less supported by most browsers)

p {font-style:italic;}This text is styled with italics.

Font Size

The font-size property is used to assign the size of the text. It is not recommended that you use font size to give your text a semantic meaning. For instance, if you need to have headings in your web page, do not use the font-size property to achieve this. Use HTML elements such as heading <h1-h6> to give meaning to your text. The font-size property is very flexible. Values can be absolute, or relative in size. Keep in mind that an absolute size will not allow the user to change the text size via their browser settings. However, using relative sizing values, will set the size of your text relative to other elements on the page. It also allows the user to change the text using browser tools. You should note that if you do not set the font-size property, the default size for text is 1em (16px). Here are some examples.

body {font-size:100%;}
p {font-size:1.5em;}
.txt {font-size:12px;}

Font Weight

CSS provides a lot of control over the weight (boldness) of your font. Font weights should be assigned in multiples of 100. The values range from bold, bolder, lighter, normal, and 100-900.

p {font-weight:bolder;}This text is styled with bolder weight.
p {font-weight:500;}This text is styled with a 500 weight.

Font Variant

CSS also has the ability to style your text in small-caps by using the font-variant property. Values are normal and small-caps.

p {font-variant:normal;}This text is styled with a normal variant.
p {font-variant:small-caps;}This text is styled with the small-caps variant.

Font Property (Shorthand)

Just as with the background property, the font property can be used when you have a need to apply more than one font related value. Rather than applying multiple properties, the font property allows for the use of multiple values separated by spaces. This makes the CSS style shorter, and easier to read.

  • system font
  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

The font property needs to have the order correct (from right to left) to work in most browsers. When using the font property, at the very minimum, include the font-size and font-family.

p {font: 1em "Times New Roman", Times, serif;}

You can add more values. Add the line height to your font style by placing it after the font size preceded by a slash. If you leave it off, the line height will be reflected by the font size and determined by the browser. Right before the font size is the font weight. Right before that, you can include the font-variant. To the right of the variant is the style. Finally, you have the option in CSS 2 to style your text to integrate into the operating system that they are running on by applying a system font. Values are caption, icon, menu, message-box, small-caption, and status-bar. Again, all of these optional values are optional for the use of the font property. Here is an example.

p {font: italic small-caps bold 1.5em Verdana, Arial, sans-serif;}There is the result of the font property example

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

CSS: The Missing Manual HTML CSS: The Complete Reference HTML CSS and JavaScript Editor