CSS Fonts

CSS font properties define the font families, sizes, boldness, and styles (such as italics) of the text.

Font Families

There are two different types of font families in CSS:

  • generic family – a group of font families with a similar look (like “Serif” or “Monospace”)
  • font family – a specific font family (like “Times New Roman” or “Arial”)

In addition to specific font families, CSS defines five generic font families:

  • Serif
  • Sans-serif
  • Monospace
  • Cursive
  • Fantasy

Almost all browsers support these generic font families.

Font-family Property

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

You should set multiple font families for the font-family property, with each font family separated by commas. If the browser does not support the first font family, it will try the next one.For example:

h1 {
    font-family: Georgia, serif;

Note: It’s best to set at least one generic font family. This will ensure that the browser chooses an alternate font family if it cannot match any font family.

Font-style Property

The font-style property is used to set the italic text.

The font-style property has the following 3 values:

  • normal
  • italic
  • oblique

Here is an example:

p.normal {
    font-style: normal;

p.italic {
    font-style: italic;

p.oblique {
    font-style: oblique;

When the property values are set to oblique and italic, the two paragraphs of text have the same style.However, if the current font family does not define an italic style, you should use oblique instead of italic.

Font-size Property

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

A reasonable text size in a web page is very important, which will make the page very coordinated.

The font-size property value can be absolute or relative.

Absolute size:

Sets the text to a specified size

Does not allow a user to change the text size in all browsers (bad for accessibility reasons)

Absolute size is useful when the physical size of the output is known

Relative size:

Sets the size relative to surrounding elements

Allows a user to change the text size in browsers

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

set the text size in pixels

By setting the text size in pixels, you can fully control the text size, for example:

h1 {
h2 {
p {

If you use pixels to set the text size, you cannot resize the text in Internet Explorer, but you can still use the zoom tool to resize the entire page.

set the text size in em

If you use em to set the text size, the text can be resized in all browsers, so the W3C recommends to use em.

1em is equivalent to the current font size. The default text size of the browser is 16px, which means that the default size of 1em is 16px.

You can convert pixels to em by the following formula:


Here is an example:

h1 {
    font-size: 3.75em; /* 60px/16=3.75em */

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

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

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

Unfortunately, there are still problems in Internet Explorer. When resizing text, the text size will be larger or smaller than the normal size.

use the percentage and em together

The best way to solve the above problem is to use the percentage to set the default font size for the parent element. The following example sets the default font size to 100% for the <body> element:

body {
    font-size: 100%;

h1 {
    font-size: 3.75em;

h2 {
    font-size: 2.5em;

p {
    font-size: 0.875em;

In this way, the text is displayed in all browsers with the same font size, which can be resized dynamically through the browser’s toolbar menu.

Font-weight Property

The font-weight property sets the boldness of the text.

p.normal {
    font-weight: normal;

p.thick {
    font-weight: bold;

The font-weight property value can also be an integer value of 100-900. 100 means the finest text and 900 means the thickest text. 400 is equal to normal and 700 is equal to bold.

Leave a Comment

Your email address will not be published.