CSS: font-size

What is font-size property

font-size property lets you specify font size.

p {
 font-size: 1.5rem;
}

Values for font-size property

Its value can be any CSS Length Units or percentage.

• CSS: Length Units

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.

• CSS: How Large is a Pixel

Special keyword values

xxx-large

same as 3rem.

xx-large

same as 2rem.

x-large

same as 1.5rem.

large

same as 1.1rem.

medium

same as 1rem.

small

same as 0.8rem.

x-small

same as 0.6rem.

xx-small

same as 0.5rem.

larger

• relative size.
• same as 1.20rem

smaller

• relative size.
• same as 0.833rem

Example

your browser shows:

[xxx-large] [3rem]

[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.20rem]

[smaller] [0.833rem]

• 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%.