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>
Per the “CSS Fonts Module Level 3” the
font-sizeproperty can have values that are:<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”:What this means is that unitless numbers for
font-sizeare invalid, with an explicit exception for0.With that said, what size is
<div style="font-size: 20;">20 size</div>being rendered at?The rendered
font-sizeof an element will depend on a lot of things. However, if we’re able to assume thatfont-sizefont-size(e.x.<font>,<sub>,<h1>…yes it would be invalid markup to have those elements as parents, but it would still change thefont-size)Then the default
font-sizein every modern browser that I’m aware of currently is16px.