font-size
The 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 em and ex units, the font-size property value can also affect the size of other elements on the page that are dependent on, or use, em or 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 em and ex are relative units, and dimensions set in ems or exs are relative to the font size set on the element.
You can read more about relative length units in the CSS <length> entry.
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.
Official Syntax
-
Syntax:
font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit
- Initial: medium
- Applies To: all elements
-
Animatable: yes, as a
<length>
Values
- <absolute-size>
-
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:
xx-small,x-small,small,medium,large,x-large, andxx-large. - <relative-size>
-
In addition to the above absolute keywords, two relative keywords exist:
largerandsmaller, 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 tolargeand the element’s font size is set tolarger, the element’s font size will bex-large. - <length>
-
See the
<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>
-
See the
<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.
Notes
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.
Examples
font-size: 50%;
font-size: 1em;
font-size: 20px;
font-size: xx-small;
font-size: 200%;
font-size: 12pt;
Browser Support
The font-size property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.