CSS font-size property

Definition and Usage

The font-size property can set the font size.

Description

This property sets the font size of the element. Note that it actually sets the height of the character box in the font; the actual character shape may be taller or shorter than these boxes (it is usually shorter).

The font for each keyword must be taller than the font for the minimum keyword and smaller than the font for the next maximum keyword.

See Also:

CSS Tutorial:CSS Font

CSS Reference Manual:CSS font property

HTML DOM Reference Manual:fontSize Property

Example

Set different sizes for HTML elements:

h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}

Try It Yourself

CSS Syntax

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

Property Value

Value Description
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

Sets the font size to different sizes, from xx-small to xx-large.

Default Value: medium.
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 value.
% Sets the font-size to a percentage of the parent element's font size.
inherit Specifies that the font size should be inherited from the parent element.

Technical Details

Default Value: medium
Inheritance: yes
Version: CSS1
JavaScript Syntax: object.style.fontSize="larger"

Try It Yourself Example

Set font size
This example demonstrates how to set the font size.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 5.5 1.0 1.0 7.0