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-size
s.
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:
http://fontdeck.com/support/fontsizeadjust
font-size-adjust
property (which is only supported by Firefox). Remove this and the font displays at the same size as Chrome. (?)font-size-adjust
(aspect value), shouldn't this be a value at least less than 1 (the x-height of a font divided by the font size)? You have specified a value of 1.2, which is always going to produce a much larger font-size.