.:: LivioGiordano.it ::.

Web development

I pixel fonts

Descrizione di alcuni accorgimenti e trucchi da utilizzare per un corretto impiego dei pixel fonts.

Ultimamente sono sempre più impiegati dagli sviluppatori di siti web in Flash, ma una conoscenza approfondita ed uncorretto impiego dei pixel fonts (altrimenti detti bitmap fonts) rimane fondamentale per ottenere il massimo dalle potenzialità e dalle caratteristiche di questa famiglia di caratteri.

Cosa sono

I pixel fonts (o bitmap fonts) sono una famiglia di caratteri che ha nella caratteristica di essere costruiti a partire 'dai pixel' il loro punto di forza; infatti ciò permette di impiegare questi fonts a dimensioni ridotte (alle quali un tradizionale font risulterebbe illeggibile), preservandone la nitidezza e, cosa più importante, la leggibilità.
Il loro impiego principale avviene all'interno di Flash movies o di elementi grafici (solitamente gif), mentre è pressochè inesistente un'utilizzo all'interno di html puro; questo per alcuni motivi:

Non tutti i PC hanno tra i fonts di sistema installati anche un bitmap font, quindi ciò comporta l'impossibilità di visualizzare correttamente il testo, il cui carattere verà sostituito con uno somigliante (e quasi sempre questa somiglianza è lontana anni luce) presente sul PC dell'utente.
Macromedia Flash incorpora i fonts, permettendo all'utente di visualizzare i movies con gli stessi fonts originali utilizzati dallo sviluppatore in fase di costruzione.
Macromedia Flash è l'applicativo che più ha tratto vantaggi dall'impiego dei pixel fonts, vista la non eccellente gestione dei tradizionali caratteri (ad esempio Arial, Verdana, Times New Roman, per citarne alcuni) all'interno dei movies, causa principale dell'effetto sfocatura dei testi.
I pixel font, se utilizzati con i dovuti accorgimenti, riescono ad aggirare il problema dell'antialias, che affligge praticamente tutti i fonts utilizzati in Flash.

A questo punto vi chiederete: perchè i pixel fonts non sono soggetti all'antialias, non sgranano, non sfocano? Potete notare che questi caratteri non presentano curve o meglio, non possiedono curve "ammorbidite", al contrario degli altri caratteri; il che permette di tracciare i contorni in maniera precisa e dettagliata, molto geometrica, evitando gli sgradevoli effetto a cui si accennava prima.

Esempio di pixel fonts

Se ancora non li conoscete, per farvi un'idea di cosa stiamo parlando, potete osservare l'immagine qui sotto, che riproduce alcuni esempi di pixel font:

Come riconoscerli

Esistono diverse famiglie di bitmap fonts; alcune delle principali sono:

Sw!ft
Small talk
bit3
standard
04b_

in particolare esiste una famiglia di pixel fonts il cui nome per esteso è caratterizzato da una serie di numeri. questi numeri non sono utilizzati a caso, ma servono per descrivere determinate caratteristiche del font stesso. I primi due numeri indicano la dimensione del font in pixel; il terzo numero può essere un 5, che rappresenta un carattere regolare, o un 6, che rappresenta un carattere in grassetto. Il quarto numero infine indica lo stile, la cui corrispondenza è la seguente:

3 = Expanded;
4 = Expanded, spaziatura ampia;
5 = Regular;
6 = Regular, spaziatura ampia;
7 = Condensed;
8 = Condensed, spaziatura ampia;

Da quanto detto avrete quindi intuito che una delle caratteristiche principali dei bitmap fonts è la loro dimensione in pixel. Vedremo di seguito come sfruttare al meglio queste caratteristiche.

Utilizzo dei pixel fonts

