Tipografia

Se non specifichi stili per il testo, i browser applicheranno i propri stili predefiniti. Questi sono chiamati fogli di stile User Agent e possono variare da browser a browser. Gli utenti possono anche impostare le proprie preferenze per la visualizzazione del testo.

Se non specifichi una lunghezza della riga, i browser andranno a capo alla fine della riga di testo. Pertanto, il testo sul web è adattabile per impostazione predefinita: si adatta all'area visibile dell'utente.

Tuttavia, il fatto che il testo entri in una schermata non significa che sia comodo da leggere. Una buona tipografia consiste nel presentare il testo in modo appropriato. La tipografia non si limita alla scelta dei caratteri adatti. Devi considerare le preferenze dell'utente, le dimensioni del testo, la lunghezza della riga e la distanza tra le righe di testo.

Dimensione testo

È difficile sapere quale dimensione del testo dovrebbe essere sul web.

Se qualcuno utilizza uno schermo piccolo, è probabile che lo schermo sia abbastanza vicino agli occhi, a una distanza di una mano.

Ma man mano che gli schermi diventano sempre più grandi, è più difficile stabilire questa connessione. Uno schermo delle dimensioni di un laptop sarà probabilmente abbastanza vicino allo spettatore, ma un monitor desktop widescreen ha circa le stesse dimensioni di uno schermo televisivo. Le persone si siedono a una distanza di un braccio dallo schermo di un computer, ma molto più lontano da una televisione.

Tuttavia, anche se non puoi sapere con certezza a quale distanza si trova una persona da uno schermo, puoi provare a utilizzare dimensioni del testo che si rivelino appropriate. Utilizza dimensioni del testo più piccole per schermi più piccoli e dimensioni del testo più grandi per schermi più grandi.

Puoi utilizzare le media query per modificare la proprietà font-size man mano che le dimensioni dello schermo aumentano.

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

Ridimensionamento del testo

Il passaggio da dimensioni del testo fisse a punti di interruzione specifici è piuttosto brusco. Un approccio più reattivo consiste nel lasciare che la larghezza del dispositivo dell'utente influenzi le dimensioni del testo.

L'unità vw in CSS sta per "larghezza dell'area visibile". Il collegamento delle dimensioni dei caratteri alla larghezza dell'area visibile fa sì che il testo aumenti e diminuisca in proporzione alla larghezza del browser. In questo modo è difficile prevedere le dimensioni del testo a una larghezza specifica, ma sai che le dimensioni del testo saranno appropriate per la larghezza del browser dell'utente.

È importante non utilizzare solo vw in una dichiarazione di dimensione del carattere.

html {
  font-size: 2.5vw;
}

In questo caso, l'utente non potrà ridimensionare il testo. Il testo sarà ridimensionabile se includi un'unità relativa, ad esempio em, rem o ch. La funzione CSS calc() è perfetta per questo.

html {
  font-size: calc(0.75rem + 1.5vw);
}

Lascia che sia il browser a fare i calcoli. In questo modo è difficile prevedere con esattezza la dimensione del testo a una larghezza specifica, ma sai che la dimensione del testo rientrerà nell'intervallo corretto. Il browser dell'utente si occupa di calcolare le dimensioni esatte del testo.

Ora, però, è possibile che il testo diventi troppo piccolo sugli schermi stretti e troppo grande su quelli larghi.

Troncamento del testo

Probabilmente non vuoi che il testo si restringa e si ingrandisca in modo eccessivo. Puoi controllare dove inizia e termina il ridimensionamento utilizzando la funzione CSS clamp(). In questo modo, la scalabilità viene "bloccata" a un intervallo specifico.

La funzione clamp() è simile alla funzione calc(), ma accetta tre valori. Il valore centrale è lo stesso di quello che passi a calc(). Il valore di apertura specifica la dimensione minima, in questo caso 1 rem, in modo da non scendere al di sotto della dimensione del carattere preferita dall'utente. Il valore di chiusura specifica la dimensione massima.

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

Ora le dimensioni del testo si riducono e aumentano in proporzione allo schermo dell'utente, ma non saranno mai inferiori a 1rem o superiori a 2rem.

Lunghezza della linea

Il web non è la stampa, ma possiamo imparare dal mondo della stampa e applicare le lezioni apprese sul web.

Nel suo classico libro The Elements of Typographic Style, Robert Bringhurst ha scritto quanto segue sulla lunghezza della riga (o misura):

Una lunghezza della riga compresa tra 45 e 75 caratteri è ampiamente considerata soddisfacente per una pagina a una sola colonna con un carattere serif e una dimensione del testo. La riga di 66 caratteri (conteggiando sia le lettere che gli spazi) è ampiamente considerata ideale. Per i lavori con più colonne, una media migliore è compresa tra 40 e 50 caratteri.

Non puoi impostare una lunghezza della riga direttamente in CSS. Non esiste la proprietà line-length. Tuttavia, puoi impedire che il testo diventi troppo largo limitando la larghezza del contenitore. La proprietà max-inline-size è perfetta per questo.

