

grayscale - Render text with grayscale antialiasing, as. Using icon fonts sometimes leads to blurry rendering. Firefox recently added -moz-osx-font-smoothing to version 25. Syntax auto - Allow the browser to select an optimization for font smoothing, typically grayscale. This is also used so the font will look smooth on all browsers (Opera, Firefox, Safari, Chrome and others alike) except internet explorer.ĭue to its sub-pixel antialiasing algorithm OS X tends to render light text on dark backgrounds too bold. Now scroll up to about line 15 where we have body, and right beneath these initial. To really smooth the font and not have anything too blurry websites usually use the text-shadow effect. So what we have to do is go into our application and go into main.scss.

The answer came on Twitter, as usual chriscoyier try -webkit-text-stroke: 0. The value none looked gross and there was no visual difference between antialiased and subpixel-antialiased in this case. This feature is non-standard and is not on a standards track. Then there is the -webkit-font-smoothing stuff to play with. However, the bug where it also affected the weight of the text as a side effect has been fixed. It is still respected, as no lcd font smoothing is being applied.

This type of hack is mostly used for mobile browsers. The font-smooth CSS property controls the application of anti-aliasing when fonts are rendered. The webkit-font-smoothing css property is, contrary to the summary, still working. This type of hack is mostly used for mobile browsers, as well as the Apple Safari and Google Chrome Browsers. There are two ways websites are achieving this: They are most likely using the -webkit-font-smoothing hack. They are most likely using the -webkit-font-smoothing hack. There are two ways websites are achieving this: I came across a pretty cool technique which instantly makes your website that little bit smarter, at the same time I also came across people wondering how some websites have such crisp and clear fonts.
