Mentre le immagini ottengono molto dell'amore quando si tratta di siti Web, è la parola scritta che fa appello ai motori di ricerca e porta avanti il contenuto della maggior parte dei siti. In quanto tale, il design tipografico è una parte fondamentale della progettazione del sito web. Con l'importanza del testo di un sito viene la necessità di assicurarsi che sia bello ed è facile da leggere. Questo è fatto con lo stile CSS (Cascading Style Sheets).
Seguendo lo standard del web design moderno, quando si vuole dettare l'aspetto del contenuto testuale di un sito Web, lo si farà usando i CSS. Questo separa lo stile CSS dalla struttura HTML di una pagina. Ad esempio, se vuoi impostare il carattere di una pagina su "Arial", puoi farlo aggiungendo la seguente regola di stile al tuo CSS (questo verrebbe probabilmente fatto in un foglio di stile CSS esterno che alimenta gli stili per ogni pagina sul sito Web):
corpo {
font-family: Arial;
}
Questo font è impostato per il "corpo", quindi la cascata CSS applicherà lo stile a tutti gli altri elementi della pagina. Questo perché ogni altro elemento HTML è figlio dell'elemento "body", gli stili CSS come la famiglia di font o il colore verranno convertiti in cascata dall'elemento padre all'elemento figlio. Questo sarà il caso, a meno che non venga aggiunto uno stile più specifico per determinati elementi. L'unico problema con questo CSS è che viene specificato un solo font. Se questo font non può essere trovato per qualche motivo, il browser ne sostituirà un altro al suo posto. Questo è male perché non hai il controllo su quale font è usato; il browser sceglierà per te e potrebbe non piacerti ciò che ha deciso di usare! È qui che arriva uno stack di font. Una pila di font è un elenco di caratteri nella dichiarazione della famiglia di font CSS. I font sono elencati in ordine di preferenza che vorresti che appaiano sul sito in caso di problemi come il caricamento di un font. Uno stack di caratteri consente al designer di controllare l'aspetto dei caratteri sulla pagina Web anche se il computer non ha il carattere iniziale richiesto. Quindi, come appare uno stack di font? Ecco un esempio: corpo {
famiglia di font: Georgia, "Times New Roman", serif;
}
Ci sono alcune cose da notare qui. Innanzitutto, vedremo che abbiamo separato i diversi nomi di caratteri con una virgola tra ognuno di essi. Puoi aggiungere tutti i font che desideri, purché separati da una virgola. Il browser proverà a caricare prima il primo carattere specificato. Se fallisce, verrà eseguito lungo la linea cercando ogni font finché non ne trova uno che può usare. In questo esempio, stiamo usando font sicuri per il web, e "Georgia" sarà probabilmente trovata sul computer della persona che sta visitando il sito (il browser cerca sul computer i caratteri specificati sulla pagina, quindi il sito sta effettivamente dicendo computer che font da caricare dal tuo sistema). Se per qualche motivo quel font non è stato trovato, si sposta in basso nello stack e prova il font successivo specificato. In termini di quel font successivo, nota come è scritto nello stack. Il nome di "Times New Roman" è racchiuso tra virgolette. Questo perché il nome del font ha più parole. Qualsiasi nome di carattere con più di una parola (Trebuchet MS, Courier New, ecc.) Deve avere il nome tra virgolette doppie in modo che il browser sappia che tutte quelle parole fanno parte di un nome di carattere. Infine, chiudiamo lo stack dei font con "serif", che è una classificazione generica dei font. Nell'improbabile caso in cui nessuno dei caratteri che hai nominato nello stack sia disponibile, il browser troverà invece un font che almeno rientra nella classificazione corretta che hai scelto. Ad esempio, se si utilizzano font sans-serif come Arial e Verdana, terminare uno stack di font con la classificazione di "sans-serif" manterrà almeno il font in quella famiglia generale se si verifica un problema di caricamento. Certo, dovrebbe essere molto raro che un browser non riesca a trovare nessuno dei caratteri elencati nello stack e debba invece usare questa classificazione generica, è comunque consigliabile includerlo comunque per essere doppiamente sicuro. Molti siti Web oggi utilizzano tipi di carattere web inclusi nel sito insieme ad altre risorse (come le immagini del sito, i file JavaScript, ecc.) O collegati a una posizione di carattere esterna come Google Fonts o Typekit. Mentre questi tipi di carattere dovrebbero essere caricati poiché si collega ai file stessi, si desidera comunque utilizzare uno stack di font per assicurarsi di avere il controllo su eventuali problemi che potrebbero sorgere. La stessa cosa vale per i font "sicuri per il web" che dovrebbero essere sul computer di qualcuno (si noti che i font che abbiamo usato come esempi in questo articolo, inclusi Arial, Verdana, Georgia e Times New Roman, sono tutti font sicuri per il web che dovrebbero sul computer di una persona). Anche se la probabilità che manchi un font è molto bassa, specificare uno stack di font aiuterà il design tipografico di un sito a proiettile il più possibile. Articolo originale di Jennifer Krynin. A cura di Jeremy Girard. Font Stacks e Web Fonts
