Tipografia

Se non specifichi stili per il testo, i browser applicheranno i propri stili predefiniti. Si tratta dei cosiddetti stylesheet dell'agente utente e possono variare da un browser all'altro. Gli utenti possono anche impostare le proprie preferenze per la visualizzazione del testo.

Se non specifichi una lunghezza della riga, i browser a capo le righe di testo al bordo dello schermo. Pertanto, il testo sul web è adattabile per impostazione predefinita: si adatta al viewport dell'utente.

Tuttavia, il fatto che il testo entri in uno schermo 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 di caratteri adatti da utilizzare. È necessario tenere conto delle preferenze dell'utente, delle dimensioni del testo, della lunghezza delle righe e della distanza tra le righe di testo.

Dimensione testo

È difficile sapere quali dimensioni deve avere il testo sul web.

Se una persona utilizza uno schermo piccolo, è probabile che lo tenga abbastanza vicino agli occhi, a una distanza di circa 20 cm.

Tuttavia, con l'aumento delle dimensioni degli schermi, è più difficile stabilire questa connessione. Uno schermo delle dimensioni di un laptop sarà probabilmente abbastanza vicino allo spettatore, ma un monitor da computer widescreen ha circa le stesse dimensioni di uno schermo di una televisione. Le persone 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 quanto è distante una persona da uno schermo, puoi provare a utilizzare dimensioni del testo che si spera siano appropriate. Utilizza dimensioni di testo più piccole per schermi più piccoli e dimensioni di 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 una dimensione del testo fissa a un'interruzione specifica in punti di interruzione specifici è piuttosto complessa. Un approccio più adattabile è lasciare che la larghezza del dispositivo dell'utente influenzi le dimensioni del testo.

L'unità vw in CSS indica la "larghezza del viewport". Se colleghi le dimensioni dei caratteri alla larghezza del viewport, il testo aumenterà e diminuirà in proporzione alla larghezza del browser. Ciò rende difficile prevedere le dimensioni del testo per una larghezza specifica, ma sai che saranno appropriate per la larghezza del browser dell'utente.

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

html {
  font-size: 2.5vw;
}

In caso contrario, l'utente non potrà ridimensionare il testo. Il testo potrà essere ridimensionato se aggiungi un'unità di misura relativa, ad esempio em, rem o ch. A questo scopo, la funzione CSS calc() è perfetta.

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

Lascia che sia il browser a fare i calcoli. Questo rende difficile prevedere esattamente quale sarà la dimensione del testo per una larghezza specifica, ma sai che sarà nell'intervallo corretto. Il browser dell'utente si occupa di capire i calcoli esatti delle dimensioni del testo.

Ora però esiste la possibilità che il testo risulti troppo piccolo su schermi stretti e troppo grande su schermi ampi.

Testo con valori massimi e minimi

Probabilmente non vuoi che il testo si rimpicciolisca e si ingrandisca in modo eccessivo. Puoi controllare dove inizia e finisce la scalatura utilizzando la funzione CSS clamp(). Questo "limita" il ridimensionamento a un intervallo specifico.

La funzione clamp() è simile alla funzione calc(), ma assume tre valori. Il valore intermedio è lo stesso che passi a calc(). Il valore di apertura specifica la dimensione minima, in questo caso 1rem, 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 scenderanno mai al di sotto di 1rem o al di sopra di 2rem.

Lunghezza della riga

Il web non è stampa, ma possiamo imparare dal mondo della stampa e applicarle sul web.

Nel suo classico libro The Elements of Typographic Style, Robert Bringhurst ha detto quanto segue sulla lunghezza (o misura) delle righe:

Una lunghezza della riga compresa tra 45 e 75 caratteri è ampiamente considerata soddisfacente per una pagina a una colonna impostata in un carattere con grazie in un formato del testo. La riga di 66 caratteri (contando lettere e spazi) è considerata ideale. Per il funzionamento di più colonne, una media migliore è compresa tra 40 e 50 caratteri.

