CSS Font Properties

CSS font properties define font families, weights, sizes, and styles.

Difference Between Serif and Sans-serif Fonts

Serif vs. Sans-serif

On computer screens, sans-serif fonts are considered easier to read than serif fonts.

CSS Fonts

In CSS, there are two types of font family names:

  • Generic font families - a group of font families with a similar look (like "Serif" or "Monospace")
  • Specific font families - a specific font family (like "Times" or "Courier")
Generic Family Font Family Description
Serif Times New Roman, Georgia Serif fonts have small lines at the ends of characters.
Sans-serif Arial, Verdana "Sans" means without - these fonts do not have the small lines at the ends of characters.
Monospace Courier New, Lucida Console All monospace characters have the same width.

Font Families

The font-family property sets the font family for text.

The font-family property should include several font names as a "fallback" system. If the browser does not support the first font, it will try the next font.

Note: If the font family name contains more than one word, it must be in quotation marks, e.g., font-family: "Times New Roman", Times, serif;

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

For commonly used font combinations, see our Web Safe Font Combinations.

Font Style

The font-style property is mainly used to specify italic text.

This property has three values:

  • normal - Displays the text normally
  • italic - Displays the text in italics
  • oblique - Displays the text in an oblique (slanted) manner, similar to italics but less supported
p.normal {font-style: normal;}
p.italic {font-style: italic;}
p.oblique {font-style: oblique;}

Font Size

The font-size property sets the size of the text.

Being able to manage text size is important in web design. However, you should not use it to make a paragraph look like a heading, or a heading look like a paragraph.

Always use the correct HTML tags, such as <h1> - <h6> for headings and <p> for paragraphs.

Font size values can be absolute or relative sizes.

Absolute Size:

  • Sets the text to a specified size
  • Does not allow user to resize the text in all browsers
  • Useful when the physical size of the output is known

Relative Size:

  • Sets the size relative to surrounding elements
  • Allows user to resize text in browsers

If you do not specify a font size, the default size for normal text paragraphs is 16px (16px=1em).

Setting Font Size with Pixels

Setting the size of text in pixels gives you full control over the text size:

h1 {font-size: 40px;}
h2 {font-size: 30px;}
p {font-size: 14px;}

The above example allows users to resize the text using browser zoom tools in Internet Explorer 9, Firefox, Chrome, Opera, and Safari. However, the entire page will be zoomed, not just the text.

Setting Font Size with em

To avoid the resizing problem in Internet Explorer, many developers use the em unit instead of pixels.

The em unit is recommended by W3C.

1em is equal to the current font size. The default text size in browsers is 16px.

Thus, the default size of 1em is 16px. You can convert pixels to em using this formula: px/16=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 */

In the above example, the font size in em is the same as in the pixel example. However, using em units allows text resizing in all browsers.

Unfortunately, Internet Explorer still has issues. When resizing text, it may appear larger or smaller than normal.

Using Percent and em Combination

For a solution that works in all browsers, set the default font size of the <body> element to a percentage:

body {font-size: 100%;}
h1 {font-size: 2.5em;}
h2 {font-size: 1.875em;}
p {font-size: 0.875em;}

This code is effective. It displays text at the same size in all browsers and allows text resizing in all browsers.

All CSS Font Properties

Property Description
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Displays text in a small-caps font or a normal font
font-weight Specifies the weight of the font

More Examples

Setting Font Weight

This example demonstrates how to set the font weight.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>WebCode101(webcode101.com)</title>
<style>
    p.normal {font-weight: normal;}
    p.light {font-weight: lighter;}
    p.thick {font-weight: bold;}
    p.thicker {font-weight: 900;}
</style>
</head>

<body>
    <p class="normal">This is a paragraph.</p>
    <p class="light">This is a paragraph.</p>
    <p class="thick">This is a paragraph.</p>
    <p class="thicker">This is a paragraph.</p>
</body>

</html>

Setting Font Variant

This example demonstrates how to set the font variant.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>WebCode101(webcode101.com)</title>
<style>
    p.normal {font-variant: normal;}
    p.small {font-variant: small-caps;}
</style>
</head>

<body>
    <p class="normal">My name is Hege Refsnes.</p>
    <p class="small">My name is Hege Refsnes.</p>
</body>

</html>

All Font Properties in One Declaration

This example demonstrates how to use the shorthand property to set all font properties in one declaration.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>WebCode101(webcode101.com)</title>
<style>
p.ex1 {
    font: 15px arial, sans-serif;
}

p.ex2 {
    font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>

<body>
    <p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
    <p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
</body>
</html>