Anteprima font di sistema
Scrivi un testo e confrontalo con i font di sistema più diffusi: regoli dimensione e peso, poi copi lo stack CSS pronto da incollare nel tuo foglio di stile.
Perché usare i font di sistema?
I font di sistema sono già installati sul dispositivo di chi visita il sito: la pagina non deve scaricare nessun file esterno, quindi il testo appare subito, senza il fastidioso "lampeggio" (FOUT) tipico dei web font. Per questo motivo GitHub, Booking.com e molti altri grandi siti usano stack di sistema. Attenzione però: non tutti i font sono ovunque — Impact e Comic Sans MS ad esempio mancano su molti dispositivi Android, dove il browser ripiega sul font generico indicato in fondo allo stack.
Come si usa lo stack CSS copiato?
Incolla lo stack nella proprietà font-family del tuo CSS, ad esempio body { font-family: Georgia, "Times New Roman", serif; }. L'ordine conta: il browser prova i font da sinistra a destra e usa il primo disponibile; l'ultimo valore (serif, sans-serif o monospace) è la rete di sicurezza che garantisce comunque un risultato leggibile. Lo stack "system-ui" merita una nota: mostra il font nativo dell'interfaccia — San Francisco su Mac e iPhone, Segoe UI su Windows, Roboto su Android — quindi l'aspetto cambia da dispositivo a dispositivo, ed è proprio questo il suo punto di forza.