Per ottenere un buon risultato dall'impiego dei bitmap fonts è necessario seguire alcune regole, senza le quali l'impiego dei pixel fonts per sfruttare le loro caratteristiche peculiari sarebbe vanificato, riducendo il risultato a ciò che si potrebbe ottenere con l'uso di un qualunque altro font.
Come già detto, ogni pixel font ha una determinata dimensione in pixel; questo vuol dire che un determinato carattere da il massimo in termini di "resa visiva" alla dimensione per cui è stato progettato. Queste dimensioni di solito variano entro un range che va dagli 8 ai 12 pt, anche se la maggior parte dei pixel fonts appartengono all'intervallo 8-10 pt. E' possibile anche utilizzare questi caratteri a dimensioni non standard, ma l'unico consiglio da seguire è quello di impiegare dimensioni multiple di quella base per evitare il più possibile effetti sgradevoli; quindi un font con dimensione base 8pt, manterrà le sue caratteristiche a 16pt, a 32pt, e così via; ovviamente a queste dimensioni si perde la particolare caratteristica di questi fonts, che ingrandendosi tendono a mostrare i loro bordi spigolosi e squadrettati. Non sono invece garantiti risultati soddisfacenti con l'impiego dei fonts a misure fuori da quella base o multiple, che riportano spesso risultati parecchio sgradevoli.

Utilizzo dei pixel font in Macromedia Flash

Ecco una serie di accorgimenti da seguire quando si utilizzano i pixel fonts all'interno di Macromedia Flash per ottenere la massima resa visiva:

Posizionare sempre i fonts sullo stage a coordinate intere; ad esempio: un posizionamento corretto è quello che presenta le coordinate X=50 ed Y=88 del font sullo stage; invece coordinate come X= 50,3 ed Y=88,7 provocano un effetto sfocatura. Tali valori vanno sempre arrotondati all'intero più vicino (88.4 -> 88.0, 54.8 -> 55.0). se il testo dovrà muoversi sullo stage, è possibile utilizzare l'accorgimento di arrotondare il valore della posizione finale utilizzando la funzione ActionScript Math.round(). questi parametri possono essere regolati dal pannello delle proprietà del font stesso;
Utilizzare sempre dimensioni Width ed Heigh (altezza e larghezza) del campo di testo che siano del 100.0%; altri valori (anche 100.1%) provocano il già citato effetto sfocatura; questi parametri possono essere regolati dal pannello "Trasforma" di Flash;
Utilizzare sempre un allineamento a sinistra dei campi di testo; mai utilizzare invece allineamento centrato o giustificato. è possibile regolare anche questo parametro dal pannello delle proprietà del font stesso;
Assicurarsi che nel pannello delle proprietà del campo di testo siano deselezionate le seguenti opzioni: - Auto Kern; - Use Device Fonts;
Nel caso di testo dinamico, fare attenzione al valore della spaziatura tra caratteri (valore consigliato 0);
Non applicare mai al testo le proprietà grassetto e corsivo;
Anche la rotazione dei campi di testo contenenti pixel fonts va effettuata con valori interi, e precisamente utilizzando solo step di 90 gradi esatti;
In caso di utilizzo annidato (ad esempio campi di testo all'interno di mc, o più mc annidati), è necessario seguire le regole di posizionamento e dimensione descritte sopra ed applicarle anche ai mc contenitori; quindi anche i mc contenenti pixel fonts vanno posizionati su coordinate intere nello stage, e con dimensioni del 100.0%. Tali regole vanno applicate ricorsivamente per ogni livello di annidamento.

Nell'applicare tutti questi accorgimenti, non bisogna comunque dimenticarsi di una cosa fondamentale: incorporare sempre i caratteri nei campi di testo! Per i campi di testo statici, flash incorpora automaticamente i caratteri; per gli altri (campi di testo dinamici ed input), è necessario incorporarli specificando esplicitamente quali includere.

Tutti questi accorgimenti vi permetteranno di ottenere il massimo dall'impiego di questa particolare classe di caratteri. Ovviamente alcuni problemi di resa visiva potrebbero insorgere ugualmente; essi potrebbero essere dovuti al particolare uso che flash fa dell'antialias, o ai difetti di alcune famiglie di bitmap fonts (ad esempio la famiglia 04_ presenta spesso le lettere "p", "b", e "d" maiuscole piene).

In rete esistono diversi siti dai quali è possibile scaricare pixel fonts, e gli utenti possono anche costruirseli da se o convertire dei ttf (anche se queste ultime soluzioni danno risultati meno eccellenti). Un sito contenente una vasta collezione di fonts scaricabili gratuitamente (sia per Windows che per Mac e Unix), e che contiene un'ampia sezione dedicata ai bitmap fonts è www.dafont.com.

Livio Giordano

Trovi questo articolo anche su MMkit:

http://www.mmkit.com/article.php?sid=339&lang=it_IT