Question

Consider the following example: (live demo here)

HTML:

<label>Name</label>

CSS:

label {
  font-family: serif;
  font-size: 16px;
}

JS:

$(function() {
  console.log($("label").width());
});

When I run this example on Windows 7 with Firefox, the result is 38. But, when I run the same example on Ubuntu (using VirtualBox) with Firefox, the result is 48. In both cases, Firefox version is 7.0.1.

Why is this difference? How could I make this to be the same?

Answer 1

You are not specifying an actual font; “serif” is just a meta name for any font with serifs, and the browser will have different default for this on different platforms and browsers.

But even if you’d specified a font that is likely to exist on any platform (like the ones in core fonts for the web), because of different font rendering, the result still may not be the same; windows font rendering does really agressive font hinting (forcing the letter forms into the pixel grid as much as possible), while Mac OS and Gnome etc. uses a less agressive hinting. This effect may cause the the width of a text to vary with several pixels even with the same font and size.

To avoid layout problems when using fixed layout, you should always set at least 10-20 px (for a fairly short text) more than apparently needed as width to avoid wrapping or overflow.