Font in CSS

Scegliere il font giusto ha un enorme impatto su come i lettori vivono un sito web.

Il font giusto può creare un’identità forte per il tuo marchio.

Utilizzare un font che sia facile da leggere è importante. Il font aggiunge valore al tuo testo. È altrettanto importante scegliere il colore corretto e la dimensione del testo per il font.

Famiglie di Font Generiche

In CSS ci sono cinque famiglie di font generiche:

• I font serif hanno un piccolo tratto sugli spigoli di ciascuna lettera. Creano un senso di formalità ed eleganza.
• I font sans-serif hanno linee pulite (nessun piccolo tratto collegato). Creano un aspetto moderno e minimalista.
• I font monospace: qui tutte le lettere hanno la stessa larghezza fissa. Creano un aspetto meccanico.
• I font corsivi imitano la scrittura umana.
• I font fantasy sono font decorativi/giocosi. Tutti i diversi nomi dei font appartengono a una delle famiglie di font generiche.

Alcuni Esempi di Font

La Proprietà CSS font-family

In CSS, utilizziamo la proprietà font-family per specificare il font di un testo.

Se il nome del font è composto da più di una parola, deve essere racchiuso tra virgolette, ad esempio: “Times New Roman”.

La proprietà font-family dovrebbe contenere diversi nomi di font come sistema “fallback”, per garantire la massima compatibilità tra browser/sistemi operativi. Inizia con il font desiderato e termina con una famiglia generica (per consentire al browser di scegliere un font simile nella famiglia generica, se non sono disponibili altri font). I nomi dei font dovrebbero essere separati da virgole. Leggi di più sui font di fallback nel prossimo capitolo.

h1 {
  font-family: "Times New Roman", Times, serif;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
}

p {
  font-family: "Lucida Console", "Courier New", monospace;
}

Font Web Safe e Fallback

I font web safe sono font installati universalmente su tutti i browser e dispositivi.

Tuttavia, non esistono font web sicuri al 100%. C’è sempre la possibilità che un font non venga trovato o non venga installato correttamente. Pertanto, è molto importante utilizzare sempre i font di backup.

Questo significa che dovresti aggiungere una lista di “font di backup” simili nella proprietà font-family. Se il primo font non funziona, il browser proverà il successivo e così via. Concludi sempre l’elenco con un nome di famiglia di font generica.

Stile del Font

La proprietà font-style viene utilizzata principalmente per specificare il testo in corsivo.

Questa proprietà ha tre valori:

• normal - Il testo viene mostrato normalmente
• italic - Il testo viene mostrato in corsivo
• oblique - Il testo è “inclinato” (oblique è molto simile al corsivo, ma meno supportato)

p.normale {
  font-style: normal;
}

p.corsivo {
  font-style: italic;
}

p.obliquo {
  font-style: oblique;
}

Grassetto del Font

La proprietà font-weight specifica lo spessore di un font:

p.normale {
  font-weight: normal;
}

p.spesso {
  font-weight: bold;
}

Variante del Font

La proprietà font-variant specifica se un testo dovrebbe essere visualizzato in un font in maiuscolo.

In un font in maiuscolo, tutte le lettere minuscole vengono convertite in lettere maiuscole. Tuttavia, le lettere maiuscole convertite appaiono in una dimensione del font più piccola rispetto alle lettere maiuscole originali nel testo.

p.normale {
  font-variant: normal;
}

p.piccolo {
  font-variant: small-caps;
}

Dimensione del Font

La proprietà font-size imposta la dimensione del testo.

Essere in grado di gestire la dimensione del testo è importante nel design web. Tuttavia, non dovresti utilizzare le regolazioni della dimensione del font per fare in modo che i paragrafi assomiglino a titoli o che i titoli assomiglino a paragrafi.

Utilizza sempre i tag HTML appropriati, come <h1> - <h6> per i titoli e <p> per i paragrafi.

Il valore font-size può essere una dimensione assoluta o relativa.

Google Fonts

Se non desideri utilizzare nessuno dei font standard in HTML, puoi utilizzare i Google Fonts.

I Google Fonts sono gratuiti e offrono più di 1000 font tra cui scegliere.

Come Utilizzare i Google Fonts

Aggiungi semplicemente un link a un foglio di stile speciale nella sezione <head> e quindi fai riferimento al font nel CSS.

<head>
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Pacifico" />
  <style>
    body {
      font-family: "Pacifico", sans-serif;
    }
  </style>
</head>