font-size property is used for specifying the size of a font.
You can specify the font size as an absolute size, relative size, length, or percentage. See below.
Also see the
font-size-adjust property to ensure that any fallback fonts are rendered at an appropriate size.
This allows you to specify an absolute font size using a keyword. The absolute keywords available are:
This allows you to specify a relative font size using a keyword. The relative keywords are:
- Specifies an absolute font size using a valid length value (for example,
14pt, etc). This value is independent of the user agent's font table. Negative lengths are illegal.
- Using a percentage value specifies an absolute font size relative to the parent element's font size.
In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:
- Represents the value specified as the property's initial value.
- Represents the computed value of the property on the element's parent.
- This value acts as either
initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.
- Initial Value
- Applies To
- All elements
- Yes (the computed value)
- Yes (see example)
Here's a rough guide as to mappings between CSS absolute sizes and HTML heading and absolute font sizes.
Note that the actual value may vary, depending on the value of
font-size-adjust, and the unavailability of certain font sizes.
|CSS absolute-size values||xx-small||x-small||small||medium||large||x-large||xx-large|
|HTML font sizes||1||2||3||4||5||6||7|
Limitations of the
Different fonts have different x-heights. So one font may look bigger at a given size than another font. This is fine if you're only dealing with one font. But on the web, we usually deal with a list of fonts — starting with our first choice font, then one or more "fallback" fonts, in case the user doesn't have our preferred font.
This is typically done with code that looks something like this:
The assumption is that, as developers, we will have the first choice font (Optima) installed on our computer. So when we test the font size in the website, we will be testing with the first choice font.
But what about users who are unable to use our first choice font? They will get the second choice (if it's available), or the third choice if neither of those are available, and so on.
In many cases, the second or third choice fonts will be rendered at a different x-height than the first choice font. What this means is that your second choice font may look bigger or smaller than intended. In some cases this might not be a problem, but in other cases you might find that the fallback font is rendered much too small or much to large — to the point where the text becomes illegible. This can prove to be quite frustrating, as it can be difficult finding suitable fallback fonts.
Fortunately, CSS provides a way to deal with this problem.
CSS includes the
font-size-adjust property for dealing with this precise problem. Basically, it allows you to specify that all fallback fonts use the same aspect ratio as the preferred font. When you do this, the fallback font is rendered at a very similar size to the preferred font. Be sure to check it out.
- CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013)
- CSS Level 2.1 (W3C Recommendation 07 June 2011)
- CSS Level 1 (W3C Recommendation 17 Dec 1996)