Question

I’ve noticed while testing my website that the font-size in fields on FF 3.5 on Mac’s is bigger than on FF 3.5 for windows or any other browser.

Is there a way to style this or fix it? I’ve tried setting input { font-size: XXpx; } to no avail!

Answer 1

The reason of font size differences

The difference in font-sizes between a Mac-OS and Windows-OS are not necessarily the result of different fonts, because it will also happen when you use equal fonts and sizes. Instead, the reason is historically (see this background article): Windows renders text with 96 DPI and the MacOS uses 72 DPI. Occasionally, you may see even different DPI values, for instance when you select Large Fonts in the Windows Display properties (this increases the DPI).

Confusion and physics

There’s a lot of confusion about this. Surely, a pixel is a pixel, so how can one screen have 72 dots per inch with MacOS and that same screen 96 dots per inch with Windows? Well, it cannot. The inches meant here are not real inches. They are logical inches. 72 DPI means: 72 pixels on your current screen (and each screen differs!) we consider as if it were one inch. This is by no means equal to an inch on paper, i.e. 2.54cm, in the physical world.

Back to web pages and your issue

How does all this relate to your issue? Because I assume that you use points (good!) for your sizes. And one point is defined as 1/72 inch (72 points go in one inch). Now that you know that inches on screens are not inches in real, and that each OS puts a different default dots in each logical inch, you also know that points (or mm, in or pc) are different per system.

Towards a (not perfect) solution

But, you may ask, if everything is equally, proportionally resized, all should be fine and dandy, relatively speaking? No, not quite. If you use images or if you use pixels for sizes in other elements, this will not work. Pixels are the only absolute logical size that is available to you (even it may come as no surprise that this is by no means an exact size: a pixel’s size differs per monitor). If you specify pixels, you surpass the DPI or PPI limitations superimposed by the OS (another historical note). I.e.:

/* 
   different font-size per OS / DPI display 
   setting compared to input box 
*/
input.text {
    width: 120px;
    font-size: 10pt;
}

/* 
   equal font-size per OS / DPI display 
   setting compared to input box 
*/
input.text {
    width: 120px;
    font-size: 12px;   /* typically, pixels are slightly smaller than points */
}

However, even in the above scenario, rendering issues may get back at you. Local stylesheets, available fonts, resizing of viewports and anti-aliasing may add to subtle differences still. But this is the closest you can get to defying the OS-dependent rules.

One subtlety: once you start using pixels, it may become easier to measure your font compared to your images, but you will loose the possibility of scaling your whole design and you’ll be stuck with specifying exact sizes everywhere. So whether this is a good idea in your situation is up to you (common practice is to stick with points and leave the rendering up to the browsers and OS to give the users an experience of what they’re used to on their system).

Helvetica vs Arial solution

It has been suggested on this thread that Helvetica is the rendered font on MacOS and the cause of the differences. To be certain, have a look at this page for spotting Helvetical vs Arial in a rendered page. If you use the following CSS, your page will render differently on Windows (Arial) than on MacOS (Helvetica):

input.text {
    font-family: Helvetica, Arial, sans-serif;
}

But if you use the following code, it will look equal on Windows (Arial) and MacOS (also Arial). Only Linux will look differently still, unless Windows fonts have been installed.

input.text {
    font-family: Arial, Helvetica, sans-serif;
}

Odd little bug with monospace may add to the confusion

If you use monospaced fonts, and even if you specify the font itself, you may end up having differences in rendering still. There’s a well-hidden bug in Firefox, but also on some other browsers, that I reported a while ago (blog post explains solutions), but hasn’t caught much attention.

The simple solution is to specify Courier New always, even when you don’t care about the font. I don’t think this was the issue in your case, as you mentioned Arial and Helvetica.

Final thoughts

Why all this hassle, why not one standard? Read this excellent background article on why Windows thought it was better to increase the DPI with 30%.

Further reading: there’s a whole site dedicated to DPI issues.