font-size property is used to set the size, or height, of the font.
Because the value of the
font-size property is used to compute the values of
ex units, the
font-size property value can also affect the size of other elements on the page that are dependent on, or use,
ex units. For example, if an element’s dimensions (height and width) are specified using
em length units, then the font size set on the element will have a direct effect on the computed length of the element’s dimensions, because
ex are relative units, and dimensions set in
exs are relative to the font size set on the element.
You can read more about relative length units in the CSS
The font size can be specified as absolute or relative values. Absolute values can be specified using predefined keywords or
<length> units. Relative values are specified using relative
<length> values or
<percentage> values. Negative values for font sizes are not allowed.
The actual value of the
font-size may differ from the computed value due a numerical value on
font-size-adjust and the unavailability of certain font sizes. You can read more about how that works in the
font-size-adjust property entry.
The font size of an element cascades; this means that the element’s children will inherit the same font size as their parent, unless specified otherwise.
font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit
- Initial: medium
- Applies To: all elements
Animatable: yes, as a
An <absolute-size> keyword refers to an entry in a table of font sizes computed and kept by the browser. Each keyword refers to a specific font size specified in the browser. Possible keywords are:
In addition to the above absolute keywords, two relative keywords exist:
smaller, which calculate the font size of an element relative to its parent’s font size. So, if, for example, the parent’s font size is set to
largeand the element’s font size is set to
larger, the element’s font size will be
<length>entry for a list of possible length values. Negative values are not allowed.
When relative length units are used, the font size is determined relative to the font size of the element’s parent. For example, a font size of ‘2em’ would compute to double the font size of the element’s parent.
<percentage>entry for a list of possible values. Negative values are not allowed.
Percentage values are computed relative to the font size of the element’s parent. For example, a font size of ‘50%’ will compute to half the font size of the element’s parent.
As mentioned earlier, keep in mind that relative font sizes have a direct effect on other aspects of an element that use relative units that are related to the font size. If the element’s padding for example is set to ‘2em’ and the element’s font size is set to ’16px’, then the padding would compute to ’32px’.
Choosing relative or fixed font sizes depends on the design you’re working on. However, fixed font sizes are better avoided because they are not scalable—the user will not be able to zoom the page in and increase the font size in some browsers, so in this case, using relative units is the way to go to maintain a more accessible and user-friendly interface.
With that said, you need to keep in mind that using relative font sizes has effects on the element’s font size, and on other aspects of the design that use relative units such as
ems, which compute their values relative to the value of the font size.
The topic of choosing and using font sizes is a big one, and elaborating on it would turn this entry into a long article. So we strongly encourage you to read the Techniques For Responsive Typography article—it covers everything you need to know about font sizing and creating responsive typography on the web, with a list of best practices and recommendations.
font-size: 50%; font-size: 1em; font-size: 20px; font-size: xx-small; font-size: 200%; font-size: 12pt;
Have a look at the live demo:View this demo on the Codrops Playground
font-size property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.