CODEWITHSUNDEEP
htmlcsscross-browser
Misha Moroshko
Misha Moroshko

Reputation: 171341

Why font looks different across platforms?

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?

Upvotes: 1

Views: 644

Answers (3)

mafokken
mafokken

Reputation: 11

There are also, in some browsers, a user-defined font size. So you may want to check each browser to make sure the settings for the font size are the same. (This is why I like to use ems, instead of px for font sizes.)

Upvotes: 0

Stein G. Strindhaug
Stein G. Strindhaug

Reputation: 5119

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.

Upvotes: 2

Brent
Brent

Reputation: 411

Font rendering and sizing is quite specific to platform. Instead of using something generic like "serif", you may want to try a font that you know is available on all systems. Arial perhaps? See if your numbers match up.

Further, you may see some discrepancies between browsers as pixel font sizing could vary as well. You may want to look into CSS resets to help mitigate that problem.

This may help: http://www.sitepoint.com/css-font-sizing-tutorial/

Upvotes: 2

Related Questions