Semplicemente

Iniziamo con questo articolo ad approfondire la tipografia CSS.

Le famiglie di caratteri

La proprietà CSS font-family consente all'autore di scegliere il tipo di carattere per il testo di un elemento.

Il valore è una lista separata da virgole di nomi di famiglie di caratteri e/o di famiglie generiche. E' consigliabile indicare sempre una delle famiglie generiche di caratteri come ultima voce della lista.

1. body { font-family: Arial, Helvetica, sans-serif; }

Il browser cercherà nel sistema dell'utente il primo carattere indicato, se non lo trova passerà al secondo e così via. La famiglia generica consente, nel caso nessuno dei caratteri scelti dall'autore fosse presente, di visualizzare il contenuto nel modo più vicino possibile alle intenzioni dell'autore.

Famiglia	Descrizione
serif	Caratteri proporzionati con grazie decorative.
sans-serif	Caratteri proporzionati senza grazie decorative.
cursive	Caratteri che simulano la scrittura calligrafica.
fantasy	Caratteri decorativi non classificabili nella altre categorie.
monospace	Caratteri a larghezza fissa nei quali ogni carattere occupa lo stesso spazio orizzontale.

Quando si specifica una famiglia di caratteri che contiene spazi nel nome è necessario utilizzare le virgolette singole o doppie:

1. p { font-family: "Trebuchet MS", sans-serif; }
2. p { font-family: 'Trebuchet MS', sans-serif; }

Ciò vale anche nel caso in cui il nome contenga parentesi, virgolette, punto e virgola, punti esclamativi e virgole.

La dimensione dei caratteri

La proprietà font-size consente di definire le dimensioni dei caratteri.

Per dimensionare i caratteri è possibile utilizzare virtualmente tutte le unità di misura. Non tutte, però, sono adatte alla presentazione del testo su schermo.

1. body { font-size: 100%; }
2. body { font-size: 1em; }
3. body { font-size: medium; }

Dimensionare il testo in pixel, come ho già spiegato, non è una buona idea.

Tutti gli utenti (specialmente gli ipovedenti) devono essere in grado di ingrandire i caratteri. Le versioni di Internet Explorer fino alla 6 non sono in grado di scalare il testo se è dimensionato in pixel. Per garantire la retro-compatibilità della applicazioni web è, quindi, ancora sconsigliabile dimensionare il testo in pixel.

IE 7, per fortuna, incorpora un sistema per lo zoom delle pagine che risolve parzialmente il problema dell'ingrandimento dei pixel. Il testo in pixel non è scalabile neppure con questo browser, ma effettuando lo zoom dell'intera pagina può essere reso leggibile.

Dimensionare il testo con l'unità em e in percentuale è, al contrario, una buona idea, perché:

• consentire agli utenti di modificare le dimensioni del testo è un principio fondamentale per la progettazione di siti web accessibili;
• con le unità em e % anche gli utenti di IE per Windows possono scalare le dimensioni del testo utilizzando la funzione di ingrandimento.

Quando un valore relativo è relazionato a un valore anch'esso relativo può verificarsi un effetto di moltiplicazione dei valori che a volte rende il testo illeggibile.

E' sempre meglio utilizzare il minor numero di variazioni nella dimensione dei font rispetto a quella impostata per body e fare attenzione all'annidamento dei box nel layout della pagina.

I designer abituati a ragionare in pixel possono convertire le misure in em per semplificarsi la vita. Vediamo come fare.

Il valore predefinito della proprietà font-size (cioè il valore corrispondente a 100%, 1em e alla parola chiave medium) generalmente corrisponde a 16px.

Seguendo la proporzione 1:16 si possono individuare valori in em assimilabili ai valori impostati in pixel.

Se 1em = 16px allora 1px = 0.0625em e, per esempio, 12px = 0.75em, 11px = 0.69em e così via. La conversione è comunque grossolana e non garantisce la corrispondenza perfetta.

Il metodo più intelligente è stato sviluppato da Richard Rutter: assegnando a body il valore 62.5% per la proprietà font-size otterremo l'equivalenza 1em = 10px (16 x 0.625 = 10), quindi 1.2em = 12px e così via (fate sempre attenzione, però, ai box annidati!).

Dimensionare il testo per lo schermo con le unità di misura assolute è un errore.

Pollici, centimetri, millimetri, punti (pt) e pica (pc) non devono essere mai utilizzati per dimensionare i caratteri per lo schermo. E' corretto, al contrario, utilizzare unità assolute per dimensionare i caratteri per la stampa, dato che le dimensioni del dispositivo di output sono note.

Le parole chiave assolute

La proprietà font-size comprende, come possibili valori, sette misure assolute:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

I valori sono calcolati in base ad una tabella compilata dal browser. Il valore medium corrisponde a quello predefinito dal browser per la proprietà font-size (cioè 100%, 1em, ovvero 16px a 96dpi).

Il browser calcola i valori delle parole chiave adiacenti secondo un fattore di scala:

• Nella specifica CSS 1 il fattore suggerito era di 1,5 ma si è rivelato troppo ampio.
• CSS 2.0 lo ha fissato a 1,2. Anche quest'ultimo valore crea alcuni problemi per le misure più piccole.
• Nella specifica CSS 2.1 non si assegnano fattori di scala fissi invitando i produttori di browser a costruire una tabella di fattori di scala relativa al valore medium e alle caratteristiche del particolare dispositivo (per esempio la risoluzione).

Quali sono i vantaggi delle parole chiave?

• Sono prive dei problemi di moltiplicazione dei valori tipici delle unità relative.
• Sono slegate dagli effetti della cascata garantendo al contempo la possibilità di ingrandimento del testo anche con IE per Windows.

E i difetti?

• L'implementazione nei vari browser non è del tutto identica.
• Le versioni fino alla 5.5 di Internet Explorer interpretano in modo scorretto queste unità assegnando a small il fattore di scala 1, che corrisponde al valore predefinito del browser, al posto di assegnarlo correttamente a medium. Ciò implica che, se si desidera la retro-compatibilità, è necessario inviare ai browser in questione un CSS differente.

Le parole chiave relative

E' anche possibile dimensionare il testo con le parole chiave relative larger e smaller.

Queste parole chiave sono relative alla scala delle parole chiave assolute.

I valori sono calcolati in relazione all'elemento genitore applicando lo stesso fattore di scala delle parole chiave assolute, per esempio 1,2. I valori impostati con le parole chiave relative possono superare il range di quelle assolute.

Contribuisci alla serie di articoli Introduzione ai CSS

Tag: caratteri, CSS, introduzione ai CSS, presentazione, tipografia

Questo articolo è stato inviato Saturday 5 January 2008 alle 16:46 ed è archiviato nella categoria Fogli di stile, Linguaggi di marcatura. Puoi seguire le risposte tramite il feed RSS 2.0. Se lo desideri puoi lasciare un commento, o un trackback dal tuo sito.