Arial and weight

Firefox 4 (and 5) is rendering (at least) Arial fonts wrongly.
I came to this problem while I was designing a website using Arial. The problem is given in Windows 7, because of the use of GDI for text rendering. Arial Black is rendered as a weight of Arial, and not as another font.
If you set: “font-family:Arial;” with “font-size” set to:

  • “normal” or “100;” to “500;” you get Arial
  • “bold;”, “bolder;”, “600;” or”700;” you get bold Arial
  • “800;” to “900;” you get Arial Black
  • “bolder;” in a nested element which was in bold Arial you get Arial Black
Arial weights in webkit and mozilla engines.
Chrome, Safari and Opera render correctly (as we were used to). Chrome and Opera though have strange 600 and 700 weights… Interestingly, Internet Explorer is showing me the same problem that Firefox (are you planning to be bought by Microsoft? Skype was bought and started giving problems… I’m just saying)…

Here’s the code of the page:


    



Arial vs Arial bold vs Arial Black


This is 100 weight (Arial), bolder bolder bolder, and now lighter lighter lighter


This is 200 weight (Arial), bolder bolder bolder, and now lighter lighter lighter


This is 300 weight (Arial), bolder bolder bolder, and now lighter lighter lighter


This is 400 weight (Arial), bolder bolder bolder, and now lighter lighter lighter


This is 500 weight (Arial), bolder bolder bolder, and now lighter lighter lighter


This is 600 weight (Arial bold), bolder bolder bolder, and now lighter lighter lighter


This is 700 weight (Arial bold), bolder bolder bolder, and now lighter lighter lighter


This is 800 weight (Arial Black), bolder bolder bolder, and now lighter lighter lighter


This is 900 weight (Arial Black), bolder bolder bolder, and now lighter lighter lighter


And the result (try it in Firefox and in another browser):

Arial vs Arial bold vs Arial Black

This is 100 weight (Arial), bolder bolder bolder, and now lighter lighter lighter
This is 200 weight (Arial), bolder bolder bolder, and now lighter lighter lighter
This is 300 weight (Arial), bolder bolder bolder, and now lighter lighter lighter
This is 400 weight (Arial), bolder bolder bolder, and now lighter lighter lighter
This is 500 weight (Arial), bolder bolder bolder, and now lighter lighter lighter
This is 600 weight (Arial bold), bolder bolder bolder, and now lighter lighter lighter
This is 700 weight (Arial bold), bolder bolder bolder, and now lighter lighter lighter
This is 800 weight (Arial Black), bolder bolder bolder, and now lighter lighter lighter
This is 900 weight (Arial Black), bolder bolder bolder, and now lighter lighter lighter

Note something? If you have Chrome, you’ll see that 600 of boldness is bigger in size than the bolders… I let you imagine how it’s shown in the other browsers! What should we designers do?