CSS <absolute-size> Data Type

Description

The CSS absolute-size data type is used to specify the size of a font in absolute terms. This means that the size of the font will be the same regardless of the size of the surrounding elements or the viewport. There are two ways to specify an absolute font size:

  • Using absolute length units, such as pixels (px), centimeters (cm), or inches (in).
  • Using absolute size keywords, such as xx-small, x-small, small, medium, large, x-large, and xx-large.
Absolute size keywords are mapped to the deprecated HTML size attribute. Here is an example of how to use the absolute-size type to specify the font size of a paragraph:
p {
  font-size: 16px; /* Absolute length unit */
  font-size: large; /* Absolute size keyword */
}
The font-size property in the above example will set the font size of all paragraphs to 16 pixels or to the large absolute size keyword, depending on which value is supported by the user agent. Absolute font sizes are typically used for print layout, where the size of the output medium is known. For screen layout, it is generally recommended to use relative font sizes, such as em or rem units, which scale based on the size of the surrounding elements or the viewport.

Syntax

<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large

Values

  • xx-smallAn absolute size 60% the size of medium.
  • x-smallAn absolute size 75% the size of medium.
  • smallAn absolute size 89% the size of medium.
  • mediumA user's preferred font size. This value is used as the reference middle value.
  • largeAn absolute size 20% larger than medium.
  • x-largeAn absolute size 50% larger than medium.
  • xx-largeAn absolute size twice the size of medium.
  • xxx-largeAn absolute size three times the size of medium.

Example

<ul>
<li class="xx-small">font-size: xx-small;</li>
<li class="x-small">font-size: x-small;</li>
<li class="small">font-size: small;</li>
<li class="medium">font-size: medium;</li>
<li class="large">font-size: large;</li>
<li class="x-large">font-size: x-large;</li>
<li class="xx-large">font-size: xx-large;</li>
<li class="xxx-large">font-size: xxx-large;</li>
</ul>
li {
  margin-bottom: 0.3em;
}
.xx-small {
  font-size: xx-small;
}
.x-small {
  font-size: x-small;
}
.small {
  font-size: small;
}
.medium {
  font-size: medium;
}
.large {
  font-size: large;
}
.x-large {
  font-size: x-large;
}
.xx-large {
  font-size: xx-large;
}
.xxx-large {
  font-size: xxx-large;
}

Browser Support

The following table will show you the current browser support for the CSS absolute-size data type.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 2nd October 2023