October 11, 2012 at 17:05

CSS3 Smoothing a Web Font

Original author: Mathieu Avons
  • Transfer
On June 7, EA Games launched a new version of its website. The interface is not bad, but web fonts look so ugly.

And it seems that I found a solution that allows me to smooth the font using the CSS3 property text-shadow. It works great on Windows XP (whether ClearType fonts are displayed or the standard method) and on older operating systems if the browser is modern.

[demo illustration]

View this trick .

Translator Notes:

  • The speech in this blog post by Mathieu Avons has a well-known effect related to insufficient font smoothing in Windows XP: the “almost vertical” lines in them look quite smooth (especially when ClearType comes into play), but the “almost horizontal” ones consist of noticeable steps, caused by sharp (non-smoothed) single-pixel jerks of a contour line made in the vertical direction. It turns out that this problem can be overcome!
     
  • I was very deeply surprised to notice the unusually effective strength of the observed shadow effect. Not only the smoothness of the outline of the letters changes. The distance between some letters, the position of some letters in a word, and even the width of some letters also change by ≈1 pixel . The outlines of some smaller letters (in the inscription “EA AT E3 2011”) begin to look significantly thinner.
     
  • From the two-frame animation that Mathieu Avons applies to his blog post to observe the difference between a font with shadow and without 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 are stirring! It is truly astonishing that all this is achieved with a few simple 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 link “look at this focus” leads to a couple of screenshots that replace each other with a mouse hover, and not to a real piece of EA Games website code with real text headers. In order to lively observe the effect, you probably have to arm yourself with Stylish and find the appropriate “victim” on the net - a site with headers typed in “arshin” letters in size.
Tags:

Also popular now: