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.

Here's what your browser shows:

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

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

[large] [110%] [1.1rem]

[medium] [100%] [1rem]

[small] [80%] [0.8rem]

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

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

As of , {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%.

[see CSS: Units]

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc