Testo e tipografia

The CSS Podcast - 036: Text & Typography

Il testo è uno degli elementi fondamentali del web.

Quando crei un sito web, non devi necessariamente applicare uno stile al testo. L'HTML ha uno stile predefinito piuttosto ragionevole.

Tuttavia, il testo costituirà probabilmente la maggior parte del tuo sito web, quindi vale la pena aggiungere un po' di stile per renderlo più accattivante. 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 ti consente di importare caratteri personalizzati nelle tue pagine web. In questo modo hai la certezza di avere la tipografia esatta di cui hai bisogno, indipendentemente dai caratteri installati dall'utente.

Successivamente, esamineremo le proprietà dei caratteri CSS essenziali, tra cui font-family, font-style, font-weight e font-size. Queste nozioni di base preparano il terreno per la manipolazione del testo in termini di stile e leggibilità.

Tratteremo anche le proprietà specifiche del paragrafo, come text-indent e word-spacing, prima di concludere con argomenti avanzati come i caratteri variabili e gli pseudo-elementi, che perfezionano ulteriormente il controllo tipografico.

Nel corso del corso verranno forniti esempi pratici e suggerimenti per consolidare la tua comprensione e applicazione di queste tecniche CSS.

La regola @font-face

La regola CSS @font-face è fondamentale nella progettazione web, in quanto 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 salita, influendo sullo spazio sopra la linea di base.
descent-override
Regola la metrica della discesa, influendo sullo spazio sotto la linea di base.
font-display
Controlla il comportamento di visualizzazione del carattere in base al suo stato di download.
font-family
Assegna un nome al carattere da utilizzare all'interno delle proprietà correlate ai caratteri.
font-stretch
Imposta lo scaling orizzontale accettabile, specificato 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 spessori disponibili.
font-feature-settings
Consente l'accesso alle funzionalità dei caratteri OpenType.
font-variation-settings
Fornisce un controllo ottimizzato sulle impostazioni dei caratteri variabili.
line-gap-override
Esegue l'override dell'interlinea predefinita del carattere.
size-adjust
Applica un fattore di scalabilità al contorno e alle metriche del carattere.
src
Definisce l'origine del carattere, locale o remota. Questo è necessario 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, per poi ripristinare un file di caratteri remoto come fallback. I browser danno la priorità alle risorse in base all'ordine di dichiarazione, pertanto local() in genere deve precedere url().
unicode-range
Limita i caratteri per cui deve essere utilizzato questo carattere.

Descrizione

@font-face libera i designer dai vincoli dei caratteri "sicuri per il web" consentendo loro di utilizzare tipografie personalizzate. 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
Web Open Font Format 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 distinti.

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 unicode-range).

Al contrario, font-family è una proprietà CSS utilizzata all'interno di una regola CSS per assegnare un carattere specifico 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.

In sintesi, @font-face dichiara un carattere e gli assegna un nome, mentre font-family applica questo 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 fallback se"CustomFont" non è disponibile.

Modificare il carattere tipografico

Browser Support

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

Source

