Share
L'apprendimento di tutti i dettagli del lato tecnico della tipografia è buono. Ti darà una solida base per la ricerca di caratteri tipografici o tipi di carattere e ti aiuterà a capire un po 'di più sull'arte della tipografia stessa. Presto ti renderai conto di quanto sia difficile lavorare per ottenere il testo giusto in qualsiasi momento, non solo sul web.
Uno degli aspetti più importanti della tipografia sul web è il ritmo verticale - e questo può anche essere uno dei più difficili da ottenere, poiché richiede spesso molto tempo e sperimentazione. Ci sono molti modi per ottenere un buon ritmo verticale su una pagina, anche se alcuni possono ridursi semplicemente a ciò che sente e ti sembra giusto sullo schermo.
Il ritmo è ...
un forte, regolare, ripetuto modello di movimento o suono
e quanto più un ritmo è coerente e familiare, tanto migliore e più forte diventa.
Possiamo applicare questo al web con il termine "ritmo verticale" - nella cultura occidentale, mentre leggiamo da sinistra a destra e dall'alto in basso, vogliamo provare a mantenere un ritmo visivo coerente al contenuto della nostra pagina. Mantenere coerente il nostro ritmo verticale significa che possiamo creare un'esperienza visivamente più rilassante, evocare una sensazione di familiarità per i nostri utenti, rimuovere le barriere visive e rendere il contenuto molto più leggibile.
Creare un buon ritmo verticale sul design di un sito Web può essere difficile. L'obiettivo è creare una relazione armoniosa tra tutti i contenuti (comprese le immagini e testo) sul tuo sito web.
Ad esempio, come appare la spaziatura tra i paragrafi (è troppo grande o troppo piccola?), Quanto è facile per te, te stesso, trovarlo da leggere? Ci sono molte domande da porre e la maggior parte di esse si riduce a quanto sia facile leggere (anche rapidamente scansionando) i contenuti del tuo sito web. Anche solo i più piccoli cambiamenti che rendono migliore l'esperienza di lettura sul tuo sito web costituiranno un'enorme differenza per i tuoi utenti.
Così ora sappiamo quale sia il ritmo verticale, abbiamo bisogno di imparare un po 'di più su ciò che rende un buon ritmo verticale. La chiave qui è la leggibilità.
Quando lavori con la tipografia sul Web, le due cose principali su cui vuoi prestare attenzione sono le dimensioni dei caratteri e le altezze delle linee. Sebbene ci siano così tante altre cose che vanno d'accordo con queste due cose, queste sono le tue due componenti chiave per creare un ritmo verticale migliore sul design della tua pagina. Se le dimensioni dei caratteri non si adattano bene - ad esempio con enormi dimensioni di intestazione e ridicolmente minuscole dimensioni del testo del corpo, ad esempio - questo renderà il contenuto molto più difficile da leggere o scansionare rapidamente. Allo stesso modo, se il tuo contenuto ha un'altezza di riga che rende il testo scomodo da leggere - sia per essere distanziati troppo ravvicinati o troppo distanti - ciò spegne gli utenti, quando vuoi interagire con loro.
La creazione di un buon ritmo verticale nei tuoi progetti include molta pratica, ma anche molta teoria e talvolta anche matematica.
Innanzitutto, è necessario iniziare a guardare una linea di base (nota anche come griglia di riferimento). Una linea di base è l'altezza standard della linea su cui baserai il tuo ritmo verticale e da lì puoi iniziare a utilizzare questa linea di base per aiutarti a raggiungere altezze di linea per tutti gli altri tipi di carattere e contenuti nel tuo design.
Il sito Web di Trent Walton è un brillante esempio di buon ritmo verticale nel design. Quando si lavora con una linea di base, è consigliabile utilizzare l'altezza della riga della dimensione del carattere più comunemente utilizzata o primaria nella progettazione. L'esempio più semplice che riesco a pensare è quello di pensare alla dimensione del font base principale del 100% (che equivale a 16px nella maggior parte dei browser). Se hai un'altezza di linea pari a 1, anche l'altezza della linea sarà 16 px. Tuttavia, le line-heights sono solitamente le migliori tra 1,4-1,6 volte la dimensione del tuo font (visivamente, sembra funzionare con la maggior parte dei font, anche se non prendi questo di regola, basta giocare con esso). Se poi guardiamo all'altezza di una linea nel mezzo di quella, di 1,5, la nostra altezza della linea sarà di 24px - e questo è il nostro numero di riferimento. Da qui in poi, vogliamo assicurarci che tutti i contenuti e gli elementi tipografici presenti nel nostro design corrispondano o si sommino a questa cifra di 24px.
Un'altra cosa importante da misurare sono i nostri margini. Un modo davvero semplice per tenere sotto controllo il ritmo è usare questo numero magico (24px) per i nostri margini.
Sono stato un grande fan dei margini di una singola direzione da quando Harry Roberts ha suggerito questo in un articolo a metà 2012, in cui i margini che applichiamo a tutti gli elementi a livello di blocco sono collocati in una direzione (ad esempio: nella parte inferiore degli elementi ). Lo stesso si può dire anche quando stiamo progettando, così come 24px è il nostro "numero magico" - e il numero in cui tutto dovrebbe essere multiplo o almeno relativo - possiamo aggiungere un margine inferiore a tutti i nostri blocchi elementi di 24px (o 1.5rem, se lo preferisci - tuttavia vuoi aggiungere questo codice nel tuo CSS va bene!). Questo ci aiuta a mantenere il nostro ritmo verticale scorrevole e rende tutti i nostri elementi in linea con la linea di base che abbiamo creato.
Un piccolo consiglio che trovo quando lavoro con le immagini nel mio disegno - e assicurandomi che non buttino completamente fuori base la nostra linea di base e il ritmo verticale - è assicurarsi che le altezze dell'immagine corrispondano a un multiplo del nostro numero magico. Ad esempio, un'immagine potrebbe avere un'altezza di 240 px (10 x 24 px, il nostro numero magico) con un margine inferiore di 24 px. Oppure potremmo anche avere un'altezza di 252px con un margine inferiore di 12px - finché tutto si aggiunge a quel multiplo di 24px, dovremmo stare bene.
Mentre è importante ricordare il tuo numero magico, puoi sempre staccarti leggermente da esso - se qualcosa non sembra proprio all'altezza di 1,5 linee che hai impostato, quindi prova qualcos'altro - finché puoi riallineare l'altro valori in modo che ricada nella linea di base e quindi mantiene il ritmo verticale sotto controllo.
Ad esempio, se scegli di andare con un'altezza della linea leggermente più alta di 26 pixel (che corrisponde a circa 1.625 volte la dimensione originale del font di 16px), finché i margini lo riflettono, il tuo ritmo verticale andrà bene. Dato che abbiamo aggiunto altri due pixel all'altezza della linea, dobbiamo prendere quei due pixel dal margine inferiore di quell'elemento. Ovviamente, se puoi, prova a cercare dei pattern nella tua progettazione in cui ciò potrebbe accadere e ad architettare il tuo CSS in modo da riflettere questo modello, quindi creare una classe CSS modulare per gli elementi che hanno quel modello, come faresti con qualsiasi progetto stai sviluppando.
Lavorare per creare un buon ritmo verticale può essere difficile, ma fortunatamente, come con la maggior parte delle tecniche di progettazione e sviluppo, ci sono alcuni buoni strumenti che possono aiutarci. Trovo che questi strumenti siano particolarmente adatti alla pratica e alla comprensione visiva di più sulla tipografia su una pagina.
Typecast è uno strumento straordinario per i progettisti: non solo ti consente di giocare con migliaia di tipi di carattere o combinazioni di font diversi, ma ci aiuta anche nella composizione e nella formazione di una linea di base corretta. Trovo che mi immergo sempre in questo prima di ogni altra cosa quando sto iniziando a guardare la tipografia nel mio design.
La scala modulare è un'altra piccola tecnica che può essere sfruttata o utilizzata nella progettazione con la tipografia, come descritto in A List Apart
una scala modulare è una sequenza di numeri che si correlano tra loro in modo significativo.
Tim Brown
Questi numeri possono essere utilizzati (attraverso molti esperimenti e cambi e cambi) nei tuoi progetti, se lo desideri. Almeno vale la pena dare un'occhiata e giocare - e può aiutarti a prendere decisioni più informate su cose come la larghezza dei contenitori, e come questi altri numeri possono anche avere un ruolo nel tuo ritmo verticale.
Se sei un fan del design nel browser, o vuoi solo assicurarti che le linee di base che hai progettato altrove seguano quando inizi la codifica, allora usare uno di questi due plug-in JavaScript ti aiuterà a verificare come è la tua linea di base eseguendo il codice. Il primo (Basehold.it), di Dan Eden e Michael Wright, ti offre una sovrapposizione JavaScript sulla tua pagina web, mentre Baseline.js di Dan Eden ti offre un modo per gestire le immagini sulla tua pagina, se sono necessarie.
Per questo compito, voglio semplicemente giocare con una griglia di base - sia che si tratti di una versione di prova in Typecast, utilizzando uno dei suddetti plug-in JavaScript o semplicemente creando una griglia di base in Photoshop o un'altra app grafica è totalmente in tu. Una volta che hai una griglia di partenza pronta, inizia a inserire i principi di questo articolo; inserisci alcuni dei tuoi contenuti e inizia a calcolare le dimensioni e le dimensioni dei caratteri che desideri utilizzare.
Una volta che li hai messi a posto, inizia a guardare come questi si legano insieme alla tua griglia di riferimento. Se non l'hai mai fatto prima, può essere un bel po 'di lavoro per capirlo - ma vale la pena prendersi il tempo per capire esattamente come funzionano. Dopodiché, sarai in grado di iniziare a integrare un buon ritmo verticale nei progetti del tuo sito web molto più facilmente - e i tuoi utenti ti ringrazieranno!
Accentsconagua