Back in the day (i.e. when Firefox's version was a single digit) font rendering was at its best on Mozilla's browser. I remember comparing Firefox's anti-aliasing to the new-kid-on-the-block Chrome : the difference was huge.
Time went by and we all know what happened : most web developers found themselves using Chrome as their main browser for doing their work and this is exactly what happened to me. Somehow the font rendering issue went under the radar.
Fast-forward to today : I fired up Firefox to check the rendering of my blog and surprise: faux bold on all my main body text. I've tried the classic font-weight: normal and opacity: 0.99 with no luck.
After some major goggling around I've found there's a special CSS property that addresses this namely : text-stroke. The irony : the article referencing this was trying to replicate the exact opposite i.e. making text render in Webkit browsers in a faux bold style à la Firefox.
Playing a bit with the property in Chrome one can easily duplicate the FF rendering style with text-stroke: 0.35px and by setting it to 0px we practically reset it ergo using the same in FF will reset its rendering. Sadly as you can see in this lovely table by caniuse Firefox and Opera don't support it, well, Opera by going the Webkit way, it will support it soon.
How about Internet Explorer ? Good question indeed ! and since IE10 is out for some time I updated my old version 9 (it needed a restart of course) and fired it up. Results : horrendous text rendering and a very snappy experience.
I'll probably do some testing (all of this was done on Windows) on Linux and OS X soon, there I hope/should get more consistent results.
There's also:
css -webkit-font-smoothing: none; -webkit-font-smoothing: antialiased; -webkit-font-smoothing: subpixel-antialiased;
yet it doesn't seem to do much.
It seems that font rendering is not consistent at all under the Windows platform, I reckon some of these problems are also due to the hardware acceleration implementation. I really dislike how Firefox renders fonts via the CSS @font-face property (and yes the Verb typeface is optimized for web).
The issue is clearly visible when using font sizes in the range of 16 ~ 32 pixels. On smaller sizes the effect is actually useful as it makes the text more readable.
Update № 1
There's a simple fix for Firefox : detection is done via JavaScript and it just adds a class to the body element, then we can do :
css
.firefox_is_bad section p { opacity: 0.75; }
That's just a joke I still love Mozilla's browser.
The code for easily detecting Firefox :
coffeescript is_firefox: -> if window.mozInnerScreenX is undefined then false else true
Update № 2
Status on OS X : same issue yet the native antialiasing is somewhat better compared to the win platform.
The -webkit-font-smoothing css property seems to work here in Chrome the rendering looks like :
As one can clearly see using -webkit-font-smoothing: antialiased; renders the text best, somehow I was living under the impression that subpixel antialiasing would render better.
Hopefully this will get fixed at some point.