Web.QHMIT.com

CSS font-size

Editor Preview

The CSS 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.

Syntax

Possible Values

absolute-size

This allows you to specify an absolute font size using a keyword. The absolute keywords available are:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
relative-size

This allows you to specify a relative font size using a keyword. The relative keywords are:

  • larger
  • smaller
length
Specifies an absolute font size using a valid length value (for example, 18px, 1.5em, 14pt, etc). This value is independent of the user agent's font table. Negative lengths are illegal.
percentage
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:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or 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.

General Information

Initial Value
medium
Applies To
All elements
Inherited?
Yes (the computed value)
Media
Visual
Animatable
Yes (see example)

Example Code

Absolute-Size Reference

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
scaling factor 3/5 3/4 8/9 1 6/5 3/2 2/1 3/1
HTML headings h6 h5 h4 h3 h2 h1
HTML font sizes 1 2 3 4 5 6 7

Limitations of the font-size Property

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.

Official Specifications