Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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

about:config

in the firefox address bar and changing the

 layout.css.devPixelsPerPx

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

-moz-font-size

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

share|improve this question
    
Desktop? Or Mobile? Can you post a screenshot to show the comparison? –  w3d Aug 4 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 –  Robbert Segers Aug 4 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. (?) –  w3d Aug 4 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. –  w3d Aug 4 at 11:03
2  
Thank you w3d , solved. It was the 'font-size-adjust' I think. If you make answer, i'll accept –  Robbert Segers Aug 4 at 15:07

1 Answer 1

up vote 5 down vote accepted

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: http://fontdeck.com/support/fontsizeadjust

share|improve this answer
1  
Thank you for the extra explanation, this was very helpfull. Perfect answer. –  Robbert Segers Aug 4 at 17:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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