Beware of Helvetica and Times

If you (like me) are using helvetica or times as preferred font-family in your web designs, you should be aware of one important thing: Firefox/mac renders the fonts incorrectly.

It seems that firefox/mac removes the top padding that is necessary to correctly render special characters like Å, making the entire field more narrow than if you would use arial or times instead. This could result in background-images being placed incorrectly etc.

Here is an example to illustrate this:

As you can see, I have added a grey background color to the span that wraps around the text. The screenshot is from FF/mac where the problem is most obvious; the wrapping box is actually narrower than the ring above the ‘A’. Safari/mac tries to correct this, but it’s still not perfect.

In windows, the browsers seem to render the fonts more correctly. On a side note, helvetica and times where originally made for the print medium. Arial and georgia was made for the screen, so one could argue that using arial instead of helvetica in web design would be considered more “correct”.

Has anyone else noticed the same thing?