<absolute-size>
The<absolute-size>CSSdata type describes the absolute size keywords. This data type is used in thefont shorthand andfont-size properties.
The font size keywords are mapped to the deprecated HTMLsize attribute. See theHTML size attribute section below).
In this article
Syntax
<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large
Values
The<absolute-size> data type is defined using a keyword value chosen from the list below.
xx-smallAn absolute size 60% the size of
medium. Mapped to the deprecatedsize="1".x-smallAn absolute size 75% the size of
medium.smallAn absolute size 89% the size of
medium. Mapped to the deprecatedsize="2".mediumA user's preferred font size. This value is used as the reference middle value. Mapped to
size="3".largeAn absolute size 20% larger than
medium. Mapped to the deprecatedsize="4".x-largeAn absolute size 50% larger than
medium. Mapped to the deprecatedsize="5".xx-largeAn absolute size twice the size of
medium. Mapped to the deprecatedsize="6".xxx-largeAn absolute size three times the size of
medium. Mapped to the deprecatedsize="7".
Description
Each<absolute-size> keyword value is sized relative to themedium size and the individual device's characteristics, such as device resolution. User agents maintain a table of font sizes for each font, with the<absolute-size> keywords being the index.
In CSS1 (1996), the scaling factor between adjacent keyword value indexes was 1.5, which was too large. In CSS2 (1998), the scaling factor between adjacent keyword value indexes was 1.2, which created issues for the small values. As a single fixed ratio between adjacent absolute-size keywords was found to be problematic, there is no longer a fixed ratio recommendation. The only recommendation to preserve readability is that the smallest font size should not be less than9px.
For each<absolute-size> keyword value, the following table lists the scaling factor, mapping to<h1> to<h6> headings, and mapping to the deprecatedHTMLsize attribute.
<absolute-size> | xx-small | x-small | small | medium | large | x-large | xx-large | xxx-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 | ||
HTMLsize attribute | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
HTML size attribute
Thesize attribute to set a font's size in HTML is deprecated. The attribute value was either an integer between1 and7 or a relative value. Relative values were an integer preceded by+ or- to increase or decrease the font size, respectively. A value of+1 meant increasing thesize by one and-2 meant decreasing the size by two, with the computed value clamped at a minimum of1 and a maximum computed value of7.
Examples
>Comparing the keyword values
<ul> <li>font-size: xx-small;</li> <li>font-size: x-small;</li> <li>font-size: small;</li> <li>font-size: medium;</li> <li>font-size: large;</li> <li>font-size: x-large;</li> <li>font-size: xx-large;</li> <li>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;}Result
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4> # valdef-font-size-absolute-size> |
See also
- CSS
<relative-size>data type - CSS
fontandfont-sizeproperties - CSS fonts module