Search code examples
google-chromefontswindows-xpfont-face

Letter 'M' is bolder than the rest of the other text

Not sure what is causing this.

I tested this on my W7 computer at home in Chrome, FF, and IE, with no issues. I have also looked it up on my Droid, still no issues.

I'm at work on a XP machine, and this is how it displays in Chrome:

enter image description here

It displays fine on my XP machine in FF and IE.

Any clues?

Edit: Page upon request: www.terrencebowman.com (Still in development, obviously)

Solution

  • Chrome 21, Windows XP:

    enter image description here

    it seems fine to me.

    EDIT: It is an antialiasing "issue". When using standard antialiasing (Cleartype off), the page looks the same as in your screenshot (Chrome and IE6, IE7, IE8). IE9 and IE10 browsers completely ignore system-wide antialiasing setting and force cleartype on, so it's the reason you don't see corrupted text on your machine.

    1. You can simply ignore this issue, or...
    2. You can try to use smaller font (font-size: 17px) instead of 18px
      font-size: 17px with cleartype off: enter image description here
    3. I found a workaround: just use -webkit-transform: translateZ(0); on your p tags.
      This forces Chrome to render the tag (incl. text, transitions) with GPU.
      PS: be careful, translateZ is sometimes buggy, don't use it on a Mac when not necessary