CSS: font-size

By Xah Lee. Date: . Last updated: .

font-size property lets you specify font size.

Its value can be any CSS Length Unit or percentage.

Example:

font-size: 2rem
relative to root font size. rem is the element html's font size (defult to 16px).
font-size: 2em
relative to parent. em is parent's font size. If you never changed font size in any parent, then em is the same as rem.
font-size: 200%
same as 2em.
font-size: 32px
pixels.

value can also be one of the following:

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.

These are absolute sizes. Their sizes do not change depending on any other element's font size.

browser shows:

[xx-large] [200%] [2rem]

[x-large] [150%] [1.5rem]

[large] [110%] [1.1rem]

[larger] [19.2px]

[medium] [100%] [1rem]

[smaller] [13.333px]

[small] [80%] [0.8rem]

[x-small] [60%] [0.6rem]

[xx-small] [55%] [0.55rem]

[see CSS: Length Units]

Font