Is there a de-facto relation between the font size ranges {1, 2, 3, 4, 5, 6, 7} and {xx-small, x-small, small, medium, large, x-large, xx-large}?

Question

In HTML/CSS font size can be specified in the following fashion (deprecated but all browsers support it):

<font size="n">text</font>

with n an element of {1, 2, 3, 4, 5, 6, 7}.

Another possibility is the following:

<span style="font-size: s;">text</span>

with s an element of {xx-small, x-small, small, medium, large, x-large, xx-large}.

Is there any de-facto relation between the two ranges? I figured they refer to the same sizes, as they have both seven elements, but that turns out not to be the case.

Answer 1

I think the (recommended) scaling factor between sizes is 1.2. CSS doesn't require a scaling factor.

Answer 2

Short answer: No, it's browser specific. There's no standard mapping between them.

Long answer: check this document as it is discussing the same issue in details.

Answer 3

Please don't use either of those methods for specifying font-size. They were deprecated for good reason. It is nigh-impossible to create a consistent look and feel across platforms using the methods you described -- not to mention that you become completely dependent on the browser vendors for what they specify as the values for each of these.

Instead, use ems or percentages. You will get a much more consistent appearance, as well as having much finer control over the sizes of fonts your design demands.