CSS font-size
property specifies the size or height of the font.
The font size can be set using keywords like ‘small’, ‘medium’, ‘large’, or using any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. See the example below:
Example:
.p1{ font-size: 16px; } .p2{ font-size: large; } .p3{ font-size: x-large; }
The font size can also be specified in em
units. The em
is a relative unit of measurement. Here, the element’s font size is calculated from its parent element’s font size.
For example, if the parent element has a font-size: 15px;
and its child has a font-size: 1.5em;
It means,
The child element’s font-size = 1.5em = 1.5*(parent element font-size) = 1.5*15px = 22.5px
Example:
.parent{ font-size: 15px; } .child{ font-size: 1.5em; }
The font size can also be specified using rem
units. The rem
is also a relative unit of measurement. Here, the element’s font size is calculated from the root element’s font size, which is the <html> element itself. The root element(<html>) has a default font size of 16px for most of the browsers.
So, if an element has a font-size: 1.5rem;
This means:
The element’s font-size = 1.5rem = 1.5*(root element font-size) = 1.5*16px = 24px
Example:
p{ font-size: 1.5rem; }
The another relative unit is percentage(%). Here, element’s font-size is calculated from the parent element’s font-size.
For example, if the parent element has a font-size of 25px and the child element has a font-size of 80%. This means,
the child element’s font-size = 80% of parent’s font-size = 80*25px/100 = 20px
Example:
.parent{ font-size: 25px; } .child{ font-size: 80%; }
CSS Syntax
The font-size
property has the following syntax:
font-size: xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger|length|%|initial|inherit;
Property Values
The font-size
property accepts the following values:
xx-small | Sets the font size to xx-small. |
x-small | Sets the font size to x-small. |
small | Sets the font size to small. |
medium | This is the default value. Sets the font size to medium size. |
large | Sets the font size to large. |
x-large | Sets the font size to x-large. |
xx-large | Sets the font size to xx-large. |
smaller | Sets the font size to smaller. |
larger | Sets the font size to larger. |
length | Specifies the font size in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. |
% | Specifies the font size in %. The percentage value is calculated from the parent element’s font size. |
initial | Sets the font-size property to its default value(medium). |
inherit | Inherits the font-size property from the parent element. |
General Info
Default Value | medium |
Inherited | Yes |
JavaScript Usage | element.style.fontSize = “20px”; |