logo tritatasti
Corso Base » CSS

Tipografia e stile dei link in CSS

Font

body {
  font-family: "Helvetica Neue", Arial, sans-serif; /* elenco di fallback, da sinistra a destra */
  font-size: 16px;
  font-weight: normal;  /* normal | bold | 100-900 */
  font-style: normal;   /* normal | italic */
}

font-family accetta un elenco: il browser usa il primo font disponibile sul dispositivo dell’utente, altrimenti passa al successivo — per questo è buona norma chiudere sempre con una famiglia generica (sans-serif, serif, monospace).

Colore, allineamento e spaziatura del testo

p {
  color: #333;
  text-align: left;      /* left | center | right | justify */
  line-height: 1.5;       /* altezza riga: 1.5 volte la dimensione del font, ottimo per la leggibilità */
  letter-spacing: 0.5px;
  text-transform: uppercase; /* uppercase | lowercase | capitalize */
  text-decoration: underline; /* underline | line-through | none */
}

line-height è una delle proprietà con il maggior impatto sulla leggibilità di un testo: un valore troppo basso rende i paragrafi lunghi faticosi da leggere.

Icone

Le icone su un sito moderno arrivano quasi sempre da due strade:

  • Icon font (es. Font Awesome): funzionano come caratteri di testo, facili da colorare e ridimensionare con color e font-size.
  • SVG in linea: vettoriali, leggerissimi, personalizzabili via CSS quanto un font.
<i class="fa-solid fa-envelope"></i>

.fa-envelope {
  color: dodgerblue;
  font-size: 24px;
}

Stile dei link

I link hanno pseudo-classi dedicate agli stati:

a {
  color: dodgerblue;
  text-decoration: none;
  transition: color 0.2s ease; /* rende il cambio di colore fluido invece che a scatto */
}

a:hover {
  color: darkblue;   /* al passaggio del mouse */
}

a:visited {
  color: purple;     /* link già visitato */
}

transition anima il passaggio da uno stato all’altro di una proprietà — qui basta una riga per rendere l’hover più gradevole, senza bisogno di animazioni complesse.

Esercitazione pratica

Applica una famiglia di font con fallback a tutta la pagina, imposta line-height sui paragrafi per migliorarne la leggibilità, e stilizza i link con un colore personalizzato e una transizione sull’hover.

Approfondisci

no link
Parliamone