CSS <absolute-size> Data Type

The <absolute-size> CSS data type represents a set of predefined, keyword-based font sizes that map to absolute, user-agent–defined measurements rather than values calculated relative to surrounding content. These keywords provide an abstract way to express typographic intent - such as “small” or “large” - without committing to a specific unit like pixels or ems. The browser ultimately resolves each keyword to a concrete size based on its default font settings, user preferences, and accessibility configurations, making this data type especially important for adaptable and user-friendly text rendering.

Unlike scalable or computed font sizes, <absolute-size> keywords are anchored to a browser’s internal font size table. This means that while the exact pixel value may vary between browsers or devices, the relative ordering of sizes is consistent. For example, small will always be smaller than medium, and xx-large will always be larger than x-large. This makes the data type useful when you want predictable typographic steps without managing explicit size calculations. It is commonly used with the font-size property to quickly establish a typographic hierarchy.

From an accessibility standpoint, <absolute-size> integrates well with user-defined browser settings. If a user increases their default font size for readability, all absolute-size keywords scale accordingly. This behavior contrasts with hard-coded units and helps ensure text remains legible across different viewing conditions. However, because these sizes are not context-aware, they do not respond to parent font sizes in the same way relative units do. For scenarios where proportional scaling is required, authors often prefer the <relative-size> data type, which adjusts based on the inherited font size.

In practice, <absolute-size> is well suited for baseline typography, legacy stylesheets, or quick prototypes where semantic size names are clearer than numeric values. For example:

body {
  font-size: medium;
}

h1 {
  font-size: xx-large;
}

small {
  font-size: x-small;
}

Here, headings and supplemental text are sized using descriptive keywords rather than explicit measurements, allowing the browser to handle final sizing decisions. While modern responsive design often favors relative units, remains a valid and useful option when consistency, simplicity, and respect for user preferences are the primary goals.

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

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

The following information will show you the current browser support for the CSS absolute-size data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.

This data type is supported by all modern browsers.

Desktop

Tablets & Mobile