Font CSS: Tutte le Proprietà per Gestire la Tipografia

Hey, web designer in erba! Oggi troviamo tutte le proprietà CSS che renderanno la tua tipografia una vera rockstar del web. Dai caratteri eleganti e leggibili, alle dimensioni perfette, fino ai colori che catturano l'occhio, sei pronto per esplorare come gestire al meglio la tipografia con CSS?

Font-family CSS: Impostare il Carattere Tipografico

La scelta del font è 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 è il tuo magico bacchettino 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 urli al mondo "Ehi, leggi qui!"? 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

Colorare il testo è come dipingere il tuo mondo web. Usa 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.