It seems that my menu bar is displayed with a different font stretch in Firefox than it is in Chrome. See the following:

different font stretch

Here is the CSS applied to this element:

font-variant: small-caps;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;

As far as I can tell everything regarding that font is exactly the same, yet they still display differently (see pic). Why?

  • 1
    Have you done a CSS reset first?
    – kei
    Commented May 24, 2011 at 20:21
  • @kei: Reset does not seem to have an effect
    – Goro
    Commented May 24, 2011 at 21:43
  • Interesting. I'm getting the same result as your image: jsfiddle.net/YGwcn It seems to come down to how each browser interprets the style.
    – kei
    Commented May 24, 2011 at 22:06
  • Kind of reminds me of "back in the day" when I got into all this, and you had to juggle Internet Exploder vs. Netscrape....
    – gnicko
    Commented Apr 29, 2020 at 1:10

8 Answers 8


Chrome uses the WebKit rendering engine. Firefox uses the Gecko engine. Both interpret and display type slightly differently, as do the DirectX and Vega graphics engines used in IE9+ and Opera.

You can't force browsers to render text identically, but you can do a couple of things to ensure that your navigation takes up the same width across browsers:

  1. Use images or SVGs instead of type for your navigation bar elements. This may prove useful if your navigation area is unlikely to change often. e.g. www.apple.com

  2. Fix the width of each navigation element with CSS. The text size will still look different between browsers, but if you give each <li> element in your navigation area a fixed pixel width, the bounding box of each link will be very similar across browsers and the total width of the nav area should be the same.

  • 5
    You to be vary careful with things like "Use images instead of type for your navigation bar elements". The images will look awful on newer machines with high resolution displays (e.g. Apple "Retina" displays, some other smart phones) unless you provide a double-resolution copy too. Commented Aug 8, 2012 at 11:52
  • @OllyHodgson Sure. Double-size PNGs or SVGs (which is what Apple uses in for their nav) would be best for high-res screens.
    – Nick
    Commented Aug 9, 2012 at 10:12
  • @Nick - Yes, SVG would be the best solution.
    – csha
    Commented Oct 17, 2013 at 14:30
  • Not in this case it wouldn't. Firefox doesn't support letter-spacing on SVG elements.
    – Yay295
    Commented Feb 14, 2019 at 5:50
  • @Yay295 You can outline fonts in the SVG.
    – Nick
    Commented Feb 14, 2019 at 9:31

Differences in font rendering between different browsers (and on different operating systems) is a fact of life. You just have to make sure that if the font displays at different widths your design can still cope.


In case anyone comes across this, for me the problem was letter-spacing. Chrome and Firefox handle the property differently.

My problem was the letter-spacing was affecting the position of other elements; specifically some images in the nav menu. By removing the property my problem was instantly solved.

I have also read that specifically using .point values can have altering effects between the 2 browsers, which was true in my case.


kind of same issue stated here

you can reset your css by

http://developer.yahoo.com/yui/reset/ hope at-lest you get some clue by


I've found that webkit will support px for font size, but for things like letter spacing they will ignore it all together if you don't use em.


After testing 6 browsers/4 rendering engines on two OS. I've found most were the same even with line-spacing. I'll look into the difference with windows and Linux in a minute.

I thought the Palatino font was available everywhere but chrome fell back to times roman which is slightly smaller, the default fonts had the same results (chrome different) which mislead me for a bit.

Anyway if you specify times roman or use @fontface to supply font fileS! you may be able to make your nav bars slicker ;-)


I had a similar problem and found a solution:


font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;

In Firefox, it looks great. In Chrome, the letter spacing was strange. Removing the optimizelegibility style did the trick. Both browsers render identically now.

I decided to remove the style for webkit and leave it in place for other browsers. Looks fine now.


I had a similar problem with Open-Sans, this did it for me:

-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;

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.