Learn how to build and design websites with our tutorials.

CSS and CSS3 Font Tutorial

View Tutorial Contents


CSS allows you to define the size and appearance of text.

CSS font-size Property

The CSS font-size property allows you to adjust the size of a text.

The value of the font-size property can be either keywords, absolute or relative. An HTML element will inherit the font size of its parent element unless you override it.

You should use the proper HTML tags. For example, use <h1> through <h6> tags for headings and <p> tags for paragraphs.

The table below shows the values of the font-size property that can be used.

Property Values
font-size xx-small, x-small, small, medium (default), large, x-large, xx-large, smaller, larger, length (px, cm, etc.), initial, inherit;

font-size Property Values

Value Description
medium Sets the font size to a medium. This is default
xx-small Sets the font size to xx-small
x-small Sets the font size to extra small
small Sets the font size to small
large Sets the font size to large
x-large Sets the font size to extra large
xx-large Sets the font size to xx-large
smaller Sets the font size to a smaller size than the parent element
larger Sets the font size to a larger size than the parent element
length Sets the font size to a fixed size (px, cm, etc.)
percentage Sets the font size to a percent of the parent element's font size
initial Sets this property to its default value
inherit Inherits this property from its parent element

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

The CSS example below shows you how to adjust the font size of texts.


p.px{
font-size: 18px;
}
p.em{
font-size: 1.1em;
}
p.percent{
font-size: 125%;
}

CSS px Font Size Units

It is generally NOT recommended that you use px units when defining font sizes. The reasons are that some web browses (Internet Explorer 9 and below) prevent users from resizing their text size if they want. If you are concerned about usability, this can be a pretty big deal. The other reason is that it makes changing font sizes when making a responsive web design more challenging.

CSS em Font Size Units

It is recommended that you use em units when defining font sizes because it is a scalable unit. The em unit font size is relative to its parent element. For example, if the the parent's font size if 16px, 1em is 16px, 1.5em is 24px and 2em is 32px.

One way to get around Internet Explorer 9 and earlier's inability to resize text we can use the technique shown in the CSS example below. It modifies the base font size of the body element using a percentage. This is done to make sure that 1em is equal to 16px. For example, now for child elements of the body element that have a font size of 1.5em that would be equal to 24px and for those that have a font size of 2em that would be equal to 32px.


body { font-size: 100%; }	/* = 16px */
h1 { font-size: 2em; } 		/* = 32px */
h1 { font-size: 1.5em; } 	/* = 24px */
p  { font-size: 1em; } 		/* = 16px */


CSS font-family Property

The CSS font-family property allows you to specify the font for an HTML element.

The syntax for setting a font-family property is shown below.


font-family: font|initial|inherit;

The font-family property can have multiple values (font names), each separated by a coma. If the web browser does not support the first font, it tries the next font, and so on. If a font name contains a white-space, it must be placed within quotes.

The CSS example below shows you how to set a font-family property.


h1{
font-family: cursive, arial, tahoma, sans-serif;
}
p{
font-family: arial, serif;
}

An element's font-family property value will inherited if it is not explicitly specified.

There are two types of font family names:

family-name The name of a font-family, for example, times, courier, arial, etc.
generic-family The name of a generic-family, for example, serif, "sans-serif", cursive, fantasy, monospace