Se non specifichi nessuno stile per il testo, i browser applicheranno i propri stili predefiniti. Questi sono chiamati fogli di stile dello 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 integreranno le righe di testo sul bordo dello schermo. Pertanto, il testo sul web è reattivo per impostazione predefinita e si adatta all'area visibile dell'utente.
Tuttavia, il fatto che il testo si adatti allo schermo non significa che sia confortevole da leggere. Una buona tipografia consiste nel presentare il testo in modo appropriato. La tipografia non limita la scelta dei caratteri adatti. Devi prendere in considerazione le preferenze dell'utente, la dimensione del testo, la lunghezza delle righe e la distanza tra le righe di testo.
Dimensione testo
È difficile capire le dimensioni del testo sul Web.
Se qualcuno usa uno schermo di piccole dimensioni, possiamo scommettere che lo schermo sarà abbastanza vicino agli occhi, a una distanza di mano.
Ma a mano a mano che gli schermi diventano sempre più grandi, diventa più difficile stabilire quella connessione. Uno schermo delle dimensioni di un laptop sarà probabilmente abbastanza vicino allo spettatore, ma un monitor per computer widescreen ha più o meno le stesse dimensioni di uno schermo televisivo. Le persone sono sedute a un braccio di distanza dallo schermo di un computer, ma molto più lontano dal televisore.
Tuttavia, anche se non puoi sapere con certezza quanto una persona sia distante da uno schermo, puoi provare a utilizzare dimensioni del testo che speriamo si riveleranno appropriate. Utilizza dimensioni del testo più piccole per schermi più piccoli e testo di dimensioni maggiori per schermi più grandi.
Puoi utilizzare le 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%;
}
}
Ridimensionare il testo
Il passaggio da una dimensione di testo fissa a un punto di interruzione specifico è piuttosto complicato. Un approccio più reattivo è lasciare che la larghezza del dispositivo dell'utente influisca sulle dimensioni del testo.
L'unità vw in CSS è l'acronimo di "viewport width". Se colleghi le dimensioni del carattere alla larghezza dell'area visibile, il testo aumenterà e si ridurrà in proporzione alla larghezza del browser. In questo modo è difficile prevedere quale sarà la dimensione 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 vw da solo in una dichiarazione relativa alle dimensioni del carattere.
html {
font-size: 2.5vw;
}
In caso contrario, l'utente non sarà in grado di ridimensionare il testo. Il testo sarà ridimensionabile se combini un'unità relativa, come em, rem o ch. La funzione CSS calc() è perfetta a questo scopo.
html {
font-size: calc(0.75rem + 1.5vw);
}
Lascia che sia il browser a fare i conti. Ciò rende difficile prevedere esattamente quale sarà la dimensione del testo a una specifica larghezza, ma sai che le dimensioni del testo saranno comprese nell'intervallo corretto. Il browser dell'utente si occupa di calcolare esattamente le dimensioni del testo.
Ma ora c'è la possibilità che il testo diventi troppo piccolo sugli schermi stretti e troppo grande su schermi ampi.
Testo di bloccaggio
È consigliabile evitare che il testo si restringa e raggiunga livelli estremi. Puoi controllare il punto di inizio e di fine della scalabilità utilizzando la funzione CSS clamp(). Questo "applica" il ridimensionamento a un intervallo specifico.
La funzione clamp() è simile alla funzione calc(), ma accetta tre valori. Il valore medio è lo stesso che passi a calc(). Il valore di apertura specifica la dimensione minima, in questo caso 1 m in modo da non scendere al di sotto della dimensione 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 è cartaceo, ma possiamo imparare lezioni dal mondo della stampa e applicarle sul web.
Nel suo libro classico The Elements of Typographic Style, Robert Bringhurst affermava così la lunghezza (o misura) della riga:
Qualsiasi elemento compreso tra 45 e 75 caratteri è ampiamente considerato come una lunghezza di riga soddisfacente per una pagina a colonna singola impostata in una faccia di testo con grazie in dimensioni del testo. La riga di 66 caratteri (che include sia lettere che spazi) è considerata ideale. Per un lavoro con più colonne, una media migliore è di 40-50 caratteri.
Non puoi impostare la lunghezza della riga direttamente in CSS. Nessuna proprietà line-length presente. Tuttavia, puoi evitare che il testo diventi troppo ampio limitando la larghezza del contenitore. La proprietà max-inline-size è perfetta per questo scopo.
Non impostare la lunghezza delle righe con un'unità fissa come px. Gli utenti possono aumentare o diminuire la dimensione dei caratteri e la lunghezza delle righe dovrebbe adattarsi 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 con quella dimensione del carattere.
Altezza della riga
Anche se non esiste una proprietà line-length in CSS, esiste una proprietà line-height.
Le righe di testo più corte possono avere valori line-height più grandi. Tuttavia, se utilizzi valori line-height grandi per le lunghe righe di testo, l'occhio del lettore fatica 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 a font-size.
line-height: 24px;
line-height: 1.5;
Combinazioni e scala
Ricorda di dare la priorità alla gerarchia durante la creazione delle interfacce utente, per una maggiore chiarezza e per migliorare il flusso delle pagine. Un ottimo modo per farlo è con una scala tipografica integrata nel tuo sistema di progettazione.
Caratteri web
Un carattere è come una voce per le tue parole. Per la maggior parte del tempo sul web c'erano pochissime opzioni di carattere. I caratteri di sistema erano le uniche opzioni disponibili. Ora invece puoi scegliere un carattere web che si adatti ai tuoi contenuti.
Utilizza @font-face per indicare ai browser dove trovare i file dei tuoi caratteri web. Utilizza woff2 come formato del carattere web. È ben supportato e ha i migliori miglioramenti 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 peggiorare l'esperienza utente poiché aumenta il tempo di caricamento della pagina. Ricorda che il design non riguarda solo l'aspetto dei pixel finali. La velocità con cui vengono dipinti i pixel è un aspetto fondamentale dell'esperienza utente. Un'esperienza veloce è comunque positiva per gli utenti.
Caricamento dei caratteri
Puoi richiedere che i browser avviino il download di un file dei caratteri il prima possibile. Aggiungi un elemento link a 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 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 sei tu a ospitare 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 decidere di non mostrare alcun testo finché il carattere web non viene caricato. Potresti 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 mostrare del testo, gli utenti potrebbero ritrovarsi a fissare una pagina vuota per molto tempo, in modo frustrante. Se mostri prima il testo in un carattere di sistema e poi passi al carattere web, gli utenti potrebbero riscontrare uno spostamento fastidioso dei contenuti sulla pagina.
Un buon compromesso è attendere un po' di tempo prima di visualizzare qualsiasi testo. Se il carattere web viene caricato prima dello scadere del tempo impostato, il testo viene visualizzato utilizzando il carattere web senza variazioni dei contenuti. Se il carattere web non è ancora stato caricato allo scadere 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 quello 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 la visualizzazione del testo.
body {
font-family: Roboto, sans-serif;
font-display: fallback;
}
Caratteri variabili
Se stai utilizzando molti stili o pesi diversi dello stesso tipo di carattere, potresti finire per utilizzare molti file di caratteri separati, ovvero un file di caratteri separato per ogni spessore o stile.
I caratteri variabili consentono di risolvere questo problema utilizzando un solo file. Invece di avere file separati per le regole normali, in grassetto, in più e così via, un file con caratteri variabili è reattivo. Contiene tutte le informazioni necessarie per essere visualizzate in uno spettro di pesi o stili.
Ciò significa che un singolo file con carattere variabile è più grande di un singolo file di carattere normale, ma un file con un solo carattere a variabile probabilmente sarà 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 tipografiche che fai come designer. La tipografia reattiva consiste anche nel rispettare il dispositivo e la connessione di rete dell'utente. Il risultato finale è un design che sembra perfetto, indipendentemente da come viene visualizzato.
Ora che sai come utilizzare il testo adattabile, è il momento di approfondire le immagini adattabili.
Verifica la tua comprensione
Verifica le tue conoscenze sulla tipografia
È necessario aggiungere stili affinché il testo vada a capo all'interno dell'area visibile.
clamp() è utile per la tipografia fluida perché
calc()clamp() per la tipografia.clamp() per la tipografia.Quale tipo di valori di line-height è stato consigliato in questa guida?
24pxline-height.2rem1.52vwline-height sarebbe problematico.Che cosa fa font-display?
block o inline-block.