Archivi tag: famiglia

CSS3 Base – 3.1 – Tipo di carattere

In questa lezione vi spiego:

  • come modificare il tipo di font per i testi della vostra pagina;
  • quali tipi di caratteri potete utilizzare.

Famiglie di caratteri

Quando create una pagina web usando solo codice HTML e la visualizzate su un browser, quest’ultimo decide che tipo di carattere usare per i testi.

Normalmente questa scelta viene fatta in base alle impostazioni predefinite dal browser: nella maggior parte dei casi viene scelto il carattere Times New Roman.

E’ possibile cambiare il tipo di carattere, o font, tramite i CSS.

Esistono diverse “famiglie” di caratteri, ovvero gruppi di font che hanno caratteristiche comuni.

Le 3 principali famiglie sono:

  • caratteri serif:
    • Times New Roman
    • Georgia
  • caratteri sans-serif:
    • Arial
    • Verdana
  • caratteri monospace:
    • Courier New
    • Lucida Console

I caratteri di tipo serif sono quelli che hanno le grazie sulle lettere, ovvero quelle estremità affusolate e curve, come in questo caso:

Lettera A con grazie
Lettera A con grazie

I caratteri sans-serif non presentano le grazie, quindi hanno spigoli netti:

Caratteri senza grazie
Caratteri senza grazie

Infine, i caratteri monospace hanno lettere con la stessa larghezza (anche gli spazi):

Caratteri monospace
Caratteri monospace

font-family

Il tipo di font può essere modificato utilizzando la proprietà font-family:

Uso di font-family
Uso di font-family

Questa proprietà accetta sia il tipo di carattere, sia la famiglia di appartenenza.

Ad esempio:

font-family: verdana;

Indica che il tipo di carattere scelto è il Verdana, mentre:

font-family: sans-serif;

indica che possiamo usare qualsiasi carattere senza grazie (il browser ne sceglierà uno).

Notare che se il nome del carattere è composto da più di una parola, andrà scritto tra doppi apici:

font-family: "Times New Roman";

Nell’immagine di esempio vedete che font-family ha diversi valori:

font-family: verdana, arial, helvetica, sans-serif;

Può succedere che il sistema operativo su cui viene visto il sito non abbia tutti i caratteri necessari (pensate ad uno smartphone), così è buona norma dare una scelta più ampia di caratteri tra cui scegliere. Il browser sceglierà uno di questi font partendo da sinistra verso destra, in base alla disponibilità di font del sistema:

  1. prima cercherà il font Verdana;
  2. se non c’è cercherà il font Arial;
  3. se non lo trova andrà bene Helvetica;
  4. se non trova nemmeno questo, sceglierà un font qualsiasi, purché di tipo sans-serif.

Video