CSS: font-size

By Xah Lee. Date: . Last updated: .

What is font-size property

font-size property lets you specify font size.

font-size: 1.5rem;

Values for font-size Property

Its value can be any CSS Length Units or percentage.

Commonly Used Unit for Font Size

length unit can be absolute or relative.

relative means the size changes if parent element's font-size changes, or the the Root Element font size changes.

rem
  • relative size.
  • rem is font size of the Root Element, i.e. html (defult to 16px).
em
  • relative size.
  • em is parent element's font size.
%
  • relative size.
  • same as em
px
  • absolute size.
  • pixels.

Special Values

xx-large
absolute size. Similar to 2rem.
x-large
  • absolute size.
  • Similar to 1.5rem.
large
  • absolute size.
  • Similar to 1.1rem.
medium
  • absolute size.
  • Similar to 1rem.
small
  • absolute size.
  • Similar to 0.8rem.
x-small
  • absolute size.
  • Similar to 0.6rem.
xx-small
  • absolute size.
  • Similar to 0.5rem.
larger
  • relative size.
  • same as 1.33rem
smaller
  • relative size.
  • same as 0.92rem

Example

your browser shows:

[xx-large] [2rem]

[x-large] [1.5rem]

[large] [1.1rem]

[medium] [1rem]

[small] [0.8rem]

[x-small] [0.6rem]

[xx-small] [0.55rem]

[larger] [1.33rem]

[smaller] [0.92rem]

CSS Font