Minimum-Font-Size Inheritance Test

The notion we're testing here is whether the minimum-font-size setting now prevalent in many browsers, which allow the user to set the smallest size fonts should be allowed to be, gets applied to all elements prior to render time (and is therefore inherited), or is it a filter on the calculated value that is only applied after all inheritance is calculated?

This is not purely academic. If the minimum font size creates a floor below which no font-size style can go and is inherited, then it is advantageous to define the largest font size on the page as your default, and all others are fractions of it. On the other hand, if it is applied only as a filter to the calculated value then such things shouldn't matter. In the following tests, a paragraph is wrapped in a div and inherits its base font size from the div. In the "startSmall" div, the font size starts at 0.1em, and the paragraph is 10em. This should render the same size font as the "startBig" div, which has a 10em default to be inherited and a 0.1em paragraph. If the "startSmall" text is much larger, then it is apparent that we hit the minimum-font-size floor, bottomed out, and then inherited the modified value.

This sample text for "startSmall"...

...should be the same size as this sample text for "startBig".

The following browsers were tested. A result of "passed" means that no inherited font-size floor was detected.

No minimum-font-size preference: Win IE

Safari 2.0.1, Mac OS X 10.4
Opera 8.0 & 7.54, Mac OS X 10.4 & Windows XP SP2
Firefox 1.0.4, Mac OS X 10.4 & Windows XP SP2
Mozilla 1.4, Mac OS X 10.4
iCab 3.0, Mac OS X 10.3


Although I think Safari is the only one that got this right, there's no arguing that the vast majority of browsers need to be coded for. This would indicate that a preferred practice would be to set the body default font-size to be the largest found on the site, and all other font sizes are scaled as a fraction of it.


Comments or results from other tests: send to bcurtis@ this domain.