Il font è la tipologia di scrittura del testo. Scegliere un buon font può essere molto importante per la leggibilità della pagina web e per creare l'identità del brand.
In questa lezione, vediamo che tipi di font esistono, quali sono i migliori e la proprietà font-family di CSS.
Sul web, esistono diverse tipologie di font, ad esempio:
| Playfair Display | Playwrite | Roboto |
| Serif | Corsivo | Sans-serif |
Le categorie di font sono essenzialmente cinque:
I font serif sono caratterizzati da piccole linee o tratti aggiunti alla fine delle lettere, noti come "serif". Questi font hanno un aspetto tradizionale e autorevole.
Le serif migliorano la leggibilità nei testi lunghi stampati. Online, invece, non sono molto utilizzati. Sono ideali per libri, giornali, riviste e documenti formali.
Alcuni esempi sono: Times New Roman, Garamond, Georgia e Baskerville.
I font Sans-serif non hanno le linee terminali, conferendo loro un aspetto moderno e pulito. Sono senza serif, con linee nette e pulite, ottimi per la leggibilità su schermo.
Sono perfetti per siti web, interfacce utente, presentazioni e pubblicità.
Alcuni esempi sono: Arial, Helvetica, Verdana e Futura.
I font monospace assegnano lo stesso spazio orizzontale a ogni carattere, come le vecchie macchine da scrivere. Per questo motivo, creando un aspetto ordinato e regolare e sono ideali per la programmazione, tabelle di dati e testi tecnici.
Alcuni esempi sono: Courier, Consolas, Monaco e Lucida Console.
Questi font imitano vari stili di scrittura manuale, offrendo un aspetto personale e unico. Non sono molto consigliati da utilizzare, perché sono meno semplici da leggere.
Alcuni esempi sono: Brush Script, Lucida Handwriting e Comic Sans.
Non esiste un font "migliore" di un altro. In generale, dipende dal contesto in cui si trova il sito web. Tuttavia, sarebbe meglio sempre scegliere un font Sans-serif, perché è più facile da leggere e più moderno.
Se ti interessa, abbiamo scritto un articolo sui migliori font nel blog di Biadets.
Ora che abbiamo visto quali sono le diverse tipologie di font, vediamo come assegnarli ad un testo attraverso CSS.
La proprietà da utilizzare è font-family. Vediamo subito un esempio:
p {
font-family: Arial;
}In questo modo, abbiamo associato il font Arial al paragrafo <p>.
Importante: non in tutti i dispositivi sono disponibili gli stessi font. Ogni sistema operativo ha dei font pre-scaricati. Ad esempio, Windows include Arial, Bahnschrift, Calibri e molti altri nei loro PC. iOS, invece, ha Apple Braille, Arial, Avenir e altri. Anche per Android è lo stesso. Per questo motivo, un font che è disponibile per un dispositivo potrebbe non esserlo per un altro. Per aumentare la compatibilità, in font-family dobbiamo definire diversi font, ma anche la categoria stessa del font.
Ad esempio:
p {
font-family: font-family: Arial, Helvetica, sans-serif;
}Nell'esempio, se il primo font non è disponibile (Arial), il browser sceglierà il secondo font (Helvica). Se anch'esso non lo è, allora il browser opterà per un qualsiasi font della categoria sans-serif presente sul dispositivo.
Nota: se nessun font contenuto in font-family è disponibile, il browser sceglierà il predefinito del dispositivo. Ad esempio, per Windows è Segoe UI. Inserendo diverse alternative in font-family, si può evitarlo.
Se il nome del font è formato da più parole, ad esempio Times New Roman, deve essere racchiuso dalle virgolette (singole o doppie), come nell'esempio:
p {
font-family: "Times New Roman", Times, serif;
}I web font sono font che non devono essere installati sul computer dell'utente per essere visualizzati correttamente in una pagina web. Vengono caricati direttamente dal browser quando la pagina viene visitata.
Attraverso un link che viene inserito nell'HTML della pagina, il browser scarica il font e lo utilizza per visualizzare il testo. Questo link è fornito dai servizi che caricano i font sui loro server e li rendono disponibili ai proprietari di siti web gratuitamente. Uno dei servizi più famosi è Google Fonts.
Ad esempio, vogliamo usare il font "Open Sans" di Google Fonts:
<link> nella nostra pagina.Ecco un esempio:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<style>
p {
font-family: "Open Sans", sans-serif;
}
</style>
</head>
<body>
<p>Ciao a tutti, come va?</p>
</body>
</html>Possiamo anche caricare il font con CSS (ma devi inserire @import come primo elemento in un file .css o nel codice CSS per farlo funzionare) attraverso il codice che Google Fonts ci fornisce:
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
p {
font-family: "Open Sans", sans-serif;
}
</style>
</head>
<body>
<p>Ciao a tutti, come va?</p>
</body>
</html>