CSS Fonts


CSS font properties define font, bold, size, and text style.


The difference between serif and sans-serif fonts

Serif vs. Sans-serif

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


CSS Font

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

  • Universal font family - a combination of font systems with similar appearances (such as "Serif" or "Monospace")

  • Specific font family - a specific font family (such as "Times" or "Courier")

Generic familyFont familyDescription
SerifTimes New Roman
Georgia
Characters in Serif fonts have additional decorations at the end of the line
Sans-serifArial
Verdana
"Sans" means nothing-these fonts have no extra decoration at the end
MonospaceCourier New
Lucida Console
All monospace characters have the same width



Font Family

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

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

Note : If the name of the font family exceeds one word, it must be quoted, such as Font Family: "MS Mincho".

Multiple font families are indicated by a comma:

Example

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

 Try It! 

For more commonly used font combinations, take a look at our web safe font combinations . (under construction)


Font Style

Mainly used to specify the font style properties of italic text.

This property has three values:

  • Normal - display text normally

  • Italic - text displayed in italics

  • Slanted text - the text is slanted to one side (very similar to italics, but not very supported)

Example

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

 Try It! 


Font Size

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

Whether you can manage the size of text is very important in web design. However, you cannot adjust the font size to make the paragraph look like a heading, or make the heading look like a paragraph.

Be sure to use the correct HTML tags, just <h1> - <h6> for headings and <p> for paragraphs:

The font size value can be an absolute or relative size.

Absolute size:

  • Set a specified size of text

  • Do not allow users to change the text size in all browsers

  • Absolute size is useful when the physical size of the output is determined

Relative size:

  • Set the size relative to surrounding elements

  • Allow users to change the text size in the browser

Remark If you don't specify a font size, the default size is the same as a normal text paragraph, which is 16 pixels (16px=1em).


Set Font Size in Pixels

Set the size and pixels of the text, allowing you to fully control the text size:

Example

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

 Try It! 

The above example can adjust the text size by zooming the browser in Internet Explorer 9, Firefox, Chrome, Opera, and Safari.

Although the text size can be adjusted through the zoom tool of the browser, this adjustment is for the entire page, not just the text.


Use em to Set The Font Size

To avoid the inability to adjust the text in Internet Explorer, many developers use em units instead of pixels.

The unit of em size is recommended by W3C.

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

Therefore, the default size of 1em is 16px. The pixel can be converted to em by the following formula: px/16=em

Example

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 */

 Try It! 

In the above example, the text size of em is the same as the pixels in the previous example. However, if you use em units, you can adjust the text size in all browsers.

Unfortunately, it is still a problem with Internet Explorer. When adjusting the size of the text, it will be larger or smaller than the normal size.


Use Percentage and EM Combination

In all browser solutions, the default font size of the <body> element is set as a percentage:

Example

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

 Try It! 

Our code is very effective. In all browsers, the same text size can be displayed, and all browsers are allowed to scale the text size.


Examples

More Examples

Set the font bold

This example demonstrates how to set the font bold.

You can set the font shift
This example demonstrates how to set the font shift.

All font properties in one declaration
This example demonstrates how to use shorthand properties to set font properties in one declaration.


All CSS Font Properties

PropertyDescription
fontSets all font properties in one statement.
font-familySpecifies the font family of the text.
font-sizeSpecifies the font size of the text.
font-styleSpecifies the font style of the text.
font-variantDisplays text in small caps or normal fonts.
font-weightSpecifies the weight of the font.