Una semplice guida alla tipografia reattiva
La stragrande maggioranza degli articoli che parlano di responsive design si focalizzano su due aree principali: una griglia fluida e flessibile e immagini fluide e flessibili. Quello di cui molti di loro non parlano è la tipografia.
Eppure, per la maggior parte dei siti web il testo, il contenuto, è l'elemento più importante.
Certo, per i siti in cui le immagini o il video sono il contenuto principale, il tipo di risposta è un po 'meno importante, ma non deve essere trascurato.
La buona notizia è che la tipografia reattiva non è particolarmente difficile da ottenere. Abbiamo solo bisogno di un po 'di tempo per riflettere su come il nostro tipo dovrebbe rispondere ai cambiamenti nelle dimensioni dello schermo e quindi implementare tali cambiamenti.
Principi di tipo reattivo
Ci sono due principi principali per creare una tipografia reattiva efficace. Il primo è di tipo ridimensionabile. Ciò significa che non solo ridimensiona in base alla dimensione dello schermo, ma che è anche ridimensionabile dall'utente.
Il secondo è la lunghezza della linea ottimizzata, che mantiene la leggibilità. Ciò significa che per alcuni schermi, mantenere l'area del contenuto più piccola e le lunghezze della linea più brevi ha più senso, anche se il contenuto teoricamente potrebbe allungarsi.
Tipo ridimensionabile usando rems
La maggior parte dei designer usa pixel o em per il dimensionamento del loro tipo. Gli Ems sono un'opzione migliore, in quanto consentono agli utenti di ridimensionare il tipo nel proprio browser. Ma gli em sono relativi all'elemento genitore, il che significa che sono più complicati da usare dei pixel, il che si aggiunge solo a modelli reattivi in cui ci sono più dimensioni e relazioni da seguire.
Rems offre un'alternativa migliore agli em. Funzionano in un modo quasi identico, ad eccezione di una differenza chiave: le unità rem sono relative al html elemento, piuttosto che singoli elementi genitore. Ciò rende il mantenimento del corretto dimensionamento del tuo tipo molto più semplice.
Le unità Rem ora sono supportate in tutti i principali browser moderni, tra cui Opera dalla versione 11.6 e IE9. Anche se potresti voler includere dei fallback per i browser precedenti, c'è un supporto abbastanza ampio per i rems per utilizzarli ora.
Poiché utilizzerai unità rem per il tipo di ridimensionamento, assicurati di applicare il ripristino al tuo html elemento e non il tuo body elemento. Quindi dovrebbe assomigliare a questo:
html { font-size:100%; }
Ora le tue unità rem saranno applicate alle dimensioni di carattere predefinite per il dispositivo.
Successivamente dovrai specificare la dimensione del carattere per ogni dimensione di visualizzazione. Raccomando di sperimentare con le dimensioni dei font effettivi su vari dispositivi per vedere quale è l'aspetto migliore. Dipende in gran parte dai caratteri tipografici che hai selezionato, così come dal tuo design generale.
Probabilmente vorrai specificare più dimensioni dei caratteri in base alle diverse dimensioni dello schermo, il che è una cosa abbastanza semplice da fare. Ad esempio, il tuo CSS potrebbe apparire in questo modo:
@media (max-width: 640px) { body {font-size:1.2rem;} } @media (min-width: 640px) { body {font-size:1rem;} } @media (min-width:960px) { body {font-size:1.2rem;} } @media (min-width:1100px) { body {font-size:1.5rem;} }
Certo, questo è un codice semplificato per questo articolo, ma ti dà un punto di partenza. Si potrebbe notare che per gli schermi più piccoli, viene specificata una dimensione del carattere leggermente più grande. Questo perché le dimensioni dei caratteri più grandi sono generalmente più facili da leggere su schermi piccoli.
Naturalmente, vorrai fare specifiche aggiuntive per cose come la tua h1 elementi e così via. Consiglio vivamente di utilizzare uno strumento come Campione di caratteri Web per vedere come apparirà effettivamente il tuo tipo.
Mantenimento di lunghezze di linea ottimali
Sebbene il tipo ridimensionabile sia un concetto piuttosto semplice, il mantenimento di lunghezze di linea appropriate su più dispositivi diventa un po 'più complicato. C'è stato un bel po 'di dibattito su quale sia la lunghezza della linea ottimale per la leggibilità, ma secondo il Istituto Baymard , il consenso sembra essere compreso tra 50 e 75 caratteri per riga.
Consigliano anche l'uso di un contenitore a larghezza fissa per i tuoi contenuti, ma ciò vanifica lo scopo di un design reattivo, quindi dobbiamo affrontare le cose in modo leggermente diverso se vogliamo mantenere la reattività con lunghezze di linea ottimizzate.
Per prima cosa, guarda le diverse dimensioni dello schermo per cui ti stai progettando e scopri quale font di dimensioni devi utilizzare per ottenere circa 50 caratteri su una riga. Per schermi molto piccoli, potrebbe essere necessario scendere sotto i 50 caratteri per riga per mantenere una dimensione del carattere leggibile, ma l'obiettivo dovrebbe essere 50. Questo ci dà un buon punto di partenza per la nostra dimensione del carattere.
Dovremmo anche impostare le larghezze massime (o punti di rottura) per le aree di contenuto testuale. Guarda le dimensioni del tipo che stai usando per una data dimensione dello schermo, e quindi determina la larghezza del contenitore del contenuto quando hai circa 75 caratteri per riga. Questo non sarà esatto a meno che tu non stia usando un font monospace, ma dovresti riuscire a trovare una media abbastanza facilmente. Quello diventa la nostra larghezza massima del contenitore.
Diciamo che la dimensione del font predefinita per un dato dispositivo è 16px e vuoi che la dimensione del tuo font sia di 20px (diciamo che stiamo usando un tipo di carattere serif come Droid Serif per questo esempio). Ciò significa che dovrai specificare il tipo da 1.25rem. A quella dimensione, vorrai una larghezza del contenitore di circa 675 px di larghezza. Questo ci dà un conteggio dei personaggi negli anni '60 in media, che è giusto nella nostra larghezza target.
Per specificare la larghezza del contenitore, usa questo codice:
@media (min-width: 950px) { .container {width:675px;} }
È possibile impostare le larghezze di linea massime per ogni dimensione di visualizzazione o solo per quelle specifiche. Con schermi più piccoli, potresti voler lasciare la larghezza del contenitore e lasciare che il tipo si diffonda su tutta la larghezza dello schermo.
Ora, con schermi molto più grandi, potresti voler dividere il tuo contenuto in più colonne. Supponiamo, ad esempio, che tu stia lavorando con un iPad in visualizzazione orizzontale. La larghezza dello schermo è 2048 pixel. Allungare le linee per riempire lo schermo rende difficile la lettura, ma centrando il contenuto e mantenendo le lunghezze della linea più brevi sconfigge lo scopo di visualizzare i contenuti in modalità orizzontale.
Quindi, invece, imposta il tuo tipo in due colonne (o anche tre, a seconda della dimensione del tuo carattere). Specifica a più colonne di CSS3 rende molto facile dividere il testo in più colonne senza dover modificare l'intero layout. Combinalo con le query multimediali e ora disponi di un layout del contenuto che si divide in due o tre colonne per schermi più grandi, mantenendo sia una dimensione del testo altamente leggibile che una lunghezza della linea altamente leggibile.
Ancora una volta, il codice per farlo è piuttosto semplice:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }
Ora, su schermi più larghi di 1140 pixel, i tuoi contenuti saranno divisi in due colonne, rendendo le lunghezze delle linee molto più leggibili.
Utilizzando caratteri tipografici alternativi
Una cosa che è spesso trascurata quando si parla di tipografia reattiva, è l'idea che i diversi tipi di caratteri potrebbero non funzionare bene a diverse dimensioni. Questo è particolarmente vero per i caratteri di visualizzazione.
Significa che dovresti evitare di usare questi font nei tuoi progetti responsive? Ovviamente no. Invece, basta specificare diversi tipi di carattere per i vari elementi nei layout più grandi o più piccoli.
Ad esempio, con un design per computer desktop, potresti voler usare un tipo di carattere Script della lega per le tue intestazioni. Ma su un display più piccolo, come un iPhone, dovrai renderlo così grande da dominare il contenuto, o sarà molto difficile da leggere.
Quello che possiamo fare qui è usare League Script per i display più grandi (iPad, desktop, ecc.), Passando a una versione più grande del font del corpo per schermi più piccoli (come l'iPhone o altri smartphone).
Per fare questo, devi semplicemente specificare qualcosa come questo:
@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} }
Ovviamente questo può essere fatto anche oltre le tue intestazioni.
Conclusione
Mentre il design reattivo si concentra principalmente sulle immagini e sul layout generale, la tipografia è importante tanto quanto entrambe le cose. La parte migliore è che non è particolarmente difficile adattare e ottimizzare la tua tipografia per un design reattivo.
È fondamentale che tu inserisca lo stesso tempo e gli stessi sforzi che hai messo in altri elementi del tuo design. Mantenere la leggibilità del contenuto del testo è un componente fondamentale per la creazione di un'esperienza utente ottimale per i visitatori.
Metti l'accento sulla tipografia reattiva nei tuoi progetti mentre esegui griglie reattive e immagini? Perché o perché no?