: Firefox 22+ large font workaround I'm working on a website and Firefox is displaying it's font extremely large. Chrome and Safari are displaying normal font size. Chrome uses the WebKit rendering

@Jamie184

As specified in comments, the extra-large fonts in Firefox would seem to be caused by the font-size-adjust property (which, incidentally, is only support by Firefox currently AFAIK). Removing this property altogether (or setting it to an appropriate value - see below) resolves the issue in Firefox.

The idea behind font-size-adjust is to make fallback fonts more readable; when their x-heights differ from the primary font. However, this value affects all fonts. I think that ordinarily, the font-size-adjust property, as defined by W3C, is intended to take the "aspect value" of the primary font, which is defined as "the x-height of a font divided by the font size" (which is clearly going to be a lot less than 1). If you specify a larger value than the aspect value of the current font then the font-size is going to increase.

When the primary font is not available, a fallback font is used. If the "aspect value" of the fallback font differs from the specified font-size-adjust (aspect value) property then the font-size is adjusted. If the specified font-size-adjust is the aspect value of the primary font, then the fallback font is adjusted to "look" a similar size to the primary font. Different fonts at the same font-size can look different sizes because their x-heights differ, and this affects readability. For instance "Verdana" vs "Times New Roman" - Verdana "looks" much bigger at the same font-size and consequently is more readable at smaller font-sizes.

You had initially specified a value of 1.2, which is always going to increase the font-size (of any font!). A value of 1.2 is effectively stating that the height of the lowercase x is 20% larger than the uppercase X! A more "normal" value for the font you had chosen is 0.54 (my estimate). If you specify a larger value than this, then the default font will be larger in Firefox.

Using the formula as specified by W3C:

c = ( a / a' ) s
Where
s = font-size value
a = aspect value as specified by the 'font-size-adjust' property
a' = aspect value of actual font
c = adjusted font-size to use


If you specify a font-size-adjust of 1.2, with a specified font-size of 18px, then the resulting font-size of the text in question becomes: (1.2 / 0.54) * 18 = 40px (approx). (Which is clearly very large!)

If you had specified a font-size-adjust of 0.54 (which I estimate as the aspect value of your primary font) then the resulting font-size would be (0.54 / 0.54) * 18 = 18. ie. no change.



Handy online tool for calculating the font-size-adjust (aka "aspect value") of any font installed on your machine: fontdeck.com/support/fontsizeadjust

Vote Up Vote Down