Il design tipografico è un elemento di fondamentale importanza per il design di un sito web di successo. Creare siti con un testo facile da leggere e dall'aspetto fantastico è l'obiettivo di ogni professionista del web design. Per ottenere ciò, dovrai essere in grado di impostare i caratteri specifici che desideri utilizzare nelle tue pagine web. Per specificare il carattere tipografico o la famiglia di caratteri sui tuoi documenti Web, utilizzerai la proprietà dello stile della famiglia di caratteri nel tuo CSS.
Lo stile di famiglia di caratteri più semplice che potresti usare includerebbe solo una famiglia di caratteri:
p {
famiglia di caratteri: Arial;
}
Se applicassi questo stile a una pagina, tutti i paragrafi verrebbero visualizzati nella famiglia di caratteri "Arial". Questo è fantastico e poiché "Arial" è ciò che è noto come "carattere sicuro per il web", che significa la maggior parte (se non tutti) i computer lo avrebbero installato, puoi stare tranquillo sapendo che la tua pagina verrà visualizzata nel previsto font.
Quindi cosa succede se il carattere selezionato non può essere trovato? Ad esempio, se non utilizzi un "carattere sicuro per il web" su una pagina, cosa fa l'agente utente se non ha quel carattere? Fanno una sostituzione.
Ciò può risultare in alcune pagine dall'aspetto divertente. Una volta sono andato su una pagina in cui il mio computer lo visualizzava interamente in "Wingdings" (un set di icone) perché il mio computer non aveva il carattere che lo sviluppatore aveva specificato e il mio browser ha fatto una scelta abissale in quale carattere avrebbe usato come a sostituzione. La pagina era completamente illeggibile per me! È qui che entra in gioco uno stack di font.
Separare più famiglie di caratteri con una virgola in una pila di caratteri
Uno "stack di caratteri" è un elenco di caratteri che desideri utilizzare per la tua pagina. Metteresti le tue scelte di carattere in ordine di preferenza e separeresti ciascuna con una virgola. Se il browser non ha la prima famiglia di caratteri nell'elenco, proverà la seconda e poi la terza e così via finché non ne trova una che ha nel sistema.
font-family: Pussycat, Algerian, Broadway;
Nell'esempio sopra, il browser cercherà prima il carattere "Pussycat", poi "Algerian" e poi "Broadway" se nessuno degli altri caratteri è stato trovato. Questo ti dà più possibilità che venga utilizzato almeno uno dei caratteri scelti. Non è perfetto, motivo per cui ne abbiamo ancora di più da aggiungere al nostro stack di caratteri (continua a leggere!).
Usa caratteri generici per ultimo
Quindi puoi creare uno stack di caratteri con un elenco di caratteri e non averne ancora nessuno che il browser possa trovare. Non vuoi che la tua pagina appaia illeggibile se il browser fa una cattiva scelta di sostituzione. Fortunatamente CSS ha una soluzione anche per questo, e si chiama caratteri generici.
Dovresti sempre terminare il tuo elenco di caratteri (anche se si tratta di un elenco di una famiglia o solo di caratteri sicuri per il Web) con un carattere generico. Ce ne sono cinque che puoi usare:
- Corsivo
- Fantasia
- monospazio
- Sans-serif
- serif
I due esempi precedenti potrebbero essere modificati in:
font-family: Arial, sans-serif;
o.
font-family: Pussycat, Algerian, Broadway, fantasy;
Alcuni nomi di famiglie di caratteri sono due o più parole
Se la famiglia di caratteri che desideri utilizzare è composta da più di una parola, dovresti racchiuderla tra virgolette. Sebbene alcuni browser siano in grado di leggere le famiglie di caratteri senza virgolette, potrebbero verificarsi problemi se lo spazio vuoto viene ridotto o ignorato.
font-family: "Times New Roman", serif;
In questo esempio, puoi vedere che il nome del carattere "Times New Roman", che è composto da più parole, è racchiuso tra virgolette. Questo dice al browser che tutte e tre queste parole fanno parte di quel nome di carattere, al contrario di tre diversi caratteri tutti con nomi di una sola parola.