The font-size property specifies the size, or height, of the font. font-size affects not only the font to which it is applied, but is also used to compute the value of em, rem, and ex length units.
p {
font-size: 20px;
}
font-size can accept keywords, length units, or percentages as values.
It accepts the following absolute keyword values:
xx-smallx-smallsmallmediumlargex-largexx-large
These absolute values are mapped to specific font sizes as computed by the browser.
You may also use two relative keyword values:
largersmaller
These are relative to the font size of the parent element. For example, if the parent element has a font size of small, a child element with a defined relative size of larger will make the font size equal to medium for the child element.
Length values (e.g. px, em, rem, ex, etc) cannot be negative. Percentage values are relative to the parent element’s font size.
Relative Values with em, rem, and ex
The em unit is always a relative unit based on the computed value of the font size of the element to which the em unit is applied. For example:
div {
font-size: 14px;
padding: 2em;
}
div p {
font-size: 2em;
}
In this example, for both the div element and the descendant paragraph, the value of 1em is 14px. This is because the font-size property is, by default, inherited from parent to child.
Therefore, the font size for the paragraphs inside of div elements will be computed to 28px, which is 14px multiplied by two (2em). The padding on the div elements, which is also 2em, will likewise compute to 28px.
In the case of rem units, however, a single rem unit is based on the value of the root element (the<html> element).
html {
font-size: 16px;
}
p {
font-size: 1.5rem;
}
In the above example, the rem unit is equal to 16px (inherited from the root element) and thus the font size for the paragraph elements will compute to 24px (16px plus half of 16px, or 1.5rem).
For ex units, 1ex would be equal to the computed height of the lowercase letter x, which is defined based on the font size.
When declared as part of the font shorthand property, font-size is a mandatory value. If it is not included in the shorthand, the entire line is ignored.
Related Properties
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Works | Works | Works | Works | Works | Works | Works |
Share
Tweet
Email
Leave a Reply