Font sicuri per il Web CSS
Cosa sono i caratteri Web Safe?
I caratteri Web Safe sono caratteri installati universalmente su tutti i browser e dispositivi.
Caratteri di riserva
Tuttavia, non ci sono font completamente sicuri per il web al 100%. C'è sempre la possibilità che un font non venga trovato o non sia installato correttamente.
Pertanto, è molto importante utilizzare sempre i caratteri di riserva.
Ciò significa che dovresti aggiungere un elenco di "caratteri di backup" simili nella font-family
proprietà. Se il primo font non funziona, il browser proverà il successivo, il successivo e così via. Termina sempre l'elenco con un nome di famiglia di caratteri generico.
Esempio
Qui ci sono tre tipi di carattere: Tahoma, Verdana e sans-serif. Il secondo e il terzo font sono backup, nel caso in cui il primo non venga trovato.
p {
font-family: Tahoma, Verdana, sans-serif;
}
I migliori caratteri sicuri per il Web per HTML e CSS
Il seguente elenco sono i migliori caratteri sicuri per il Web per HTML e CSS:
- Arial (sans-serif)
- Verdana (sans serif)
- Helvetica (sans-serif)
- Tahoma (sans serif)
- Trabucco MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospazio)
- Brush Script MT (corsivo)
Nota: prima di pubblicare il tuo sito web, controlla sempre come appaiono i tuoi caratteri su browser e dispositivi diversi e usa sempre i caratteri di riserva!
Arial (sans-serif)
Arial è il font più utilizzato sia per i media online che per quelli cartacei. Arial è anche il carattere predefinito in Google Docs.
Arial è uno dei caratteri Web più sicuri ed è disponibile su tutti i principali sistemi operativi.
Esempio
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Verdana (sans serif)
Verdana è un font molto popolare. Verdana è facilmente leggibile anche per caratteri di piccole dimensioni.
Esempio
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Helvetica (sans-serif)
Il font Helvetica è amato dai designer. È adatto a molti tipi di attività.
Esempio
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Tahoma (sans serif)
Il font Tahoma ha meno spazio tra i caratteri.
Esempio
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Trabucco MS (sans-serif)
Trebuchet MS è stato progettato da Microsoft nel 1996. Utilizzare questo tipo di carattere con attenzione. Non supportato da tutti i sistemi operativi mobili.
Esempio
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Times New Roman (serif)
Times New Roman è uno dei caratteri più riconoscibili al mondo. Ha un aspetto professionale ed è utilizzato in molti giornali e siti Web di "notizie". È anche il carattere principale per i dispositivi e le applicazioni Windows.
Esempio
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Georgia (serif)
Georgia è un carattere serif elegante. È molto leggibile con caratteri di diverse dimensioni, quindi è un buon candidato per il design mobile-responsive.
Esempio
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Garamond (serif)
Garamond è un font classico utilizzato per molti libri stampati. Ha un aspetto senza tempo e una buona leggibilità.
Esempio
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Courier New (monospazio)
Courier New è il font serif monospace più utilizzato. Courier New viene spesso utilizzato con i display di codifica e molti provider di posta elettronica lo utilizzano come carattere predefinito. Courier New è anche il carattere standard per le sceneggiature di film.
Esempio
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Brush Script MT (corsivo)
Il font Brush Script MT è stato progettato per imitare la scrittura a mano. È elegante e sofisticato, ma può essere difficile da leggere. Usalo con attenzione.
Esempio
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Suggerimento: controlla anche tutti i caratteri Google disponibili e come utilizzarli.