Quando si progetta un sito Web, uno degli elementi chiave di una pagina con cui si lavorerà è il contenuto del testo. Di conseguenza, quando si crea una pagina Web e la si disegna con i CSS, gran parte di questo sforzo sarà centrata sulla tipografia del sito.
Il design tipografico svolge un ruolo importante nella progettazione di siti Web. Contenuti di testo ben strutturati e formattati aiutano un sito ad avere più successo creando un'esperienza di lettura piacevole e facile da utilizzare. Parte del tuo impegno nel lavorare con il tipo sarà quello di scegliere i caratteri giusti per la tua progettazione e quindi di usare i CSS per aggiungere quei caratteri e stili di carattere alla visualizzazione della pagina. Questo viene fatto usando quello che viene chiamato "font-stack"
Font-Stacks
Quando si specifica un carattere da utilizzare in una pagina Web, è consigliabile includere anche le opzioni di fallback nel caso in cui non sia possibile trovare la scelta del font. Queste opzioni di fallback sono presentate nello "stack dei font". 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 font che può utilizzare, oppure esaurisce le scelte (nel qual caso sceglie solo il font di sistema che desidera). Ecco un esempio di come apparirà lo stack di font in CSS quando applicato all'elemento "body":
corpo { famiglia di font: Georgia, "Times New Roman", serif;}
Si noti che specifichiamo prima il carattere Georgia. Di default, questo è quello che la pagina userà, ma se quel font non è disponibile per qualche motivo, la pagina tornerà a Times New Roman. Alleghiamo quel nome di carattere tra virgolette perché è un nome di più parole. I nomi dei font a una sola parola, come Georgia o Arial, non richiedono le virgolette, ma il nome del carattere multi-word ne ha bisogno in modo che il browser sappia che tutte quelle parole costituiscono il nome del font. Se guardi alla fine della pila di font, dovresti notare che finiamo con la parola "serif". Questo è un nome di famiglia di carattere generico. Nell'improbabile eventualità che una persona non abbia Georgia o Times New Roman sul proprio computer, il sito utilizzerà qualsiasi tipo di carattere serif che potrebbe trovare. Questo è preferibile a consentire al sito di ripiegare su qualsiasi carattere desideri, perché è possibile almeno dire quale tipo di carattere utilizzare in modo che l'aspetto generale e il tono del design di un sito siano il più possibile integri. Sì, il browser sceglierà un font per te, ma almeno stai fornendo una guida in modo che sappia quale tipo di carattere funzionerebbe meglio all'interno del design. Il nome del carattere generico disponibile in CSS è: Mentre ci sono molte altre classificazioni di font disponibili in web design e tipografia, tra cui slab-serif, blackletter, display, grunge e altro, questi 5 nomi di font generici sopra elencati sono quelli che usereste in un font-stack in CSS. Quali sono le differenze in queste classificazioni di font? Diamo un'occhiata! Corsivo i caratteri spesso presentano forme di lettera sottili e ornate che sono pensate per replicare il testo scritto a mano. Questi caratteri, a causa delle loro lettere sottili e floreali, non sono appropriati per un grande blocco di contenuti come la copia del corpo. I caratteri corsivi sono generalmente utilizzati per le intestazioni e per le esigenze di testo più brevi che possono essere visualizzate con caratteri di dimensioni maggiori. Fantasia i caratteri sono caratteri un po 'pazzi che non rientrano in nessuna altra categoria. I caratteri che riproducono loghi noti, come le forme delle lettere dei film di Harry Potter o Ritorno al futuro, rientrano in questa categoria. Ancora una volta, questi font non sono appropriati per il contenuto del corpo, poiché sono spesso così stilizzati che la lettura di passaggi più lunghi del testo scritto in questi font è troppo difficile da fare. Monospace i caratteri sono quelli in cui tutte le forme delle lettere sono uguali e distanziate, come avresti trovato su una vecchia macchina da scrivere. A differenza di altri tipi di carattere che hanno larghezze variabili per le lettere a seconda della loro dimensione (ad esempio, una "W" maiuscola occuperebbe molto più spazio di una "i" minuscola), i font monospace hanno una larghezza fissa per tutti i caratteri. Questi tipi di carattere vengono spesso utilizzati quando il codice viene visualizzato su una pagina perché hanno un aspetto nettamente diverso rispetto ad altri testo in quella pagina. Serif i caratteri sono una delle classificazioni più popolari. Questi sono caratteri che hanno le piccole legature in più sulle lettere. Quei pezzi extra sono chiamati "serifs". I comuni caratteri serif sono Georgia e Times New Roman. I caratteri Serif possono essere utilizzati per testi di grandi dimensioni come l'intestazione e lunghi passaggi di testo e copia del corpo. Sans-serif è la classifica finale che vedremo. Questi sono caratteri che non hanno quelle legature di cui sopra. Il nome significa "senza grazie". I caratteri più popolari in questa categoria sarebbero Arial o Helvetica. Analogamente ai caratteri serif, i caratteri sans-serif possono essere usati ugualmente bene sia nelle intestazioni che nel contenuto del corpo. Famiglie di font generici
