La resa dei font

Difficilmente un font avrà la stessa resa su macchine e sistemi operativi differenti. Questo dipende da diversi fattori. Vediamo quali.
La resa dei font

I tre fattori

Il rendering di un font è differente in ogni macchina e sistema operativo, questo è dovuto principalmente a tre fattori:

formato del font
motori di rendering
impostazioni di smussamento

Formato dei font

I font utilizzati nella tipografia web sono di tipo outline (scalabili), ognuno con diverse caratteristiche.

TrueType (TTF)

Il formato TTF è nato dalla collaborazione tra Apple e Microsoft alla fine degli anni 80 in risposta al monopolio del formato PostScript ideato da Adobe. Le sue caratteristiche si basano sull’ottima leggibilità per via delle istruzioni di hinting, anche se quest’ultime non sempre sono presenti.

OpenType (OTF)

OpenType è nato dalla collaborazione tra Microsoft ed Apple è rappresenta un’evoluzione ibrida tra TrueType (curve di Bèzier quadratiche) e PostScript (curve di Bèzier cubiche). La sua caratteristica principale è la possibilità di contenere informazioni riguardo a caratteri alternativi (per diversi sistemi operativi) e decorazioni calligrafiche.

Embedded OpenType (EOT)

Un font eot è la conversione compressa (.zip) di un altro tipo di formato, principalmente TrueType. La caratteristica fondamentale è la possibilità di limitare l’uso del font ad un URL specifico ed è l’unico formato ad essere compatibile con le versioni di explorer precedenti alla 9.

Web Open Font Format (WOFF)

Il formato WOFF è un contenitore compresso (zlib) di dati TrueType ed OpenType. E’ un formato riconosciuto dal W3C, questo lo porta ad essere il futuro della tipografia web infatti è ben supportato dai browser di ultima generazione.

Scalable Vector Graphic (SVG)

Questo formato non è dedicato esclusivamente alla tipografia. Esso contiene delle informazioni grafiche di tipo vettoriale e nel caso dei font contiene dati che riguardano ogni singolo glifo. E’ da considerare se nel caso si vuole fornire un supporto per le prime versioni di Safari Mobile.

Codifica Base64

Questo non è un vero e proprio formato in quanto si tratta di un sistema di codifica in grado di rappresentare dati binari in forma testuale. Molti browser lo supportano ed è perfetto per essere utilizzato direttamente nei fogli di stile. Questo è un vantaggio perchè le informazioni del font non devono essere caricate a parte, limitando così il fenomeno del fout. D’altro canto bisogna però considerare che il css aumenterà notevolmente di peso pechè non vi è nessuna tipologia di compressione.

Motori di rendering

Ogni programma, al momento dell’avvio, dà vita ad una serie di istruzioni che interrogano il sistema operativo e scelgono il motore di rendering da utlizzare. Tuttavia può capitare che un programma, tipo browser, venga distribuito con un proprio motore di rendering, come la versione Windows di Safari.

CoreText

Questo è il motore di rendering usato da Mac OSX e iOS. Le sue caratteristiche: rispettare a fondo la forma degli outline e l’uso del subpixeling (spiegato più avanti) che migliora ulteriormente la resa. In pratica è l’engine usato dai monitor e display retina.

GDI+

GDI+ è il motore di rendering usato nei sistemi opertivi Windows XP, Vista e 7. Interpretando le istruzioni di hunting del formato TrueType i caratteri possono presentare forme differenti al variare della dimensione. Rispetto al subpixeling (usato in sistemi operativi recenti) usa un antialiasing in scala di grigio

GDI+ con ClearType

Il ClearType è un algoritmo di subpixeling ed è attivato di default su Windows Vista.

DirectWrite

Questo rendering engine è disponibile su Windows Vista SP2 e Windows 7. Implementa un sistema di subpixeling bidirezionale e come resa si avvicina molto al CoreText.

Impostazioni di smussamento

La traslazione a monitor di un font può risultare a volte poco leggibile ed è per questo che ogni motore di rendering adotta dei sistemi per migliorarne la leggibilità. Parliamo di hinting, antialiasing e subpixeling

Hinting

Le istruzioni di hinting, come abbiamo visto, sono contenute in formati TrueType. Queste istruiscono il motore di rendering su come modificare l’aspetto dei glifi al variare della dimensione. Un buon metodo per valutare la qualità di un font TrueType è visualizzare parte di un testo tra i 9 e 12 pixel. Se i caratteri restano leggibili molto probabilmente il font è stato trattato con adeguate istruzioni di hinting.

Antialiasing

L’antialiasing è un effetto che il rendering engine applica al testo per ammorbidirne i contorni e visualizzarli correttamente. In sostanza un algoritmo decide se contornare o meno un carattere con diverse gradazioni del suo colore, e grazie ad un effetto ottico i caratteri appaiono più piacevoli.

Subpixeling

Il subpixeling è una forma evoluta dell’antialiasing. Il rendering engine invece di intervenire sui pixel agisce direttamente sui subpixel, ossia sulle componenti di rosso, blu e verde, che regolate determinano la colorazione finale del pixel.

Fonte:

http://www.librinformatica.com/5176-piccolo-manuale-della-tipografia-web-pocket-color-9788850331376.html

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github