Questo tipo fa sembrare il mio disegno grasso?
Niente può rovinare un design come la tipografia che non va bene. Se è troppo grande (o troppo piccolo), il ridimensionamento del tipo improprio è un grosso problema.
È un problema per più disegni di quanti tu possa pensare. Troppo spesso si visita un sito Web in cui il tipo viene visualizzato in modo ottimale su un browser desktop, solo per rivisitare in seguito da un telefono e trovarlo difficile da leggere. Succede tutto il tempo.
Il problema è che il tipo non è stato effettivamente ridimensionato per ogni dispositivo. È un problema totalmente evitabile quando si considera una scala tipografica per i progetti.
Cos'è una scala tipografica?
Una scala tipografica visiva incapsula le dimensioni, lo spazio e le proporzioni degli elementi di tipo relativi a quelli di un altro in un progetto. Questo include tutto dallo stile del testo principale a titoli, sottotitoli, didascalie e qualsiasi altro elemento di testo.
La scala aiuta a determinare le dimensioni e il posizionamento degli elementi di testo in relazione tra loro. Per il web design, in particolare, la scala del tipo visivo corrisponde spesso ai tag nel tuo CSS (come h1, h2, h3, p e così via).
Una scala di tipo ti aiuta a creare armonia e ritmo nel design. Inoltre ti tiene lontano dai problemi stilistici perché gli elementi di testo corrispondono agli elementi CSS in modo che ogni parte del design utilizza gli stessi elementi e coerenza.
La scala deve essere basata sulla dimensione del corpo del testo. (Impostare sempre un carattere tipografico e le dimensioni per primo). Quindi costruisci la scala attorno a questa tipografia principale. Non sai da dove cominciare? Google ha un raccomandazione solida :
- Utilizza una dimensione del carattere di base di 16 pixel CSS. Regola le dimensioni in base alle proprietà del carattere utilizzato.
- Usa le dimensioni relative alla dimensione base per definire la scala tipografica.
- Il testo richiede uno spazio verticale tra i caratteri; la raccomandazione generale è di usare l'altezza di riga predefinita del browser di 1,2 em.
- Limita il numero di caratteri utilizzati e la scala tipografica.
Crea armonia e ritmo
Una scala di tipo non solo aiuta gli utenti a spostarsi attraverso la copia, ma crea armonia e ritmo per il flusso del testo. Questo è importante su qualsiasi dispositivo.
Allora, da dove inizi?
UX Matters ha alcune delle migliori ricerche disponibili al minimo dimensioni del testo per dispositivo . Si noti che queste sono dimensioni minime e che le dimensioni del testo del corpo continuano ad aumentare (così come l'interlinea), è necessario prendere in considerazione le dimensioni dei punti più grandi. Steven Hoober consiglia di iniziare almeno il 40% in più rispetto ai minimi raccomandati. Inoltre, gli stili di contenuto ottimizzati possono arrivare fino all'80 percento oltre il minimo, ma dovresti essere cauto anche con caratteri eccezionalmente grandi.
| Tipo di dispositivo | Dimensione minima | Raccomandazione del 40% (adattata per un facile utilizzo) | 80% massimo (regolato per un facile utilizzo) |
| Piccolo telefono | 4 | 5.6 (6) | 7,2 (7,5) |
| Grande telefono | 6 | 8,4 (8,5) | 10,8 (11) |
| phablet | 7 | 9,8 (10) | 12,6 (13) |
| Tavoletta | 8 | 11.2 (11.5) | 14,4 (14,5) |
| Laptop / Desktop | 10 | 14 (14) | 18 (18) |
Una volta impostata la dimensione del testo del corpo, è possibile determinare come dimensionare gli elementi di testo di supporto. C'è una bella arte e il test dell'occhio è spesso un buon punto di partenza.
Non c'è quasi niente come un titolo troppo grande. Dì ciò che devi dire e ridimensiona per ridimensionare le parole nello spazio. Un titolo a due righe si sentirà più grande di una riga anche se il testo è della stessa esatta dimensione.
Il modo più semplice per pensare all'ampliamento dei titoli e ad altri elementi di test più grandi funziona in percentuale in base al testo del corpo. Mentre ogni designer ha un punto di partenza diverso, il 250 percento più grande del testo del corpo è un buon campo per il titolo; 150 percento per h2, 75 percento per h3 e 50 percento per elementi come citazioni di blocco. (Questa non è una regola, solo un punto di partenza.)
Ecco perché le percentuali, piuttosto che le dimensioni impostate, sono importanti: una volta impostata la dimensione del tipo di corpo, le percentuali regolano le dimensioni di conseguenza indipendentemente dalle dimensioni dello schermo. Ogni elemento del tipo è relativo al tipo di corpo.
Linee guida per caratteri e spaziatura
Ci sono alcune altre linee guida che i designer guardano allo stesso modo quando si tratta di digitare sullo schermo. Quando si tratta di spaziatura, una delle regole pratiche è stata quella di guardare i caratteri per riga per garantire la leggibilità.
- Desktop e dispositivi di grandi dimensioni: da 60 a 75 caratteri per riga
- Telefoni e dispositivi di piccole dimensioni: da 35 a 40 caratteri per riga
Nota che la leggibilità su schermi più piccoli si basa sull'avere meno caratteri (testo più grande).
La stessa idea vale anche per la spaziatura. È necessario più spazio tra le righe di testo quando le dimensioni dello schermo sono limitate per facilitare agli utenti la lettura e la scansione del contenuto. Prendi in considerazione l'aggiunta del 25% in più di interlinea su dispositivi più piccoli rispetto alla tipografia desktop.
La dimensione e la spaziatura aggiuntive aiutano a ridurre la sensazione di tensione o crunch che gli utenti possono provare quando cercano di leggere su dispositivi più piccoli. Poiché la tela è piccola, il flusso del lettore e la leggibilità sono fondamentali per far scorrere gli utenti.
Suggerimenti per iniziare
Esistono molti modi per creare una scala tipografica e assicurarsi che il testo non appaia troppo grasso. Il modo in cui lo fai dipende probabilmente dal tuo livello di comfort con il codice e lo sviluppo, oltre al design.
L'opzione migliore è utilizzare un design reattivo con query multimediali. Questa è l'opzione progettista-sviluppatore che fornirà il massimo livello di controllo sulle specifiche del testo. (Per ulteriori informazioni, torna a questi consigli di Google, sopra.)
Un altro percorso è quello di progettare diverse versioni. Anche se questo è un concetto piuttosto antiquato, ci sono ancora alcuni posti che utilizzano URL per dispositivi mobili e URL desktop per i loro siti web. Non è raccomandato nella maggior parte dei casi, ma per alcuni siti Web in cui il design è radicalmente diverso o gli utenti sperimentano cose diverse, può essere un'opzione.
L'opzione facile è iniziare con un tema per il tuo sito web. Assicurati di optare per un'opzione completamente reattiva. Quando utilizzi un tema reattivo di alta qualità, la maggior parte delle congetture viene presa fuori per te. Tutto quello che devi veramente pensare è la dimensione del testo del corpo. Assicurati di controllare tutto per assicurarti che le dimensioni dei tipi di cellulari soddisfino i tuoi standard.
3 strumenti per creare una scala di tipo
Sono disponibili numerosi strumenti per aiutarti a vedere l'impatto esatto di una scala di tipografia visiva. Ecco alcune delle opzioni migliori e più facili da usare.
- Digitare Scala : Inserisci il testo e gioca con opzioni come dimensione, scala e carattere direttamente sullo schermo; gradare il CSS o modificare il codice direttamente dallo strumento;
- Scala modulare : La scala funziona come una regola per aiutare a determinare le dimensioni per il tipo; quindi scarica i risultati come plugin Sass o JS o guardali sullo schermo;
- Golden Ratio Typography Calculator : Lo strumento ottimizza le dimensioni, l'altezza della linea, la larghezza e i caratteri per riga utilizzando la sezione aurea
Conclusione
La giusta scala tipografica manterrà il tuo design elegante e snello. È l'armonia aggiunta che gli utenti potrebbero non comprendere ma contribuisce alla leggibilità e all'usabilità generali.
È probabile che la scala sia disattivata se il design "non sembra giusto". Il tipo di dimensioni non appropriate può essere difficile da individuare ma è spesso un luogo da guardare quando qualcosa su un design non è bilanciato. Gioca con alcune diverse opzioni di scala prima di sistemarti su qualcosa, e ricorda che la tendenza in questo momento è per il tipo che è un po 'più grande rispetto al passato.