Gli standard per la tipografia sul web si sono spostati. I designer stanno andando con una tipografia più grande, più facile da leggere, che è più uniforme e coerente tra i dispositivi. La tendenza verso una maggiore tipografia web è iniziata con trattamenti di grandi dimensioni sopra la pergamena, dai titoli agli elementi di testo di intestazione eroe più artistici.
Le dimensioni del testo del corpo hanno contemporaneamente aumentato i dispositivi mobili per migliorare la leggibilità. E da lì, la tendenza ha iniziato a ridursi a quasi tutti gli aspetti del web. Se non hai pensato alla dimensione della copia sul tuo sito web di recente, è tempo di rivisitare quella copia del corpo di 12 o 14 punti / pixel. Il testo grande è dentro!
Titoli troppo grandi
L'implementazione più ovvia e più semplice del testo più grande consiste nell'utilizzare titoli sovradimensionati per richiedere l'attenzione dell'utente.
Un titolo troppo grande funziona meglio quando non ci sono molte parole lunghe o complicate da considerare. Questo è un trattamento in-the-face in modo che l'iscrizione vera abbia bisogno di essere facile da capire.
Suggerimenti per il successo:
- Attenersi a un carattere tipografico serif o sans serif che è possibile utilizzare in altre parti del design. Le opzioni di novità o di script possono essere complicate rapidamente.
- Rendilo grande - spiacevolmente grande - e poi arretrati un po 'per trovare la giusta armonia nel design.
- Inizia con un testo di almeno 80 punti e espandi per riempire lo schermo. Assicurati di utilizzare una dimensione relativa nel progetto finale in modo che venga ridimensionata in modo appropriato su tutti i dispositivi. (La regola CSS appropriata è "font-size", che usa una scala percentuale basata su una dimensione standard che è al 100 percento.)
Fare il caso per la copia del corpo più grande
Se la copia del corpo sul tuo sito web non è di almeno 16 punti, è tempo di ripensare alla tua situazione tipografica.
Questa? Regola? ha radici nel mobile poiché il testo più piccolo di quello per gli input effettivamente ingrandirà alcuni dispositivi. (Questo può essere fastidioso in termini di esperienza utente.) La correzione del design è di creare livelli di tipografia che siano abbastanza grandi da leggere e capire con facilità.
Inoltre, l'obiettivo è che il testo su un dispositivo mobile sia facilmente leggibile se tenuto a una distanza naturale (in genere a circa mezzo braccio di lunghezza, simile alla lettura di un libro).
Il testo più grande può essere più facile da leggere a questa distanza ed è più appropriato per le dimensioni dello schermo. Gli utenti non dovrebbero essere costretti a strizzare gli occhi o avvicinare il dispositivo al loro volto per comprendere ragionevolmente il testo.
Suggerimenti per il successo:
- Inizia con una dimensione della copia del corpo di circa 16 punti. Questo è generalmente accettabile per i dispositivi desktop e mobili.
- Utilizzare un carattere altamente leggibile con una larghezza di tratto regolare e linee pulite per massimizzare la leggibilità.
- Regola leggermente la dimensione verso l'alto o verso il basso per i caratteri tipografici sottili (ingrandisci) o larghi (riduci dimensioni).
- Per le pagine con testo elevato, prendere in considerazione l'ingrandimento del testo del corpo per ridurre l'affaticamento degli occhi, ad esempio 18 punti o anche 20 punti. (Come guida, Medium usa un testo del corpo di 21 punti e il sito di Jeffrey Zeldman è a 24 punti.)
Aumentare la gerarchia generale
Quindi devi fare molto di più che regolare le dimensioni del testo su una parte del design del tuo sito web. È necessario ripensare all'intera gerarchia tipografica.
Man mano che la dimensione del corpo del testo aumenta, ti consigliamo di ridimensionare il resto del testo di conseguenza. Altrimenti, si potrebbe finire con una scala tipografica stonata in cui alcune dimensioni del testo sono difficili da distinguere l'una dall'altra.
Quando si tratta di aumentare la dimensione della tipografia grande, come titoli o sottotitoli, è un po 'meno vitale regolare la scala tipografica complessiva. Anche se questi elementi si ingrandiscono, la naturale distinzione dagli elementi del corpo del testo rimarrà (ovviamente). Dovresti considerare di aumentare anche la dimensione complessiva del testo del corpo se inizia a sembrare fuori posto o se la dimensione del tipo grande rende il testo del corpo più piccolo di quanto non sia realmente. (Le illusioni ottiche possono rovinare una gerarchia di progettazione).
Suggerimenti per il successo:
- Regola le dimensioni del testo in proporzione l'una con l'altra durante il design.
- Presta attenzione a come il contrasto di colore e dimensioni influisce sull'aspetto delle dimensioni delle letture.
- Fidati dei tuoi occhi; se il testo sembra troppo grande o piccolo, continua a fare aggiustamenti fino a quando non sembra giusto.
Non dimenticare di regolare la spaziatura
Mentre si apportano modifiche agli elementi di testo, non trascurare lo spazio tra le righe di testo. Il testo di dimensioni maggiori spesso richiede una maggiore spaziatura delle linee.
Prendi in considerazione la possibilità di creare regole di spaziatura delle linee basate su una percentuale della dimensione del testo anziché su un'altezza fissa. (In questo modo le modifiche si adegueranno automaticamente).
Suggerimenti per il successo:
- Inizia con 1,5 volte (150%) le dimensioni del testo del corpo per l'interlinea dello stesso blocco in testo. Se si sente stretto, aumentare l'interlinea.
- Gli elementi di sfondo e di testo con contrasto estremo spesso richiedono un po 'di spaziatura in più per una sensazione più armoniosa. Aggiungi l'interlinea per il testo bianco su uno sfondo nero, riduci alcuni per gli sfondi grigi mezzitoni.
- Fai molta attenzione agli ascensori e discendenti del carattere tipografico scelto e regola di conseguenza la spaziatura delle linee.
Le dimensioni del testo aumentano anche offline
E mentre questa tendenza tipografica è rivolta principalmente ai progetti di web design, le dimensioni dei testi sono in generale in aumento. Dalle e-mail ai materiali stampati, i progettisti utilizzano le stesse linee guida per i progetti digitali con disegni stampati di dimensioni simili. (È possibile equiparare un dispositivo mobile a una cartolina).
Un buon design è un buon design.
E così tanti progetti includono più componenti in cui ci concentriamo su un'esperienza utente comune. Quindi vuoi che il design di un sito web sembri simile al design di una cartolina correlata.
L'altra comunanza è che i tuoi occhi cominciano ad abituarsi a vedere il testo di una certa dimensione. Proprio come lavorare con i pattern utente, i pattern visivi rendono le cose più facili da capire e vedere velocemente. Il testo più grande non fa eccezione.
Conclusione
Hai iniziato a notare uno spostamento delle dimensioni che utilizzi per la tipografia in vari progetti di design? Personalmente, sono rimasto sorpreso dalla rapidità con cui mi ha incastrato. In realtà mi trovo a spingere per dimensioni del testo sempre più grandi.
Ecco come iniziano le tendenze e le modifiche ai modelli di progettazione comuni. Mi piacerebbe sentire le tue esperienze con il tentativo di tipo più grande. È stato ben accolto o hai avuto un sacco di respingimenti? Fammi sapere su Twitter e tag @designshack.