Default unit for font-size?

Question

Various texts on the net claim that "pt" is the default font-size unit when none is provided, however, my own testing seems to demonstrate otherwise. I have read many documents on W3C covering font-size for CSS 1-3, and I can't seem to locate an actual reference to a default unit in any of the specifications.

I have tested this in both Chrome and IE9 and get the exact same results with each: the element lacking a unit is the smallest, the px element is in the middle, and the pt element is the largest. I attempted to match the size using many other units defined by the W3C (such as "mm", "ex", "pc", etc.) but none of the test elements match up in size to the targeted element (the one lacking units).

Any insight would be appreciated.

<div style="font-size: 20;">20 size</div>
<div style="font-size: 20px;">20px size</div>
<div style="font-size: 20pt;">20pt size</div>

Answer 1

Per the "CSS Fonts Module Level 3" the font-size property can have values that are:

Value: <absolute-size> | <relative-size> | <length> | <percentage>

<absolute-size>, <relative-size>, and <percentage> are defined in the same spec, and are all either keywords (e.x. small, larger, etc) or have percentage units.

<length> being more generic is defined in "CSS Values and Units Module Level 3":

Lengths refer to distance measurements and are denoted by <length> in the property definitions. A length is a dimension. However, for zero lengths the unit identifier is optional (i.e. can be syntactically represented as the <number> 0).

What this means is that unitless numbers for font-size are invalid, with an explicit exception for 0.

---

With that said, what size is <div style="font-size: 20;">20 size</div> being rendered at?

The rendered font-size of an element will depend on a lot of things. However, if we're able to assume that

• the user hasn't customized their default font-size
• the browser is using default styles
• there are no parent elements that would otherwise change the font-size (e.x. <font>, <sub>, <h1>...yes it would be invalid markup to have those elements as parents, but it would still change the font-size)

Then the default font-size in every modern browser that I'm aware of currently is 16px.