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 engine. Firefox uses the Gecko engine. I've found that you can change font display in Firefox by typing


in the firefox address bar and changing the


value to 1. Although this might work on some systems, I don't want my user to need to do this.

How can I make sure that the font is displayed correctly? I've tried adjusting CSS with


and variants but it doesn't work. I really can't change all my text to images, that's just wrong. Is there a specific syntax for this? Or any suggested workaround that would be optimal?

ChromeChrome image

Firefoxenter image description here

  • Desktop? Or Mobile? Can you post a screenshot to show the comparison?
    – MrWhite
    Aug 4, 2014 at 10:20
  • Desktop, I'm on a mac retina display but I've tested on windows systems with normal and 10inch screens and problem reproduces while other browsers display normally. I can't post images (need 10 rep), but this is the concerning website: harbingermultimedia.be
    – RobSeg
    Aug 4, 2014 at 10:23
  • 1
    Your large font appears to be caused by the font-size-adjust property (which is only supported by Firefox). Remove this and the font displays at the same size as Chrome. (?)
    – MrWhite
    Aug 4, 2014 at 10:47
  • ...if you did specify a 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.
    – MrWhite
    Aug 4, 2014 at 11:03
  • 2
    Thank you w3d , solved. It was the 'font-size-adjust' I think. If you make answer, i'll accept
    – RobSeg
    Aug 4, 2014 at 15:07

1 Answer 1


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  
  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

  • 1
    Thank you for the extra explanation, this was very helpfull. Perfect answer.
    – RobSeg
    Aug 4, 2014 at 17:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.