CSS Property - Font Size

Value: <absolute-size> | <relative-size> | <length> | <percentage>
Initial: medium
Applies to: all elements
Inherited: yes
Percentage values: relative to parent element"s font size

<absolute-size>
An <absolute-size> keyword is an index to a table of font sizes computed and kept by the UA. Possible values are:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

On a computer screen a scaling factor of 1.5 is suggested between adjacent indexes; if the "medium" font is 10pt, the "large" font could be 15pt. Different media may need different scaling factors. Also, the UA should take the quality and availability of fonts into account when computing the table. The table may be different from one font family to another.

<relative-size>
A <relative-size> keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are:

• larger
• smaller

For example, if the parent element has a font size of "medium", a value of "larger" will make the font size of the current element be "large". If the parent element"s size is not close to a table entry, the UA is free to interpolate between table entries or round off to the closest one. The UA may have to extrapolate table values if the numerical value goes beyond the keywords.

Length and percentage values should not take the font size table into account when calculating the font size of the element.

Negative values are not allowed.

On all other properties, "em" and "ex" length values refer to the font size of the current element. On the "font-size" property, these length units refer to the font size of the parent element.

Note that an application may reinterpret an explicit size, depending on the context. E.g., inside a VR scene a font may get a different size because of perspective distortion.

Example:

If the suggested scaling factor of 1.5 is used, the last three declarations are identical.