Il design tipografico gioca un ruolo importante nella progettazione di siti web. Il contenuto di testo ben strutturato e formattato aiuta un sito ad avere più successo creando un'esperienza di lettura che è sia piacevole che facile da consumare. Parte dei tuoi sforzi nel lavorare con il tipo sarà quello di scegliere i caratteri giusti per il tuo design e quindi utilizzare i CSS per aggiungere quei caratteri e stili di carattere alla visualizzazione della pagina. Questo viene fatto usando quello che viene chiamato a pila di caratteri.
Stack di caratteri
Quando tu specificare un carattere da utilizzare in una pagina Web, è buona norma includere anche opzioni di fallback nel caso in cui non sia possibile trovare la scelta del carattere. Queste opzioni di fallback sono presentate in pila di caratteri. Se il browser non riesce a trovare il primo carattere elencato nello stack, passa a quello successivo. Continua questo processo fino a quando non trova un carattere che può utilizzare o esaurisce le scelte (nel qual caso sceglie solo qualsiasi carattere di sistema che desidera). Ecco un esempio di come apparirebbe un font-stack in CSS quando applicato all'elemento "body":
corpo {
font-family: Georgia, "Times New Roman", serif;
}
Il carattere Georgia viene visualizzato per primo, quindi per impostazione predefinita questo è ciò che verrà utilizzato dalla pagina, ma se quel carattere non è disponibile per qualche motivo, la pagina torna al Times New Roman.
Accludere Times New Roman tra virgolette perché è un nome composto da più parole. I nomi dei caratteri composti da una sola parola, come Georgia o Arial, non richiedono le virgolette, ma i nomi dei caratteri composti da più parole con spazi incorporati li richiedono, quindi il browser sa che tutte quelle parole comprendono il nome del carattere.
Lo stack dei caratteri termina con la parola grazie. Questo è un nome generico di una famiglia di caratteri. Nel caso improbabile che una persona non abbia la Georgia o Times New Roman sul loro computer, il sito utilizzava qualsiasi tipo di carattere serif potesse trovare. Il browser sceglierà un carattere per te, ma almeno offri una guida in modo che sappia quale tipo di carattere funzionerebbe meglio all'interno del design.
Famiglie di caratteri generici
I nomi dei caratteri generici disponibili nei CSS sono:
- corsivo
- fantasia
- monospazio
- grazie
- sans-serif
Mentre ci sono molte altre classificazioni di caratteri disponibili nel web design e nella tipografia, tra cui slab-serif, blackletter, display, grunge e altro, questi cinque nomi di font generici sono quelli che utilizzeresti in uno stack di font in CSS.
- Caratteri corsivi - spesso presentano forme di lettere sottili e ornate che hanno lo scopo di replicare il testo scritto a mano di fantasia. Questi caratteri, a causa delle loro lettere sottili e fiorite, non sono appropriati per un grande blocco di contenuti come il body copy. I caratteri corsivi sono generalmente utilizzati per intestazioni ed esigenze di testo più brevi che possono essere visualizzati con caratteri di dimensioni maggiori.
- Font fantasy Fantasy — sono i caratteri un po' pazzi che in realtà non rientrano in nessun'altra categoria. Caratteri che replicano loghi noti, come le forme delle lettere del Harry Potter o Ritorno al futuro film, rientrano in questa categoria. Questi caratteri non sono appropriati per il contenuto del corpo poiché sono spesso così stilizzati che leggere passaggi più lunghi di testo scritti con questi caratteri è troppo difficile da fare.
- Caratteri monospazio - presentano forme di lettere di dimensioni uguali e distanziate come quelle che avresti trovato su una vecchia macchina da scrivere. A differenza di altri caratteri che hanno larghezze variabili per le lettere a seconda della loro dimensione (ad esempio, un maiuscolo W occupa molto più spazio di una minuscola io), i caratteri a spaziatura fissa utilizzano una larghezza fissa per tutti i caratteri. Questi caratteri vengono spesso utilizzati per la lettura del codice perché hanno un aspetto nettamente diverso dall'altro testo in quella pagina.
- caratteri serif — impiega piccole legature extra sui moduli delle lettere. Quei pezzi in più si chiamano grazie. I caratteri serif comuni sono Georgia e Times New Roman. I caratteri serif funzionano alla grande per testo di grandi dimensioni come l'intestazione, nonché lunghi passaggi di testo e testo del corpo.
- Sans-serifcaratteri — non hanno legature. Il nome significa senza grazie. I caratteri popolari in questa categoria includono Arial o Helvetica. Simile ai caratteri con grazie, i caratteri sans-serif si comportano ugualmente bene nelle intestazioni e nel contenuto del corpo, sebbene alcuni gli esperti preferiscono che i grandi blocchi di testo evitino i caratteri sans-serif perché sono più difficili da leggere in piccoli punti dimensioni.