CSS font-size Property

The font-size property defines the text size.

It accepts any length value, such as, px, %, em, and others.

Keywords, such as, small, larger, and x-large are also accepted.

Example

#

Three different font-size settings.

Text with font-size: 15px.

Text with font-size: x-large.

Text with font-size: 175%.

<p style="font-size: 15px">
  Text with font-size: 15px.
</p>
<p style="font-size: x-large">
  Text with font-size: x-large.
</p>
<p style="font-size: 175%">
  Text with font-size: 175%.
</p>

Syntax

font-size: medium | xx-small | x-small | small | 
           large | x-large | xx-large | smaller | 
           larger | length | initial | inherit;

Values

#

Values Description
medium Default. Mediumn font size.
xx-small Extra-extra-small font size.
x-small Extra small font size.
small Small font size.
large Large font size.
x-large Extra large font size.
xx-large Extra-extra-large font size.
smaller Smaller font size than the parent element.
larger Larger font size than the parent element.
length Font size in any CSS length value, such as, px, cm, em, and other units.
% Font size in percentage.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different font-size values.

font-size: small

<style>
  .font-example {
    font-size: small;
  }
</style>

<p class="font-example">
  font-size: small
</p>

Browser support

This table shows when font-size support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
5.5 Jul 2000
Opera
7.0 Jan 2003
Safari
1.0 Jun 2003

You may also like

Guides