La tipografia è controllata da una famiglia di proprietà font-* e text-*. Impostarle correttamente è ciò che rende una pagina elegante e leggibile.
css
{
: , system-ui, sans-serif;
: ;
: ;
: italic;
: ;
: ;
}
La tipografia è controllata da una famiglia di proprietà font-* e text-*. Impostarle correttamente è ciò che rende una pagina elegante e leggibile.
{
: , system-ui, sans-serif;
: ;
: ;
: italic;
: ;
: ;
}
font-family: "Inter", system-ui, -apple-system, sans-serif;
Il browser prova ogni carattere in ordine fino a trovarne uno disponibile. Termina sempre con una famiglia generica (sans-serif, serif, monospace) in modo che il testo venga renderizzato anche se i caratteri personalizzati non caricano. system-ui utilizza il carattere nativo del sistema operativo (veloce, nessun download).
.text {
text-align: center; /* left | right | center | justify */
text-decoration: underline;/* underline | line-through | none */
text-transform: uppercase; /* UPPERCASE | lowercase | Capitalize */
white-space: nowrap; /* prevent wrapping */
word-break: break-word; /* break long words/URLs */
}
line-height: 1.5; /* ✅ 1.5 × the element's font-size — scales correctly */
line-height: 24px; /* ⚠️ fixed — doesn't adapt if font-size changes */
Un line-height senza unità moltiplica la font-size di ogni elemento, in modo che rimanga proporzionale quando gli elementi nidificati hanno dimensioni diverse — l'approccio consigliato.
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* shows "..." when text is cut off */
}
Le proprietà del testo guidano la leggibilità e la gerarchia visiva — font-size/weight per enfasi, line-height (~1.5) per una lettura confortevole, fallback stacks per affidabilità e text-overflow per un troncamento pulito.
La buona tipografia è la maggior parte dell'interfaccia utente di bell'aspetto.