Smooth Web Fonts with CSS3

June 7, EA Games launched a new version of their site. The interface is pretty good, but web fonts look like they are ugly.

And, it seems, I found a solution that allows you to smooth the font with the help of the text-shadow CSS3 properties . It works perfectly on Windows XP (if ClearType fonts are displayed or the standard method) and on older operating systems if the browser is modern.


')
View this trick .

---

Translator's Notes:

• Mathieu Avons talks about this well-known effect associated with the lack of smoothness of fonts in Windows XP: the “almost vertical” lines look quite smooth (especially when ClearType comes into play), but the “almost horizontal” lines consist of noticeable steps, caused by sharp (non-smoothed) single-pixel jerks of the contour line, made in the vertical direction. It turns out that this problem can be overcome!
  
• I was very surprised to see the extraordinarily effective force of the observed effect from the shadow. Changing is not only the smooth contour of letters. Also, the distance between some letters, the position of some letters in a word, and even the width of some letters change by ≈1 pixels . The contours of some smaller letters (in the inscription "EA AT E3 2011") are beginning to look significantly thinner.
  
• In the two-frame animation that Mathieu Avons applies to his blog to see the difference between a font with a shadow and no shadow, you can also see these effects. The letters are not only perfectly smoothed, but also jump back and forth, changing the width and thickness (and italics, it seems, is also a slope). They move! It is truly surprising that all this is achieved by a few simplest lines in CSS3:
  

  h1.title { text-shadow:-1px -1px 1px rgba(255,255,255,0.2), /*    */ 1px 1px 1px rgba(255,255,255,0.2), /*    */ 1px 1px 1px rgba(0,0,0,0.7); /*   */ } 

• It should be noted, however, that the “see this focus” link takes you to a pair of screenshots that replace each other when you hover your mouse, and not to a real piece of EA Games site code with real text headers. In order to see the effect live, you will probably have to arm yourself with Stylish and find a suitable “victim” on the net - a website with headers typed in “yard” letters in size.