Il trattamento tipografico riguarda il design del testo. Esso abbraccia un vastissimo campo che va dai libri ai giornali che ci capitano per le mani nella nostra vita quotidiana, fino ad arrivare al web.
La tipografia va oltre il tipo di carattere: essa riguarda anche lo spazio intorno al testo, come esso è posizionato nella pagina o a schermo, la sua dimensione ecc.
Specificare il tipo di carattere
I CSS offrono diversi modi per definire l' aspetto dei caratteri. Si vedranno anche le forme abbreviate per dichiararli, in modo tale da avere molte dichiarazioni in una sola. Quando nella stampa ci si riferisce ad un carattere, normalmente si parla del tipo, della dimensione, dello spessore, e dell' interlinea. Con i CSS è la stessa cosa. Le proprietà font-family, font-size, font-weight e line-height non fanno altro che regolare questi aspetti. Il codice seguente stabilisce che tutti i paragrafi devono avere carattere Verdana, grassetto, 13pt, e 18pt di interlinea.
p{
font-family:Verdana;
font-size:13pt;
font-weight:bold;
line-height:18pt;
}
Fin qui è abbastanza semplice, ma più avanti saranno affrontate tutte queste proprietà, così come ne esistono anche altre che controllano l' aspetto dei caratteri: font-style e text-decoration.
La prima controlla se il carattere è in corsivo o meno e la seconda sottolinea il carattere.
Famiglie di font (font-family)
Il font-family specifica quale tipo di font deve usare il browser. Esso ha bisogno solo del nome, dato che i caratteri sono installati nel disco rigido dell' utente. Siccome non tutti hanno gli stessi caratteri, font-family accetta una lista di nomi separati da virgole e il browser li "prova" tutti (uno alla volta) fino a quando non trova quello installato. Ci si imbatte spesso in termini quali serif e sans-serif.
Serif cioè "grazie", sono le estremità che si trovano nei caratteri come il Times. I font sans-serif sono, invece, quei caratteri che non hanno le estremità appuntite, come Verdana ed Arial.
Dimensione del font (font-size)
La proprietà font-size riguarda la dimensione del carattere. Ecco un esempio. Nonostante la misura del font impostato sia di 14 pixel, il Times sembra più piccolo del Georgia, in quanto ha un' altezza della lettera minuscola inferiore. Inoltre i caratteri del Times sono più stretti, orizzontalmente, rispetto a quelli del Georgia. È importante ricordare che tra le unità di misura fisiche (px, pt ecc) solo i px sono visualizzati nella misura stabilita nei browser. Oltre ad accettare misure specifiche, i CSS includono anche un set di parole chiave da usare con font-size. Esse sono:
- font-size: xx-small;
- font-size: x-small;
- font-size: small;
- font-size: medium;
- font-size: large;
- font-size: x-large;
- font-size: xx-large
Smaller e larger rendono il carattere più piccolo o più grande rispetto a quello del loro genitore.
Interlinea (line-height)
La proprietà line-height controlla l'interlinea di un testo, vale a dire lo spazio tra un rigo e l'altro. Il valore di default corrisponde ad un testo molto "compresso", come è possibile vedere nel seguente esempio. Se l'interlinea è molto stretta, capita spesso di "raddoppiare" mentre si legge, cioè ritornare sullo stesso rigo. Il primo blocco di testo non ha nessuna interlinea impostata, mentre il secondo ha una line-height di 1.8em. Una buona misura sarebbe di 1.5em, cioè 1.5 volte la dimensione del carattere.
Spessore del font (font-weight)
I CSS usano due modi per definire il "peso" di un font: assoluto e relativo. Quello assoluto definisce lo spessore come normal o bold.
font-weight: normal; font-weight: bold;
Il metodo relativo usa le parole chiave bolder e lighter per cambiare lo spessore del carattere. Attenzione a non rendere un carattere bold come bolder oppure normal come lighter in quanto non funziona.