totn CSS

CSS: font-size property

This CSS tutorial explains how to use the CSS property called font-size with syntax and examples.

Description

The CSS font-size property defines the size of the font.

Syntax

The syntax for the font-size CSS property is:

font-size: value;

Parameters or Arguments

value

The size of the font. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...
p { font-size: 12px; }
p { font-size: 14em; }
percentage Percentage value
p { font-size: 75%; }
xx-small, x-small, small, medium, large, x-large, xx-large Keyword font-sizes ranging from xx-small to xx-large,
where medium is the default size
p { font-size: large; }
smaller, larger One font-size larger or smaller than its parent element's font size
p { font-size: larger; }
inherit Element will inherit the font-size from its parent element
p { font-size: inherit; }

Note

  • When the font-size is specified as a fixed value in em, the size is determined relative to the size of the parent element's font. For example, 0.75em would be 75% of the size of the parent element's font.
  • When the font-size is specified as a percentage, it is relative to the parent element's font size.
  • Changing the font-size of an element may affect the font-size of other elements if those elements are expressed in em's.

Browser Compatibility

The CSS font-size property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the font-size property below, exploring examples of how to use this property in CSS.

Using Fixed Value

Let's look at a CSS font-size example where we set the font-size using a fixed value.

span { font-size: 14px; }

In this CSS font-size example, we have set the font-size of the <span> tag to 14px.

Using Percentage

Next, let's look at a CSS font-size example where we set the font-size using a percentage.

p { font-size: 90%; }

In this CSS font-size example, we have set the font size of the <p> tag to 90% of its parent element's font-size.

Using Keyword

Let's look at a CSS font-size example where we set the font-size using a keyword

p { font-size: x-small; }

In this CSS font-size example, we have set the font size of the <p> tag to x-small which is two font-sizes smaller than the default size, which is medium.

Share on: