CSS <absolute-size> Data Type

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<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>

CSS

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;
}

Result

Editor