Q:

Unexpected margin using Arial font in bold

While using Arial font in bold, an unexpected margin (just ~ 1 px) appears from the left side.
See example: http://jsfiddle.net/be2EW/1/
HTML:
<b>ABC</b> <br />
<b>STU</b>

CSS:
body {
    font-family: Arial;
    font-size: 80%;
}

It works fine on Mac OS X based browsers, but not on Windows. 
Is there somebody who has ever had a similar problem?

A:

As mentioned, this is not related to CSS, but rather to font rendering. Different browsers render fonts differently. Even the same browser will render a certain font differently on different platforms, as you have mentioned yourself by comparing Mac OS X based browsers with Windows.
Solutions you could try:

Use CSS to re-position the text
Change to a different font
Remove bold
Create a static image (not the best option)

Alternatively you could check out CSS3 Fonts Module: http://www.w3.org/TR/css3-fonts/
Keep in mind that tags such as font-stretch, font-size-adjust, letter-spacing, text-rendering are not supported on every browser.