Non puoi impostare la lunghezza di una riga direttamente in CSS. Nessuna proprietà line-length. Puoi, però, evitare che il testo diventi troppo largo limitando la larghezza del contenitore. La proprietà max-inline-size è perfetta per questo.

Non impostare le lunghezze delle righe con un'unità fissa come px. Gli utenti possono aumentare e diminuire le dimensioni dei caratteri e le lunghezze delle righe devono essere regolate di conseguenza. Utilizza un'unità di misura relativa come rem o ch.

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

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

Se utilizzi unità ch per la larghezza, le nuove righe verranno a capo al 66° carattere con quella dimensione del carattere.

Altezza riga

Anche se non esiste una proprietà line-length in CSS, è disponibile una proprietà line-height.

Le righe di testo più brevi possono avere valori line-height più elevati. Tuttavia, se utilizzi valori line-height elevati per righe di testo lunghe, è difficile per l'occhio del lettore passare 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 scalabilità

Ricorda di dare la priorità alla gerarchia durante la creazione delle interfacce utente per una maggiore chiarezza e un flusso di pagine migliore. Un ottimo modo per farlo è utilizzare una scala di tipografia integrata nel sistema di design.

Caratteri web

Un carattere è come una voce per le tue parole. Per molto tempo sul web erano disponibili pochissime opzioni di caratteri. I caratteri di sistema erano le uniche opzioni disponibili. Ora puoi scegliere un carattere web che rispecchi l'aspetto dei tuoi contenuti.

Utilizza @font-face per indicare ai browser dove trovare i file dei caratteri web. Utilizza woff2 come formato dei caratteri 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 caratteri web che aggiungi potrebbe potenzialmente ridurre l'esperienza utente in quanto aumenta il tempo di caricamento della pagina. Ricorda che il design non riguarda solo l'aspetto finale dei pixel. La velocità con cui vengono visualizzati questi pixel è un aspetto 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 del carattere il prima possibile. Aggiungi un elemento link al head del documento che fa riferimento al file del carattere web. Un attributo rel con valore preload indica al browser di dare la priorità al file. Un attributo as con un valore font indica al browser di che tipo di file si tratta. 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 personalmente 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é il carattere web non viene caricato. Puoi scegliere di visualizzare immediatamente il carattere di sistema e poi passare al carattere web una volta caricato. Entrambe le strategie hanno i loro lati negativi. Se aspetti che il carattere web venga scaricato prima di mostrare del testo, gli utenti potrebbero trovarsi a fissare una pagina vuota per un tempo scoraggiante. 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 breve istante prima di mostrare il testo. Se il carattere web viene caricato prima del termine del periodo di 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 almeno l'utente possa leggere i contenuti.

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

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

Utilizza un valore font-display pari a fallback se vuoi mantenere il carattere di sistema dopo il rendering del testo.

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

Caratteri variabili

Se utilizzi molti spessori o stili diversi dello stesso carattere, potresti dover utilizzare molti file di caratteri separati, uno per ogni spessore o stile.

I caratteri variabili risolvono questo problema utilizzando un solo file. Anziché avere file separati per normali, in grassetto, extra bold e così via, un file di caratteri variabili è adattabile. Contiene tutte le informazioni necessarie per essere visualizzato in una gamma di spessori o stili.

Ciò significa che un singolo file di caratteri con variabile è più grande di un singolo file di caratteri standard, ma un singolo file di caratteri con variabile probabilmente sarà più piccolo di più file di caratteri regolari. Se utilizzi molti spessori diversi, un carattere variabile potrebbe darti un grande vantaggio in termini di prestazioni.

Una buona tipografia sul web non riguarda solo le scelte di tipo che fai come designer. La tipografia adattabile significa anche rispettare il dispositivo e la connessione di rete dell'utente. Il risultato finale è un design che sembra giusto indipendentemente da come viene visualizzato.

Ora che sai come funziona il testo adattabile, è il momento di analizzare le immagini adattabili.

Verificare di aver compreso

Metti alla prova le tue conoscenze sulla tipografia