Testo e tipografia

Il testo è uno degli elementi fondamentali 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, è probabile che il testo costituisca la maggior parte del tuo sito web, quindi vale la pena aggiungere alcuni stili per migliorarlo. Modificando alcune proprietà di base, puoi migliorare notevolmente l'esperienza di lettura per i tuoi utenti.

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

Successivamente, illustreremo 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.

Verranno forniti esempi pratici e suggerimenti per consolidare la tua comprensione e applicazione di queste tecniche CSS.

Regola @font-face

La regola at @font-face CSS è fondamentale nel web design, in quanto ti consente di specificare e utilizzare caratteri personalizzati per visualizzare il testo. La bellezza di @font-face sta nella sua versatilità: ti 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 ascensione, influenzando lo spazio sopra la base di riferimento.
descent-override
Regola la metrica della discesa, che influisce sullo spazio sotto la linea di base.
font-display
Controlla il comportamento di visualizzazione del carattere in base allo stato del 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 inclinazione per gli stili obliqui.
font-weight
Determina lo spessore o l'intervallo di spessori disponibili del carattere.
font-feature-settings
Consente l'accesso alle funzionalità per i caratteri OpenType.
font-variation-settings
Offre un controllo accurato 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 è 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, tornando a un file di caratteri remoto come opzione di riserva. I browser danno la priorità alle risorse in base all'ordine di dichiarazione, 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 "adatti al web" consentendo loro di utilizzare la tipografia personalizzata. La possibilità 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
Web Open Font Format 2 font/woff2

La differenza tra @font-face e font-family

In CSS, @font-face e font-family vengono spesso confusi, ma hanno scopi diversi.

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

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 web-safe, 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

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

Usa font-family per cambiare il carattere 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 "Helvetica", "EB Garamond" o "Times New Roman". Le famiglie di caratteri generiche sono parole chiave come serif, sans-serif e monospace (consulta l'elenco completo delle opzioni su MDN). Il browser mostrerà il primo carattere 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 disponga dei caratteri che preferisci. In genere, la famiglia di caratteri generica di riserva deve essere simile ai caratteri preferiti: se utilizzi font-family: "Helvetica" (una famiglia di caratteri senza grazie), la famiglia di caratteri di riserva deve essere sans-serif per corrispondere.

Utilizzare caratteri in corsivo e obliqui

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

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

Mettere il testo in grassetto

Supporto dei browser

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

Usa font-weight per impostare l'"audacia" del testo. Questa proprietà accetta valori di parole chiave (normal, bold), valori di parole chiave relative (lighter, bolder) e valori numerici (da 100 a 900).

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

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

Modificare le dimensioni del testo

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

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 assolute (xx-small, x-small, small, medium, large, x-large, xx-large) e un paio di valori di parole chiave relative (smaller, larger). I valori relativi sono relativi a font-size dell'elemento principale.

Modificare lo spazio tra le righe

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

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, è consigliabile utilizzare un numero anziché una lunghezza o una percentuale per evitare problemi di ereditarietà.

Modificare lo spazio tra i caratteri

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

Usa letter-spacing per controllare la quantità di spazio orizzontale tra i caratteri del 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 relativa cassetta e come cambia con letter-spacing.

Modificare lo spazio tra le parole

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

Usa 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 allo spazio extra oltre allo spazio normale. Ciò significa che word-spacing: 0 è equivalente a word-spacing: normal.

font stenografia

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 di MDN per informazioni specifiche su come ordinare queste proprietà.

Modificare le maiuscole/minuscole del testo

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

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

Aggiungere sottolineature, linee superiori e linee passanti al testo

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

Usa text-decoration per aggiungere righe al testo. Le linee sottolineate sono le più utilizzate, ma è possibile aggiungere linee sopra il testo o al suo interno.

La proprietà text-decoration è un'abbreviazione per le 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 di 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 la larghezza del tratto di tutte le decorazioni da text-decoration-line.

La proprietà text-decoration è un'abbreviazione per tutte le proprietà sopra indicate.

Aggiungere un rientro al testo

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

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

Gestire i contenuti nascosti o in eccesso

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Origine

Utilizza text-overflow per specificare la modalità di rappresentazione dei 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.

Controllare gli spazi vuoti

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

La proprietà white-space viene utilizzata per specificare come gestire gli spazi in un elemento. Per ulteriori dettagli, consulta l'articolo white-space su MDN.

white-space: pre può essere utile per il rendering di ASCII art o blocchi di codice con rientri accurati.

Controllare il modo in cui le parole vengono suddivise

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Origine

Utilizza word-break per modificare il modo in cui le parole devono essere "interrotte" quando fuoriescono dalla riga. Per impostazione predefinita, il browser non divide le parole. Se utilizzi il valore della parola chiave break-all per word-break, il browser separerà le parole in base ai singoli caratteri, se necessario.

Modificare l'allineamento del testo

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

Utilizza text-align per specificare l'allineamento orizzontale del testo in un elemento di blocco o di 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 ai lati sinistro e destro del blocco, rispettivamente.

Utilizza start e end per rappresentare la posizione dell'inizio e della fine di una riga di testo nella modalità di scrittura corrente. Pertanto, start corrisponde a left in inglese e a right in arabo, che si scrive da destra verso sinistra (RTL). Si tratta di allineamenti logici. Scopri di più nel nostro modulo sulle 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.

Modificare la direzione del testo

Supporto dei browser

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

Usa direction per impostare la direzione del testo, ltr (da sinistra a destra, predefinita) o rtl (da destra a sinistra). Alcune lingue, come arabo, ebraico o persiano, si scrivono da destra a sinistra, quindi è necessario utilizzare direction: rtl. Per l'inglese e tutte le altre lingue che si scrivono da sinistra a destra, utilizza direction: ltr.

Modificare il flusso del testo

Supporto dei browser

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Origine

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 che venga visualizzato in orizzontale.

Modificare l'orientamento del testo

Supporto dei browser

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Origine

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

Supporto dei browser

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Origine

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 l'importazione di file diversi per le varie versioni del carattere, ad esempio grassetto, corsivo o condensato. I caratteri variabili sono caratteri che possono contenere molte varianti diverse di un carattere in un unico file.

Roboto Flex in combinazioni casuali di Larghezza e Spessore

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

Pseudo-elementi

Pseudo-elementi ::first-letter e ::first-line

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

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

Pseudoelemento ::selection

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Origine

Utilizza l'elemento pseudo ::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, stroke-width.

font-variant

Supporto dei browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Origine

La proprietà font-variant è un'abbreviazione per una serie di proprietà CSS che ti consentono di scegliere varianti di carattere come small-caps e slashed-zero. Le proprietà CSS incluse in questa abbreviazione 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.

Verificare di aver compreso

Verifica le tue conoscenze di tipografia sul web

Quale delle seguenti parole chiave può essere utilizzata come opzione di riserva generica per font-family?

serif
sci-fi
helvetica
italic
monospace
sans-serif

Quale affermazione viene utilizzata per convertire la prima lettera di ogni parola in lettere maiuscole? Ad esempio: This is a sentence.This Is A Sentence.

text-case: capitalize;
text-capitalize: true;
font-style: capitals;
font-variant: capitalize;
text-transform: capitalize;

Vero o falso: utilizza text-orientation per allineare il testo a sinistra, a destra o al centro.

Falso
Vero

Quale proprietà CSS può essere utilizzata per modificare lo spazio tra le righe di testo?

line-height
leading
line-spacing
baseline-distance

Risorse