Tipografia

Se non specifichi nessuno stile per il testo, i browser applicheranno i propri stili predefiniti. Questi sono chiamati fogli di stile user agent e possono variare in base al browser. Anche gli utenti possono impostare le proprie preferenze per la visualizzazione del testo.

Se non specifichi una lunghezza di riga, i browser avvolgono le righe di testo sul bordo dello schermo. Pertanto, il testo sul web è reattivo per impostazione predefinita e fluisce per adattarsi all'area visibile dell'utente.

Tuttavia, il fatto che il testo rientri in uno schermo non significa che sia comodo da leggere. Una corretta tipografia consiste nel presentare il testo in modo appropriato. Per la tipografia c'è molto di più che scegliere caratteri adatti. È 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 devono essere le dimensioni del testo sul web.

Se qualcuno utilizza uno schermo piccolo, potrebbe essere una buona idea che lo schermo sia abbastanza vicino agli occhi, a una mano.

Ma man mano che gli schermi diventano più grandi, diventa sempre più difficile stabilire un collegamento. Probabilmente, lo schermo di un laptop sarà abbastanza vicino allo spettatore, ma il monitor di un computer widescreen ha più o meno le stesse dimensioni di uno schermo di un televisore. Le persone si trovano a un braccio di distanza dallo schermo di un computer, ma molto più lontane dal televisore.

Tuttavia, anche se non puoi sapere con certezza quanto dista una persona da uno schermo, puoi provare a utilizzare dimensioni del testo che, se tutto va bene, si riveleranno appropriate. Usa testi di dimensioni inferiori per gli schermi più piccoli e più grandi per gli schermi più grandi.

Puoi utilizzare query supporti 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ù reattivo consiste nel lasciare che la larghezza del dispositivo dell'utente influenzi la dimensione del testo.

L'unità vw in CSS è l'acronimo di "viewport width". Collega le dimensioni dei caratteri la larghezza dell'area visibile indica che il testo si aumenterà e si ridurrà in proporzione alla larghezza del browser. In questo modo è difficile prevedere quale sarà la dimensione del testo a una determinata larghezza, ma sai che la dimensione del testo sarà appropriata per la larghezza del browser dell'utente.

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

html {
  font-size: 2.5vw;
}

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

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

Lascia che sia il browser a fare i calcoli. In questo modo è difficile prevedere esattamente quale sarà la dimensione del testo a una determinata larghezza, ma sai che le dimensioni del testo saranno nell'intervallo giusto. Il browser dell'utente si occupa di capire i calcoli esatti delle dimensioni del testo.

Ma ora è possibile che il testo diventi troppo piccolo sugli schermi stretti e troppo grande sugli schermi larghi.

Testo di blocco

Probabilmente non vuoi che il tuo testo si restringa o superi gli estremi. Puoi controllare il punto di inizio e di fine della scalabilità 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 medio è uguale a quello che passi a calc(). Il valore di apertura specifica la dimensione minima, in questo caso 1rem per non andare 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 linea

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

Nel suo libro classico The Elements of Typographic Style, Robert Bringhurst aveva questo da dire sulla lunghezza della riga (o misurare):

Qualsiasi testo compreso tra 45 e 75 è ampiamente considerato come una lunghezza di riga soddisfacente per un set di pagine a colonna singola in una faccia di testo con grazie in una dimensione del testo. La riga di 66 caratteri (che conta sia le lettere che gli spazi) è ampiamente considerata ideale. Per il funzionamento di più colonne, una media migliore è compresa tra 40 e 50 caratteri.

Non puoi impostare una lunghezza della 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 scopo.

Non impostare le lunghezze delle righe con un'unità fissa come px. Gli utenti possono ingrandire e rimpicciolire le dimensioni dei caratteri e la lunghezza delle righe dovrà essere regolata di conseguenza. Utilizza un'unità relativa, ad esempio rem o ch.

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

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

Se utilizzi ch unità per la larghezza, le nuove righe andranno a capo al 66° carattere della dimensione di quel carattere.

Altezza riga

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

Righe di testo più brevi possono avere valori line-height più grandi. Tuttavia, se utilizzi valori line-height di grandi dimensioni per lunghe righe di testo, l'occhio del lettore ha difficoltà a 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. Ciò garantisce che l'altezza della riga sia relativa al valore font-size.

line-height: 24px;

line-height: 1.5;

Combinazioni e scala

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

Caratteri web

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

Usa @font-face per indicare ai browser dove trovare i file dei caratteri web. Utilizza woff2 come formato del carattere web. È ben supportata e garantisce i migliori risultati in termini di 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 questi pixel vengono colorati è un aspetto fondamentale dell'esperienza utente. Un'esperienza veloce è un'esperienza utente positiva.

Caricamento del carattere in corso...

Puoi richiedere ai browser di iniziare a scaricare un file dei caratteri il prima possibile. Aggiungi un elemento link alla 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 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 i file dei caratteri sono ospitati personalmente.

Utilizza la proprietà CSS font-display per indicare al browser come gestire il passaggio da un carattere di sistema a un carattere web. Puoi decidere di non mostrare del testo fino a quando 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 svantaggi. Se aspetti il download del carattere web prima di visualizzare del testo, gli utenti potrebbero trovarsi a guardare una pagina vuota per un periodo di tempo frustrante. Se mostri prima il testo in un carattere di sistema e poi passi al carattere web, gli utenti potrebbero riscontrare uno sgradevole spostamento dei contenuti nella pagina.

Un buon compromesso è attendere un po' di tempo prima di visualizzare qualsiasi testo. Se il carattere web viene caricato prima dello scadere di questo periodo, il testo viene visualizzato utilizzando il carattere web senza modifiche dei contenuti. Se il carattere web non è ancora stato caricato una volta trascorso il tempo, il testo viene visualizzato utilizzando il carattere di sistema in modo che almeno l'utente possa leggerne i contenuti.

Utilizza un valore font-display pari a swap se vuoi comunque che il carattere web sostituisca quello di sistema al momento del caricamento finale del carattere web.

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

Utilizza un valore font-display pari a fallback se vuoi rimanere con 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 per lo stesso carattere tipografico, potresti dover utilizzare molti file di caratteri separati, un file di caratteri separato per ogni spessore o stile.

I caratteri variabili risolvono questo problema utilizzando un solo file. Invece di avere file separati per i formati standard, grassetto, extra grassetto e così via, un file con caratteri variabili è reattivo. Contiene tutte le informazioni necessarie per poter essere visualizzate in un'ampia gamma di pesi 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 molte ponderazioni diverse, un carattere variabile potrebbe incrementare notevolmente il rendimento.

Una buona tipografia sul Web non riguarda solo le scelte di tipografia 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 accattivante, indipendentemente da come viene visualizzato.

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

Verifica le tue conoscenze

Metti alla prova le tue conoscenze sulla tipografia