Utilizza font-family per modificare 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 (trovi l'elenco completo delle opzioni su MDN). Il browser visualizzerà il primo carattere disponibile dell'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 che preferisci: se utilizzi font-family: "Helvetica" (una famiglia di caratteri sans-serif), la riserva deve essere sans-serif.

Utilizzare caratteri in corsivo e obliqui

Browser Support

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

Source

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

Browser Support

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

Source

Utilizza font-weight per impostare lo spessore del testo. Questa proprietà accetta valori di parole chiave (normal, bold), valori di parole chiave relativi (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 relazione 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

Browser Support

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

Source

Utilizza font-size per controllare le dimensioni degli elementi di testo. Questa proprietà accetta valori di lunghezza, percentuali e una serie di 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 padre.

Modificare lo spazio tra le righe

Browser Support

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

Source

Utilizza line-height per specificare l'altezza di ogni riga di 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

Browser Support

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

Source

Utilizza 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 seguente demo, prova a selezionare una singola lettera per vedere le dimensioni della sua letterbox e come cambiano con letter-spacing.

Modificare lo spazio tra le parole

Browser Support

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

Source

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

font shorthand

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

Consulta questo articolo di MDN per informazioni specifiche su come ordinare queste proprietà.font

## Modificare le maiuscole/minuscole del testo

Browser Support

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

Source

Utilizza [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) per modificare la capitalizzazione del testo senza dover modificare il codice HTML sottostante. Questa proprietà accetta i seguenti valori delle parole chiave: `uppercase`, `lowercase` e `capitalize`.

Aggiungere sottolineature, sopralinee e linee orizzontali al testo

Browser Support

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

Source

Utilizza text-decoration per aggiungere righe al testo. Il sottolineato è il formato più comune, ma è possibile aggiungere linee sopra o attraverso il testo.

La proprietà text-decoration è l'abbreviazione 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 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 valori di qualsiasi lunghezza e imposta la larghezza del tratto di tutte le decorazioni da text-decoration-line.

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

Aggiungere un rientro al testo

Browser Support

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

Source

Utilizza 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 contenitore.

Gestire contenuti nascosti o che non rientrano nello spazio disponibile

Browser Support

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

Source

Utilizza text-overflow per specificare come vengono rappresentati i contenuti nascosti. Sono disponibili due opzioni: clip (impostazione predefinita), che tronca il testo nel punto di overflow, e ellipsis, che mostra i puntini di sospensione (…) nel punto di overflow.

Controllo degli spazi vuoti

Browser Support

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

Source

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

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

Controllare la suddivisione delle parole

Browser Support

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

Source

Utilizza word-break per modificare il modo in cui le parole devono essere "interrotte" 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 indica al browser di interrompere le parole in singoli caratteri, se necessario.

Modificare l'allineamento del testo

Browser Support

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

Source

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 ai lati sinistro e destro del blocco.

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 viene scritto da destra a sinistra (RTL). Si tratta di allineamenti logici. Scopri di più nel nostro modulo Proprietà logiche.

Utilizza center per allineare il testo al centro del blocco.

Il valore di 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.

Controllare il modo in cui il testo va a capo

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

Utilizza text-wrap per modificare il modo in cui viene eseguito il wrapping del testo all'interno di un elemento.

Le parole chiave accettate per questa proprietà includono wrap, nowrap, balance e stable. Il valore predefinito è wrap, che riduce al minimo l'overflow disponendo il testo su più righe in base agli spazi e alle interruzioni di parola.

Puoi utilizzare la parola chiave nowrap per ottenere l'esatto contrario e impedire che il testo venga interrotto su più righe, il che può causare overflow.

Per ottenere la stessa quantità di testo su ogni riga quando, ad esempio, scrivi titoli o intestazioni, utilizza la parola chiave balance. Per migliorare le prestazioni, i browser applicheranno questo valore solo agli elementi con sei righe di testo o meno.

La parola chiave stable ha un rendimento simile a wrap, ma è pensata per essere utilizzata con testo contenteditable. Con text-wrap: stable impostato, le righe sopra i contenuti in fase di modifica non cambieranno posizione durante la procedura.

A volte, le stringhe lunghe senza un punto di interruzione chiaro possono causare l'overflow dei contenitori. Per controllare il modo in cui questo tipo di interruzione di testo viene interrotto, utilizza overflow-wrap.

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

Le parole chiave che puoi utilizzare per questa proprietà sono normal, break-word e anywhere. L'impostazione predefinita è normal e non interrompe il testo per portarlo alla riga successiva, a meno che non includa spazi o interruzioni naturali.

I valori anywhere e break-word aggiungono punti di interruzione in qualsiasi punto della stringa per evitare l'overflow. Le parole chiave differiscono nel modo in cui rispondono a una dimensione intrinseca o esplicita min-content. La parola chiave anywhere consente tutte le opportunità di interruzione soft possibili. Il valore break-word non lo fa e renderebbe il testo lungo quanto la parola più lunga.

Modificare la direzione del testo

Browser Support

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

Source

Utilizza direction per impostare la direzione del testo, ovvero ltr (da sinistra a destra, l'impostazione predefinita) o rtl (da destra a sinistra). Alcune lingue, come l'arabo, l'ebraico o il persiano, vengono scritte 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

Browser Support

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

Source

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

Modificare l'orientamento del testo

Browser Support

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

Source

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'ombreggiatura al testo

Browser Support

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

Source

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

Per saperne di più, consulta la sezione text-shadowdel nostro modulo sulle ombre.

Caratteri variabili

In genere, i caratteri "normali" richiedono l'importazione di file diversi per le diverse versioni del carattere tipografico, come grassetto, corsivo o compresso. I caratteri variabili sono caratteri che possono contenere molte varianti diverse di un tipo di carattere in un unico file.

Roboto Flex in combinazioni casuali di larghezza e peso

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

Pseudo-elementi

::first-letter e ::first-line pseudo-elementi

Browser Support

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

Source

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

::selection pseudo-elemento

Browser Support

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

Source

Utilizza lo pseudo-elemento ::selection per modificare l'aspetto del testo selezionato dall'utente.

Quando utilizzi questo pseudo-elemento, puoi utilizzare solo determinate proprietà CSS: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.

font-variant

Browser Support

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

Source

La proprietà font-variant è una notazione abbreviata 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 proprietà abbreviata sono font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures e font-variant-numeric. Consulta i link di ogni proprietà per ulteriori dettagli sul suo utilizzo.

Verifica la tua comprensione

Metti alla prova le tue conoscenze di tipografia sul web

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

helvetica
serif
italic
monospace
sans-serif
sci-fi

Quale istruzione viene utilizzata per convertire la prima lettera di ogni parola in maiuscolo? Ad es. This is a sentence.This Is A Sentence.

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

Vero o falso: usa 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-spacing
leading
line-height
baseline-distance

Risorse