Font CSS: Tutte le Proprietà per Gestire la Tipografia

Sei un aspirante web designer? Oggi esploreremo tutte le principali proprietà CSS che ti permetteranno di gestire la tipografia in modo efficace e professionale. Dalla scelta di font leggibili ed eleganti, alla definizione di dimensioni appropriate, fino all’utilizzo di colori che attirano l’attenzione: scoprirai come utilizzare al meglio il CSS per valorizzare la comunicazione visiva del tuo sito web.

Font-family CSS: Impostare il Carattere Tipografico

La scelta del font è importante come scegliere l'outfit per una festa: può fare una grande differenza. Un font leggibile e ben scelto rende il contenuto più facile da capire e il sito più attraente.

.serif {
  font-family: Times, "Times New Roman", Georgia, serif;
}
.sans-serif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

Qui sopra, abbiamo due classi: .serif e .sans-serif, che servono per impostare rispettivamente famiglie di caratteri con grazie (serif) e senza grazie (sans-serif).

Tip SEO: Ricorda che un font leggibile può migliorare l'esperienza utente e quindi anche il tuo ranking SEO. Dai un'occhiata al nostro articolo sull'importanza dell'UX/UI Design per saperne di più!

Font-size CSS: Impostare la Dimensione del Carattere

La proprietà font-size è usata per rendere il testo della dimensione perfetta.

.a-selector {
  font-size: 15rem;
}

Puoi utilizzare sia valori predefiniti come large e small, sia valori specifici:

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
"un valore numerico"

Font-weight CSS: Impostare lo Spessore del Carattere

Vuoi del testo in grassetto che aiuti ad attirare l'attenzione? La proprietà font-weight fa proprio al caso tuo!

.a-selector {
  font-weight: bold;
}

Puoi utilizzare:

bold
lighter
bolder
o valori numerici da 100 a 900

Vuoi approfondire? Visita MDN Web Docs per una guida completa.

Impostare il Colore del Testo con CSS

Per impostare il colore del testo basta utilizzare la proprietà color.

.a-selector {
  color: red;
}

Puoi esprimere i colori in vari modi:

Nome del colore, come red
Notazione esadecimale, come #ff0000
RGB, come rgb(255, 0, 0)
HSL, come hsl(0, 1, 0.5)
HWB, come hwb(0, 0%, 0%)

Font CSS: Conclusioni

Ora che conosci tutte queste proprietà CSS, sei pronto per far brillare la tipografia del tuo sito! La tipografia giusta può davvero migliorare l'esperienza utente e rendere il sito più accattivante.