Testo e tipografia

Podcast di CSS - 036: Text & Typography

Il testo è uno degli elementi costitutivi principali del web.

Quando crei un sito web, non devi necessariamente definire lo stile del testo: il codice HTML in realtà presenta uno stile predefinito piuttosto ragionevole.

Tuttavia, poiché il testo costituirà probabilmente la maggior parte del sito web, vale la pena aggiungere un po' di stile per migliorarlo. Se cambi alcune proprietà di base, puoi migliorare notevolmente l'esperienza di lettura dei tuoi utenti.

In questo modulo, inizieremo con la regola @font-face, che ti consente di importare caratteri personalizzati nelle tue pagine web. In questo modo avrai esattamente la tipografia di cui hai bisogno, indipendentemente dai caratteri installati dall'utente.

Successivamente, tratteremo le proprietà dei caratteri CSS essenziali, tra cui font-family, font-style, font-weight e font-size. Queste nozioni di base gettano le basi per manipolare il testo sia per lo stile che per la leggibilità.

Parleremo anche delle proprietà specifiche dei paragrafi, come text-indent e word-spacing, prima di concludere con argomenti avanzati come caratteri variabili e pseudo-elementi, che perfezionano ulteriormente il controllo tipografico.

Troverai suggerimenti ed esempi pratici per consolidare la tua comprensione e applicazione di queste tecniche CSS.

Regola @font-face

La regola at-rule del @font-face CSS è determinante nel web design, consentendoti di specificare e utilizzare caratteri personalizzati per visualizzare il testo. @font-face sta nella sua versatilità: consente di recuperare i caratteri da un server remoto o da un carattere installato sul dispositivo dell'utente.

Sintassi

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Descrittori

ascent-override

Personalizza la metrica di salita, influenzando lo spazio sopra la base di riferimento.

descent-override

Regola la metrica relativa alla discesa, influenzando lo spazio sotto la base di riferimento.

font-display

Controlla il comportamento di visualizzazione del carattere in base allo stato di download.

font-family

Assegna un nome al carattere da utilizzare all'interno delle relative proprietà.

font-stretch

Imposta una scalabilità orizzontale accettabile, specificata come singolo valore o intervallo.

font-style

Definisce lo stile del carattere, supportando intervalli di angoli per gli stili obliqui.

font-weight

Determina lo spessore del carattere o l'intervallo di ponderazioni disponibili.

font-feature-settings

Consente l'accesso alle funzionalità per i caratteri OpenType.

font-variation-settings

Offre un controllo ottimizzato sulle impostazioni dei caratteri variabili.

line-gap-override

Sostituisce l'intervallo tra le righe predefinito del carattere.

size-adjust

Applica un fattore di scala alla struttura e alle metriche del carattere.

src

Definisce l'origine del carattere, locale o remota. Questo attributo è obbligatorio per la regola @font-face. La combinazione di url() e local() all'interno di src è una strategia comune che utilizza un carattere locale, se disponibile, ripristinando un file di carattere remoto come riserva. I browser danno priorità alle risorse in base all'ordine delle dichiarazioni, quindi local() in genere deve precedere url().

unicode-range

Limita i caratteri per i quali deve essere utilizzato questo carattere.

Descrizione

@font-face libera i designer dai vincoli dei caratteri "sicuri per il web" consentendo loro di utilizzare elementi tipografici personalizzati. La capacità della funzione local() di cercare un carattere sul dispositivo dell'utente offre un'esperienza fluida che non dipende necessariamente da una connessione a internet.

Tipi MIME dei caratteri

Formato	Tipo MIME
TrueType	font/ttf
OpenType	font/otf
Formato carattere Web Open	font/woff
Formato carattere 2 apertura web	font/woff2

La differenza tra @font-face e font-family

In CSS, @font-face e font-family sono spesso confusi, ma servono a scopi distinti.

Come abbiamo visto, @font-face è una regola utilizzata per definire i caratteri personalizzati da utilizzare nella tua applicazione web. Indica al browser dove scaricare il carattere, come visualizzarlo durante il caricamento (con la proprietà font-display) e specifica il sottoinsieme di caratteri da scaricare (con unicode-range).

Al contrario, font-family è una proprietà CSS utilizzata all'interno di una regola CSS per assegnare un determinato carattere o un elenco di caratteri a un elemento. I caratteri elencati in font-family possono essere caratteri sicuri per il web, caratteri di sistema o caratteri personalizzati definiti con @font-face.

Riassumendo, @font-face dichiara un carattere e gli assegna un nome, quindi font-family applica il carattere dichiarato agli elementi HTML.

Ecco un esempio di utilizzo di entrambi:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

In questo esempio, @font-face definisce "CustomFont" e indica al browser dove trovarlo. La proprietà font-family lo applica quindi all'elemento body, con Arial come riserva se"CustomFont" non è disponibile.

Modificare il carattere tipografico

