Font Size - Absolute Size Keywords

The font-size absolute size keywords are a set of keywords that specify certain font sizes regardless of the inherited font size.
These are the font-size absolute size keywords with their resulting font size in pixels:

xx-small

9px

x-small

10px

small

13px

medium

16px

large

18px

x-large

24px

xx-large

32px

Example: <p style="font-size: large">
Note that the ratio of the font size between two consecutive keywords is not fixed: the ratio of one keyword and the next larger one varies between 1.11 to 1.33 .
The font sizes that the keywords map to are consistent across browsers. Also, text that is sized with absolute size keywords can be resized by using the browser's Zoom or Text Size feature. Therefore, absolute keywords are recommended for text sizing provided that one can accept the specific sizes that the keywords map to.
Note: Some sources erroneously state that each absolute size keyword's corresponding font size is 1.5 or 1.2 times the previous keyword's font size.

Font Size Inheritance

The css property font-size is an inherited property. That is, the font size of an element is inherited from ancestor properties.
When using relative-size length values, the computed value may be a non-integral number. This value is rounded off to give the actual displayed font size. However, it is the computed non-integral value that is inherited by descendant elements.
Example: <p style="font-size:15px">Some text <span style="font-size:1.5em"> span text</span>
The computed size for the text in the span is 22.5px . This is rounded-off by the browser to 23px. The font size that is inherited by elements is the computed size not the rounded-off size.
Example: <p style="font-size:15px">Some text <span style="font-size:1.5em"> span text <span "font-size:1.2em">nested span text</span></span></p>
The computed font size for the text in the outer span is 22.5px and the actual font size is the rounded-off figure of 23px. The inherited font size of the inner span is 22.5px and the computed font size is 27px.

The font-size Property

The font-size property specifies the size of the text in an element. This property can have as its value keywords, length values or percentages. The length values and keywords can be absolute or relative size.
The absolute size keywords are:

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

The relative size keywords are:

• smaller
• larger

The absolute size length units are:

• points (pt)
• picas (pc)
• inches (in)
• centimeters (cm)
• millimeters (mm)

The relative size length units are:

• em-height (em)
• x-height (ex)
• pixels (px)

The font-family Property

The CSS property font-family is used to specify the font-family to be used by an (X)HTML document element.
The value of this property is either a single string or keyword or a comma-separated list of strings or keywords . If the string has any spaces in it, then it must be enclosed in quotes.
Example: p { font-family: "Times New Roman", "Georgia", "Times", serif; }
Note that the quote marks are optional if the font name does not have spaces. Therefore the above rule can also be written as:
p {font-family: "Times New Roman", Georgia, Times, serif;} If the enclosing quote marks of Times New Roman are omitted, then the font family name may not be matched.
Note that the generic font-family names are keywords (not strings) therefore they must not be enclosed in quotes. Any text that is quoted is considered a string and therefore the name of a font, not a keyword. Also, if the font-family keyword is used in inline styles, using the style attribute, the quotes used for strings should be single quotes if the attribute uses double and vice versa.
Here is list of generic font family names and their CSS keywords:

Serif Fonts

serif

Sans-serif Fonts

sans-serif

Monospace Fonts

monospace

Cursive Fonts

cursive

Fantasy Fonts

fantasy

The keyword fantasy doesn't always work - the recognized fantasy fonts may not be installed on the computer.
At the end of a list of font-families, a generic font family is usually specified so that in case none of the specified font-families are found, the browser can choose any available font from a generic font-family.
The browser checks the availability of font-families starting from the left most font-family in the comma-separated list. The browser uses the first available font-family.
The font-family property is inherited (from ancestor elements).

Font Families

There are many terms associated with fonts, we'll describe some of them here.
Serifs are the decorative hooks and barbs on the ends of letters found in some fonts. Fonts that have serifs are called serif fonts. Sans-serif fonts are those fonts whose letters do not have serifs. Proportional Fonts are those fonts in which the width of the its letters vary. For example, the letter "i" would take up less horizontal space than the letter "w".
Monospace Fonts are those fonts in which the width of all the letters are the same. Font families are a collection of different variants of a font. For example, the Times New Roman font-family consists of regular Times New Roman, Times New Roman Bold, Times New Roman Bold Italic, and Times New Roman Italic. CSS defines five generic font families:

Serif Fonts

This generic font family consists of proportional serif font-families. Examples: Times New Roman, Garamond, Georgia etc.

Sans-serif fonts

This generic font family consists of proportional sans-serif font families. Examples: Arial, Verdana, Tahoma etc.

Monospace Fonts

This generic font family consists of monospace fonts such as Courier, Courier New etc.

Cursive Fonts

This generic font family consists of proportional fonts that look like handwriting. Examples: Comic Sans MS, Apple Chancery etc.

Fantasy fonts

This generic font family consists of those font families that are stylized and decorative and don't fall into any of the above categories. Examples: Aston-F1, Impact etc.

CSS Values - Strings

Some CSS properties take string values. A string value is enclosed in single or double quotes and can contain any text. Note that if the string has the single quote character in it then double quotes should be used to enclose the string and vice versa.
Unprintable characters can be represented using the escape character - backslash (\) followed by a hexadecimal number representing a Unicode character. The hexadecimal number must be followed by a space. However, if the character following the special character is not a, b, c, d, e, or f, then the space can be omitted.