Faux Font and Text Rendering the future is nigh and its fuzzy

Note* This will only really be different for Windows/Linux users where font-aliasing isn’t a standard feature (like the mac);

but seeing Windows is 95% of the market it’s worth it.

 

This is the standard font aliasing

This is the faux-font aliasing
using text shadow (using RGBA)

text-shadow: 0px 0px 1px rgba(0,0,0,0);

This is the faux-font aliasing

using text shadow (this works from Firefox 3.5)

This looks pretty arse in firefox

text-shadow:0 0 1px rgba(0, 0, 0, 0.9);
  /* ffox will simplify the original to text-shadow:0 0 1px #000; */

Moxilla text-shadow MDC

This is the new font-aliasing 

text-rendering: optimizeLegibility;

Mozilla text-rendering MDC

W3C Text Rendering Propety [svg]

Registered as a ‘bug’ on webkit to add functionality

* Looks crappy below 16px – Faux works where text-shadow + rgba works*

* Mozilla text-rendering is disabled below 20px *

* Some examples may only work in Nightlys *




Mozilla Notes:

  • Firefox automatically uses ligatures on text 20px or larger.
  • The 20px threshold value of the auto keyword can be changed by editing about:config
    browser.display.auto_quality_min_font_size
  • Not supported on Mac OS, behaves always similar to optimizeLegibility.

https://developer.mozilla.org/en/CSS/text-rendering

Labs Page for this Experiment