Arial Font Sizes

I'm using a large Arial font size - 40px Arial Bold.

I've noticed that it's not rendered accurately in Chrome/Firefox browsers in Windows. It's close, but it's subtly different. Increasing the font size to 46px makes things better.

I'm guessing this is a pixe开发者_运维问答l level rendering thing so what are 'correct' pixel sizes for Arial font ?

Define "rendered accurately"? do you mean it's rendered differently to other apps? But if so, which one is truly accurate?

If you're really lucky, you might get all browsers on a given platform to render pretty much the same, as you seem to have managed at 46px, but it's certainly not a given, as you've found with 40px.

But even if you do manage to hit a sweet spot in all browsers on Windows, you're going to get a completely different effect if you load the same page into any browser on a Mac or Linux PC, to say nothing of how it'll look on a phone or tablet computer.

You asked if it's a pixel-level thing. Fonts are actually rendered on a sub-pixel basis (see http://en.wikipedia.org/wiki/Subpixel_rendering for more info on this), meaning that you should get very high accuracy. However there are a number of different rendering approaches to fonts, which can result in significant differences between apps and platforms.

Most Windows apps will defer their font rendering to the Windows API. However an application such as a web browser needs much greater control over its font rendering than the OS's API can give it, so they have to implement their own. This obviously means that there may be differences between the browser's font rendering and that of other applications.

This is especially true, since Microsoft has a number of patents in the field of font rendering, meaning that there are certain techniques that Firefox and Chrome would be unable to use in their rendering (without paying a royalty). Apple also has patents in this area. These techniques are easily avoided, but again mean that Firefox's font rendering is subtly different to Windows'. Not wrong; just different.

Finally, it also comes down to a matter of choice. If you compare an Apple Mac, to a Windows PC, it is easy to spot that Macs have very different font rendering to PCs. Text on a Mac tends to look fuzzier but smoother, whereas PC text is sharper but can have more jagged edges. These differences are down to the choices made by the OS designers at the sub-pixel rendering level. They look different, but they are both valid choices and can be defended vigorously. Firefox has also made its own choices in this regard.

The bottom line? Please don't even try to insist on pixel-perfect font rendering in a web browser.