Font Size - Relative Size Keywords with Absolute Keyword Sized Text

The relative size keywords can be applied to text whose inherited size was specified using the absolute size keywords. Each browser handles this combination differently.

Firefox 3 and Internet Explorer 6 and 7

When the larger keyword is used with absolute keyword sized text, Firefox 3 and Internet Explorer 6 and 7 will "upgrade" the text size to the next higher absolute keyword's size.
Example: <p style="font-size:medium">Some text here <span style="font-size:larger">larger span text</span>
In this example, the inherited font size is medium which translates to 16px. Therefore, Firefox 3 or Internet Explorer 6 and 7 will increase the span text's font size to 18px which is equivalent to the absolute size keyword large.
When the keyword larger is applied to text sized with xx-large, Firefox 3 and Internet Explorer 6 and 7 multiply the font size by 1.5.
Example: <p style="font-size:xx-large">Some text here <span style="font-size:larger">larger span text</span>
The keyword xx-large corresponds to a font size of 32px. If to this the keyword larger is applied the resulting font size is 32 * 1.5 = 48px .
When the smaller keyword is used with absolute keyword sized text, Firefox 3 and Internet Explorer 6 and 7 will "downgrade" the text size to the next lower absolute keyword's size.
When the keyword smaller is applied to text sized with xx-small Firefox 3 divides the font size by approximately 1.13 .
Example: <p style="font-size:xx-small">Some text here <span style="font-size:smaller">larger span text</span>
The keyword xx-small corresponds to a font size of 9px. If to this the keyword smaller is applied, the resulting font size is 9 / 1.13 = 8px (approx.). However, Internet Explorer 6 and 7 don't behave this way. Therefore, using the relative size keyword smaller with text whose inherited font size is xx-small is not recommended.

Opera 9.5

When the larger keyword is used with absolute keyword sized text, Opera 9.5 does not "upgrade" the text size to the next higher absolute keyword's size. Instead, it multiplies the font size by approximately 1.2 .
When the smaller keyword is used with absolute keyword sized text, Opera 9.5 does not "downgrade" the text size to the next lower absolute keyword's size. Instead, it divides the font size by a number ranging from 1.1 to 1.29 .

Safari 3.1

When the larger keyword is used with absolute keyword sized text, Safari 3.1 does not "upgrade" the text size to the next higher absolute keyword's size. Instead, it multiplies the font size by approximately 1.2 .
When the smaller keyword is used with absolute keyword sized text, Opera 9.5 does not "downgrade" the text size to the next lower absolute keyword's size. Instead, it divides the font size by approximately 1.2 . However, if the resulting font size is less than 9px , it is ignored and the font size is made 9px . Therefore, the font size is never less than 9px .

Advantages and Disadvantages

There is no consistency across browsers in the application of the relative keywords to text that has been sized with absolute keywords. Therefore, this combination of keywords must be avoided.
Here is a table showing the resulting font sizes when the relative keywords are applied to text that was sized with absolute keywords. All the sizes are in px, smaller smaller and larger larger indicate nested relative keywords ie. the relative keyword was applied twice through nested elements.

Relative sizing of text that was sized with absolute size keywords

keyword	size	smaller	smaller-smaller	larger	larger-larger
xx-small	9	8	7	10	13	Firefox 3
x-small	10	9	8	13	16
small	13	10	9	16	18
medium	16	13	10	18	24
large	18	16	13	24	32
x-large	24	18	16	32	48
xx-large	32	24	18	48	72
xx-small	9	8	7	11	13	Opera 9.5
x-small	10	9	8	12	14
small	13	10	9	16	19
medium	16	13	10	19	23
large	18	14	12	22	26
x-large	24	19	15	29	35
xx-large	32	26	20	38	46
xx-small	9	6	4	10	13	IE6 , IE7
x-small	10	7	4	13	16
small	13	10	7	16	18
medium	16	13	10	18	24
large	18	16	13	24	32
x-large	24	18	16	32	48
xx-large	32	24	18	48	72
xx-small	9	9	9	11	13	Safari 3.1
x-small	10	9	9	12	14
small	13	11	9	16	19
medium	16	13	11	19	23
large	18	15	12	22	26
x-large	24	20	17	29	35
xx-large	32	27	22	38	46