CSS: font-size

What is font-size property

font-size property lets you specify font size.

Values for font-size Property

Its value can be any CSS: Length Units or percentage.

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.

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.

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

Example

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]

• As of 2014-01-06, {Firefox, Google Chrome, Opera, IE10} basically all agree on these sizes.
• The x-small and xx-small may differ by 2% or so; the difference can be seen only when the page is magnified at 200%.