With this css3 font-smoothing experiment I am exploring how text that is displayed on an angle is rendered in different browsers.
Even though the font-smooth property is officially non-standard since it has been removed in 2012 from the W3C standards track, it is still supported by Chrome, Safari, Mozilla and Opera.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
There are many attempts to improve type display and contrast for consistency across all browsers, most are fixes and hacks and none are recommended in a production environment.
Here is an example using text-shadows to imitate an anti-aliasing effect
|
1 2 3 |
selector { text-shadow: 0 0 0; } |
or
|
1 2 3 |
selector { text-shadow: 0 0 1px rgba(0,0,0,0.3); } |
This fix, in my opinion, is tricky – it tempts to look blurry and fuzzy.
Here is an example using text-stroke to smoothen the type
|
1 2 3 |
selector { -webkit-text-stroke: .025em rgba(0,0,0,1); } |
This fix only works with WebKit browsers.
Another example is to apply the SVG property text-rendering to HTML elements.
This fix only works with Gecko and WebKit browsers.
To make sure your fonts are displays at their best, the letters have to be correctly hinted for screen display.
I recommend using Typekit, Google Fonts or upload your own TTFs to a font web generator that creates good font hinting like Fontie