Utilizza font-family per cambiare il carattere tipografico del testo.

La proprietà font-family accetta un elenco di stringhe separate da virgole, che fanno riferimento a famiglie di caratteri specifiche o generiche. Le famiglie di caratteri specifiche sono stringhe tra virgolette, ad esempio "HЧ", "EB Garamond" o "Times New Roman". Le famiglie di caratteri generiche sono parole chiave quali serif, sans-serif e monospace (consulta l'elenco completo delle opzioni su MDN). Il browser mostra il primo carattere tipografico disponibile nell'elenco fornito.

Quando utilizzi font-family, devi specificare almeno una famiglia di caratteri generica nel caso in cui il browser dell'utente non abbia i tuoi caratteri preferiti. In genere, la famiglia di caratteri generici di riserva è simile ai caratteri che preferisci: se utilizzi font-family: "Helvetica" (una famiglia di caratteri Sans- Serif), il valore di riserva dovrebbe essere sans-serif in modo che corrisponda.

Utilizzare caratteri in corsivo e obliquo

Utilizza font-style per indicare se il testo deve essere in corsivo o meno. font-style accetta una delle seguenti parole chiave: normal, italic e oblique.

Applica il grassetto al testo

Utilizza font-weight per impostare il "grassetto" del testo. Questa proprietà accetta i valori delle parole chiave (normal, bold), i valori relativi delle parole chiave (lighter, bolder) e i valori numerici (da 100 a 900).

Le parole chiave normal e bold equivalgono, rispettivamente, ai valori numerici 400 e 700.

Le parole chiave lighter e bolder vengono calcolate in base all'elemento principale. Per un pratico grafico che mostra come viene determinato questo valore, consulta Significato dei pesi relativi di MDN.

Modificare la dimensione del testo

Utilizza font-size per controllare le dimensioni degli elementi di testo. Questa proprietà accetta valori di lunghezza, percentuali e alcuni valori di parole chiave.

Oltre ai valori di lunghezza e percentuale, font-size accetta alcuni valori di parole chiave assoluti (xx-small, x-small, small, medium, large, x-large, xx-large) e un paio di valori di parole chiave relativi (smaller, larger). I valori relativi si riferiscono al valore font-size dell'elemento principale.

Modificare lo spazio tra le righe

Utilizza line-height per specificare l'altezza di ogni riga in un elemento. Questa proprietà accetta un numero, una lunghezza, una percentuale o la parola chiave normal. In genere, si consiglia di utilizzare un numero anziché una lunghezza o una percentuale per evitare problemi con l'ereditarietà.

Modificare lo spazio tra i caratteri

Utilizza letter-spacing per controllare la quantità di spazio orizzontale tra i caratteri nel testo. Questa proprietà accetta valori di lunghezza come em, px e rem.

Tieni presente che il valore specificato aumenta la quantità di spazio naturale tra i caratteri. Nella demo seguente, prova a selezionare una singola lettera per vedere le dimensioni della sua letterbox e come cambia con letter-spacing.

Modificare lo spazio tra le parole

Utilizza word-spacing per aumentare o diminuire la lunghezza dello spazio tra ogni parola del testo. Questa proprietà accetta valori di lunghezza come em, px e rem. Tieni presente che la lunghezza specificata si riferisce a uno spazio extra oltre alla normale spaziatura. Ciò significa che word-spacing: 0 equivale a word-spacing: normal.

font in forma breve

Puoi utilizzare la proprietà abbreviata font per impostare contemporaneamente molte proprietà relative ai caratteri. L'elenco delle possibili proprietà è font-family, font-size, font-stretch, font-style, font-variant, font-weight e line-height.

Consulta l'articolo font dell'MDN per le specifiche su come ordinare queste proprietà.

Cambia il formato del testo

Utilizza text-transform per modificare le lettere maiuscole del testo senza dover cambiare il codice HTML sottostante. Questa proprietà accetta i seguenti valori di parole chiave: uppercase, lowercase e capitalize.

Aggiungere sottolineature, sottolineature e passanti al testo

Utilizza text-decoration per aggiungere righe al testo. I trattini sono più comunemente utilizzati, ma è possibile aggiungere righe sopra il testo o direttamente attraverso il testo.

La proprietà text-decoration è un breve elenco delle proprietà più specifiche descritte di seguito.

La proprietà text-decoration-line accetta le parole chiave underline, overline e line-through. Puoi anche specificare più parole chiave per più righe.

La proprietà text-decoration-color imposta il colore di tutte le decorazioni da text-decoration-line.

La proprietà text-decoration-style accetta le parole chiave solid, double, dotted, dashed e wavy.

La proprietà text-decoration-thickness accetta qualsiasi valore di lunghezza e imposta lo spessore del tratto di tutte le decorazioni da text-decoration-line.

La proprietà text-decoration è un'abbreviazione di tutte le proprietà menzionate sopra.

Aggiungere un rientro al testo

Utilizza text-indent per aggiungere un rientro ai blocchi di testo. Questa proprietà può avere una lunghezza (ad esempio, 10px, 2em) o una percentuale della larghezza del blocco contenitore.

Gestire contenuti stravaganti o nascosti

Utilizza text-overflow per specificare come vengono rappresentati i contenuti nascosti. Sono disponibili due opzioni: clip (impostazione predefinita), che tronca il testo in corrispondenza dell'overflow; e ellipsis, che visualizza i puntini di sospensione (...) in corrispondenza dell'overflow.

Controlla lo spazio vuoto

La proprietà white-space viene utilizzata per specificare come deve essere gestito lo spazio vuoto in un elemento. Per ulteriori dettagli, consulta l'articolo di white-space su MDN.

white-space: pre può essere utile per il rendering di arte ASCII o di blocchi di codice con rientranza accurata.

Controlla le interruzioni delle parole

Utilizza word-break per modificare il modo in cui le parole devono "interrompere" quando superano la riga. Per impostazione predefinita, il browser non divide le parole. L'utilizzo del valore della parola chiave break-all per word-break indicherà al browser di interrompere le parole in singoli caratteri, se necessario.

Modificare l'allineamento del testo

Utilizza text-align per specificare l'allineamento orizzontale del testo in un elemento blocco o cella di tabella. Questa proprietà accetta i valori delle parole chiave left, right, start, end, center, justify e match-parent.

I valori left e right allineano il testo rispettivamente a sinistra e a destra del blocco.

Utilizza start e end per rappresentare il punto di inizio e di fine di una riga di testo nell'attuale modalità di scrittura. Di conseguenza, start viene mappato a left in inglese e a right in scrittura araba, che è scritta da destra a sinistra (RTL). Si tratta di allineamenti logici. Per saperne di più, consulta il modulo Proprietà logiche.

Usa center per allineare il testo al centro del blocco.

Il valore justify organizza il testo e modifica automaticamente la spaziatura tra le parole in modo che il testo sia allineato ai bordi sinistro e destro del blocco.

Cambiare la direzione del testo

Utilizza direction per impostare la direzione del testo, ltr (da sinistra a destra, impostazione predefinita) o rtl (da destra a sinistra). Alcune lingue, come l'arabo, l'ebraico o il persiano, sono scritte da destra a sinistra, quindi è necessario usare direction: rtl. Per l'inglese e tutte le altre lingue da sinistra a destra, utilizza direction: ltr.

Modificare il flusso del testo

Utilizza writing-mode per modificare il modo in cui il testo scorre e viene organizzato. Il valore predefinito è horizontal-tb, ma puoi anche impostare writing-mode su vertical-lr o vertical-rl per il testo che vuoi far scorrere orizzontalmente.

Modificare l'orientamento del testo

Utilizza text-orientation per specificare l'orientamento dei caratteri nel testo. I valori validi per questa proprietà sono mixed e upright. Questa proprietà è pertinente solo quando writing-mode è impostato su un valore diverso da horizontal-tb.

Aggiungere un'ombra al testo

Usa text-shadow per aggiungere un'ombra al testo. Questa proprietà prevede tre lunghezze (x-offset, y-offset e blur-radius) e un colore.

Consulta la sezione text-shadow del nostro modulo sulle ombre per scoprire di più.

Caratteri variabili

In genere, i caratteri "normali" richiedono di importare file diversi per le diverse versioni dei caratteri tipografici, ad esempio grassetto, corsivo o ridotto. I caratteri variabili sono caratteri che in un unico file possono contenere molte varianti diverse di un carattere tipografico.

Per ulteriori dettagli, consulta il nostro articolo sui caratteri variabili.

Pseudoelementi

Pseudoelementi ::first-letter e ::first-line

Gli pseudo elementi ::first-letter e ::first-line hanno come target rispettivamente la prima lettera e la prima riga di un elemento di testo.

Pseudo-elemento ::selection

Utilizza lo pseudoelemento ::selection per modificare l'aspetto del testo selezionato dall'utente.

Quando utilizzi questo pseudo-elemento, è possibile utilizzare solo alcune proprietà CSS: color, background-color, text-decoration, text-shadow, stroke-color, fill-color e stroke-width.

font-variant

La proprietà font-variant è un'abbreviazione di diverse proprietà CSS che ti consente di scegliere varianti del carattere come small-caps e slashed-zero. Le proprietà CSS incluse in questa forma abbreviata sono font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures e font-variant-numeric. Controlla i link su ciascuna proprietà per maggiori dettagli sul relativo utilizzo.

Verifica le tue conoscenze

Verifica le tue conoscenze di tipografia sul web

Risorse

• Le best practice per i caratteri illustrano l'importazione e il rendering dei caratteri e altre best practice per l'utilizzo dei caratteri sul web.
• Testo di base MDN e stili dei caratteri.