Non impostare la lunghezza delle righe con un'unità fissa come px. Gli utenti possono aumentare e diminuire le dimensioni dei caratteri e la lunghezza delle righe deve essere regolata di conseguenza. Utilizza un'unità relativa come rem o ch.

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

L'utilizzo di unità ch per la larghezza farà sì che le nuove righe vengano mandate a capo al 66° carattere con quelle dimensioni del carattere.

Altezza riga

Sebbene non esista una proprietà line-length in CSS, esiste una proprietà line-height.

Le righe di testo più brevi possono avere valori di line-height più grandi. Tuttavia, se utilizzi valori line-height elevati per lunghe righe di testo, è difficile per l'occhio del lettore spostarsi dalla fine di una riga all'inizio della riga successiva.

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

Utilizza valori senza unità per le dichiarazioni line-height. In questo modo, l'altezza della riga è relativa a font-size.

line-height: 24px;

line-height: 1.5;

Combinazioni e scala

Ricorda di dare la priorità alla gerarchia quando crei le interfacce utente per una maggiore chiarezza e un migliore flusso delle pagine. Un ottimo modo per farlo è utilizzare una scala tipografica integrata nel sistema di progettazione.

Caratteri web

Un carattere è come una voce per le tue parole. Per molto tempo sul web c'erano pochissime opzioni di carattere. I caratteri di sistema erano le uniche opzioni. Ora puoi scegliere un carattere web che si adatti allo stile dei tuoi contenuti.

Utilizza @font-face per indicare ai browser dove trovare i file dei caratteri web. Utilizza woff2 come formato del carattere web. È ben supportato e offre i migliori miglioramenti delle prestazioni.

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

Tuttavia, ogni file di font web che aggiungi potrebbe potenzialmente peggiorare l'esperienza utente, in quanto aumenta il tempo di caricamento della pagina. Ricorda che il design non riguarda solo l'aspetto dei pixel finali. La velocità con cui vengono visualizzati i pixel è una parte fondamentale dell'esperienza utente. Un'esperienza che sembra veloce è un'esperienza utente positiva.

Caricamento dei caratteri

Puoi richiedere ai browser di iniziare a scaricare un file di caratteri il prima possibile. Aggiungi un elemento link all'head del documento che fa riferimento al file del carattere web. Un attributo rel con un valore di preload indica al browser di dare la priorità a quel file. Un attributo as con un valore di font indica al browser il tipo di file. L'attributo type ti consente di essere ancora più specifico.

<link href="/fonts/roboto-regular.woff2" type="font/woff2"
  rel="preload" as="font" crossorigin>

Devi includere l'attributo crossorigin anche se ospiti tu stesso i file dei caratteri.

Utilizza la proprietà CSS font-display per indicare al browser come gestire il passaggio da un carattere di sistema a un carattere web. Puoi scegliere di non mostrare alcun testo finché non viene caricato il carattere web. Puoi scegliere di visualizzare immediatamente il carattere di sistema e poi passare al carattere web una volta caricato. Entrambe le strategie presentano degli svantaggi. Se aspetti che il carattere web venga scaricato prima di mostrare qualsiasi testo, gli utenti potrebbero ritrovarsi a fissare una pagina vuota per un periodo di tempo frustrantemente lungo. Se mostri prima il testo in un carattere di sistema e poi passi al carattere web, gli utenti potrebbero notare uno spostamento brusco dei contenuti nella pagina.

Un buon compromesso è attendere un po' prima di visualizzare il testo. Se il carattere web viene caricato prima della scadenza del tempo, il testo viene visualizzato utilizzando il carattere web senza spostamenti dei contenuti. Se il carattere web non è ancora stato caricato al termine del tempo, il testo viene visualizzato utilizzando il carattere di sistema, in modo che l'utente possa almeno leggere i contenuti.

Utilizza un valore font-display di swap se vuoi comunque che il carattere web sostituisca il carattere di sistema quando viene caricato.

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

Utilizza un valore font-display di fallback se vuoi mantenere il carattere di sistema una volta eseguito il rendering del testo.

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

Caratteri variabili

Se utilizzi molti pesi o stili diversi dello stesso carattere, potresti finire per utilizzare molti file di caratteri separati, uno per ogni peso o stile.

I caratteri variabili risolvono questo problema utilizzando un solo file. Anziché avere file separati per le varianti normale, grassetto, grassetto extra e altre, un file di caratteri variabili è reattivo. Contiene tutte le informazioni necessarie per essere visualizzato in una gamma di pesi o stili.

Ciò significa che un singolo file di caratteri variabili è più grande di un singolo file di caratteri normale, ma un singolo file di caratteri variabili sarà probabilmente più piccolo di più file di caratteri normali. Se utilizzi molti pesi diversi, un carattere variabile potrebbe migliorare notevolmente il rendimento.

Una buona tipografia sul web non riguarda solo le scelte di caratteri che fai come designer. La tipografia adattabile riguarda anche il rispetto del dispositivo e della connessione di rete dell'utente. Il risultato finale è un design che appare perfetto indipendentemente da come viene visualizzato.

Ora che hai imparato a utilizzare il testo adattabile, è il momento di scoprire le immagini adattabili.

Mettiti alla prova

Metti alla prova le tue conoscenze sulla tipografia