La lettura prolungata di testi sul web può risultare faticosa per l'utente, soprattutto quando il font-size di un carattere è impostato in maniera non ottimale (ogni font ha le sue grandezze "preferite" per rendere al meglio). L'introduzione dell'anti-alias da IE7 in poi è stata sicuramente una delle mosse migliori fatte da Microsoft in tema di fruibilità dei contenuti: pur usando prevalentemente Firefox non nego che, in presenza di testi corposi, salto su IE per leggere con maggiore comodità.

IE si dimostra quindi unico (o quasi) rispetto alla concorrenza nel fornire l'antialias in maniera nativa. E' pur vero che per ottenere lo scopo basterebbe modificare le impostazioni del Sistema Operativo di turno, che nello specifico di Firefox esistono variabili da settare ad hoc ("gfx.use_text_smoothing_setting") oppure plug-in come Anti-Aliasing Tuner, ma su un campione di utenti quanti sanno o possono mettere mano a tali impostazioni?

L'idea che ho messo in pratica per estendere l'uso del text-shadow è stata questa: visto che l'anti-alias altro non è che una smussatura derivata da una campionatura media di colore adiacente e crea una sorta di leggera ombra, ho cercato di ricreare questo effetto usando solo il valore della sfocatura e lasciando a zero lo slittamento x e y:

.ombra {background-color: #e0e0d5; padding:10px; font-size:14px; text-shadow:0 0 1px #bebebe;}

Testo nero su sfondo grigio senza ombreggiatura

Testo nero su sfondo grigio con leggera ombreggiatura

Non è proprio identico ad un anti-alias standard, ma può aiutare a rendere meno sgranati i contorni; naturalmente bisogna fare molta attenzione nello scegliere il colore della sfocatura: va tenuto conto del contrasto di partenza tra colore di primo piano e colore di sfondo, nonchè della grandezza del testo.

E' meglio in generale scegliere un colore di sfocatura leggermente più scuro dello sfondo per riuscire a mascherare il contrasto senza appesantire troppo i contorni del testo; noterete che una minima variazione di colore causerà efffetti diversi.

Inoltre in presenza di un testo piccolo (fino a 14-16px) il raggio di sfocatura di 1px è sufficiente, mentre è utile aumentarlo a 2px per testi più grandi, altrimenti non si nota alcun effetto.

Concludendo: questo approccio vuole porsi semplicemente come spunto alternativo all'uso standard, ogni sperimentazione sul valore degli attributi del text-shadow è assolutamente consigliata.