Le regole della reattiva tipografia Web

La tipografia Web reattiva è dura, è necessario avere entrambe le costolette di design e il know-how tecnico. Ma comunque complicato potrebbe essere, ottenendo che non è sbagliato non è un'opzione, perché la tipografia è la pietra angolare del web design.

Come si ottiene il design e il codice giusto? In che modo i tuoi sviluppatori comunicano con i progettisti di spinta dei pixel? Come possono i tuoi progettisti rendono gli sviluppatori non achalant a cura della tipografia? Il modo più veloce e più semplice è quello di ottenere i tuoi designer e gli sviluppatori a parlare della stessa lingua, rispettarsi l'un l'altro per il loro mestiere e cercare di comprendere sia i principi che i limiti della tipografia web.

Questo articolo ha lo scopo di fornire stilisti e sviluppatori la fondazione da cui iniziare la comunicazione sull'argomento della tipografia. Copriremo i necessari principi di progettazione ed esploramo soluzioni pratiche per tipografia reattiva .

Cos'è una buona tipografia?

'Buono' è sempre soggettivo; Non è un'ancora fissa che possiamo cerniere le comunicazioni. Per i designer e gli sviluppatori per comunicare efficacemente, dobbiamo iniziare parlando di un comune denominatore che entrambe le parti possono capire. Quel denominatore è lo scopo della tipografia.

La tipografia è l'aspetto del testo; Stiamo vestendo il testo. Lo scopo della medicazione è rendere la chiusura accattivante abbastanza per attirare una conversazione, ma non tenere tanta attenzione che l'altra parte diventa distratta dalla conversazione.

Allo stesso modo, lo scopo della tipografia è quello di consentire ai lettori di concentrarsi e immergersi nel contenuto del testo. Una buona tipografia, per definizione, è la tipografia che aiuta il testo a soddisfare il suo scopo della comunicazione.

Due cose devono accadere per i lettori di concentrarsi e immergersi nel testo. Innanzitutto, la tipografia deve trasmettere l'emozione appropriata (se presente). In secondo luogo, il testo deve essere facile da leggere. Questo ci porta a quattro proprietà essenziali necessarie per avere ragione.

• Famiglia di font
• Dimensione del font
• Altezza della linea (chiamata anche leader)
• Larghezza del testo (chiamata anche misure di testo)

Ottenere la Famiglia Font giusta aiuta le emozioni sottostanti del testo. Ottenere le altre tre proprietà giuste assicura che il tuo testo sia facile da leggere. Per la maggior parte, i designer sono eccellenti nel trovare la famiglia giusta. Quindi, per il resto di questo articolo ci concentreremo sugli altri tre fattori.

L'arte del testo leggibile

Il primo passo in qualsiasi progetto è impostare il dimensione del font , altezza della linea e larghezza del tuo testo del corpo. Questo processo è chiamato composizione. Inizia composto da una pagina con una pagina che contiene informazioni di cui all'utente. Per quanto possibile, questa pagina dovrebbe contenere più elementi, come H1, H2, H3, testo del corpo e didascalie, per i quali devi fare una scelta consapevole su ciò che funziona per il tuo design. Più elementi contiene la tua pagina, meglio è le tue possibilità di impostare uno schema di tipo che funziona attraverso la tavola.

Quando selezioni il dimensione del font , altezza della linea E misura per il tuo testo del corpo, assicurati di utilizzare contenuti reali. Se non si dispone di contenuti reali, usa il testo da Wikipedia anziché Lorem Ipsum.

Devi anche metterti nella stessa situazione per cui ti sei composto, perché la distanza tra gli occhi di un lettore e lo schermo è diverso per diversi dispositivi. Se sei composto da un dispositivo mobile, guarda l'output tramite un telefono. Se stai scrivendo per un laptop, siediti alla tua scrivania con il tuo laptop, e così via.

Una volta che ti sei sistemato nell'ambiente giusto, avviare il tuo processo di composizione prima selezionando dimensione del font , seguito da misura e infine altezza della linea . Tenere presente che non c'è una combinazione perfetta - basta guardare altre pagine che senti avere una buona tipografia e vedrai che nessuno di loro usa lo stesso dimensione del font , altezza della linea e misura. Quindi, quello che stai puntando è semplicemente un testo che è facile da leggere.

L'impostazione delle dimensioni giuste è più difficile da spiegare per scrivere, quindi ho fatto alcuni video per aiutarti con dimensione del font , misurare e Leader .

Ecco alcune linee guida rapide per aiutarti a garantire una buona dimensione del carattere, leader e misura.

Il tuo carattere è troppo piccolo se:

• Devi concentrarti per leggere il testo
• Devi socchiudere gli occhi
• Hai l'impulso di ingrandire

Il tuo carattere è troppo grande se:

• Inizi a notare le schede letterie invece di leggere il contenuto
• Puoi solo leggere da una a tre parole alla volta
• Hai l'impulso di ingrandire

La tua misura del testo è troppo lunga se:

• Devi girare la testa per leggere il testo
• Perdi la concentrazione a metà strada

La tua misura del testo è troppo breve se:

• Ti senti irritato quando il testo si interrompe alla riga successiva
• I tuoi occhi si stancano dal rimbalzo a sinistra ea destra rapidamente

Il tuo leader è troppo stretto se:

• Il testo si sente denso e travolgente
• Leggi accidentalmente la linea sbagliata del testo

Il tuo principale è troppo grande se:

• Ti distratti dallo spazio bianco tra le file di parole

Ricorda sempre la definizione di buona tipografia: non sei dopo la perfezione, stai semplicemente rotando per il testo che è facile da leggere. Mentre lo farai, vorrai testare le tue scelte di comodità con il tuo pubblico (amici e collaboratori fanno grandi tester) per assicurarti di essere giusto. Sposta solo per impostare le dimensioni di altri elementi quando hai finito di comporre il testo del corpo.

Comporre altri elementi

Molti designer e sviluppatori hanno scelto il dimensione del font Per elementi come H1 e H2 visivamente, e spero semplicemente che questi numeri magici funzionino bene nel loro design. Ma non c'è bisogno di tirare solo numeri di aria sottile; I tipografi hanno utilizzato scale tipografiche per secoli per aiutare con questo. Quello che fai è scegliere un numero dalla scala di tipografia come la dimensione del tuo elemento. Sfortunatamente, queste scale non possono essere utilizzate direttamente per il Web perché sono costruite per la progettazione di stampa.

Tim Brown, un esperto nel campo della tipografia, ha trovato una soluzione chiamata scala modulare. Funziona esattamente come una scala di tipografia, tranne che costruisci la scala modulare con il testo del corpo che hai deciso.

Per creare la scala modulare, prendi il testo del corpo dimensione del font (chiamato anche il carattere di base) e moltiplicarlo da un rapporto numerose volte fino a quando non si ottiene una scala. Spesso, il rapporto che usi è derivato dalla musica (poiché la musica ha radici in armonia). Sopra è un esempio di una scala creata con l'aiuto di a Calcolatore di scala modulare .

Quando hai finito di costruire la scala modulare, puoi passare a comporre il resto dei tuoi elementi, selezionando un numero dalla scala come il tuo dimensione del font . Quindi impostare il principio e misura con lo stesso processo fino a ottenere un buon equilibrio di elementi leggibili.

Ritmo verticale

Il prossimo passo è aiutare a gelificare insieme i singoli elementi usando una tecnica chiamata ritmo verticale. Per un elemento fluire armoniosamente nel prossimo, abbiamo bisogno di modificare la cosa che si unisce a: lo spazio bianco. Questo spazio bianco deve essere abbastanza grande da differenziare un elemento dal prossimo distintamente, ma deve essere abbastanza piccolo da garantire che il flusso non sia rotto.

Quanto spazio bianco dovresti usare? Molti designer scelgono una figura come 10px che è facile per loro progettare. Molti sviluppatori, d'altra parte, tendono a frustare un numero casuale (come 6px) sia da un altro sistema di griglia che da un articolo che hanno letto online. Non c'è da stupirsi che questi due non possano comunicare.

Come puoi immaginare, non è necessario fare affidamento su un numero magico per lo spazio bianco; Possiamo usare un multiplo del altezza della linea Valore del nostro testo del corpo. Questo perché riconosciamo istintivamente i modelli dello spazio bianco all'interno del testo. Più forte è il modello, il più sicuro che riteniamo, e più facile è lasciare che le nostre menti vagino nel contenuto.

Per usare il ritmo verticale, tutto ciò che fai è:

1. Imposta lo spazio bianco tra elementi a un multiplo della base altezza della linea
2. Impostare il altezza della linea di tutti gli altri elementi a un multiplo della base altezza della linea

Il multiplo in questione non deve essere un numero intero. È possibile utilizzare valori come 0,5x e 1.25x della base altezza della linea per fornirti più flessibilità. Questi valori funzionano perché il ritmo verticale utilizza il principio della ripetizione.

Griglia di base o no?

Ogni volta che menzioniamo il ritmo verticale, il concetto di una griglia di base entra inevitabilmente nella foto. Sebbene la griglia di base possa essere potenzialmente utile, è per lo più un relitto del treno perché i principianti focalizzano così tanta energia per rendere il testo si siede tra (o on) le linee di base che sentono impossibili da ottenere il ritmo verticale.

Onestamente, non riceverai mai le griglie di base per funzionare perfettamente sul web perché la matematica in tipografia contiene sempre sottocoppixel (come 24.8px) e tutti i browser gestiscono i sottopixel in modo diverso. Ad esempio, alcuni browser causano che ogni elemento nella pagina sia spento da 1px. Questi errori 1PX accumulano e spingono eventuali elementi posizionati in basso la pagina anche oltre la griglia. Di conseguenza, consiglio di utilizzare una griglia di base.

Andando avanti, entriamo nel regno delle pratiche reagive e progettando per più schermi.

Tipografia per schermi multipli

La progettazione della tipografia per schermi multipli non è un'impresa media. Ci sono tre cose che dobbiamo fare da una prospettiva di progettazione.

Innanzitutto, la distanza tra gli occhi di un utente e il loro schermo dipende dal tipo di dispositivo che stanno utilizzando. Generalmente, l'utente posizionerà il dispositivo più lontano quando si utilizza uno schermo più grande. Questo fenomeno significa che è necessario aumentare le dimensioni dei font mentre la larghezza del dispositivo aumenta.

In secondo luogo, vogliamo mantenere le proporzioni tra il testo del corpo e altri elementi coerenti. Ciò significa che dobbiamo aumentare le dimensioni di tutti gli elementi mentre aumentiamo le dimensioni del testo del corpo.

In terzo luogo, a interruzioni specifiche che vogliamo aumentare il dimensione del font di elementi specifici (come l'H1) raccogliendo un numero diverso dalla scala modulare. Ciò ci consente di controllare la gerarchia visiva e garantisce che gli elementi garner hanno appena avuto abbastanza attenzione per tirare l'utente per leggere.

Codifica per tipografia reattiva

Sappiamo che dobbiamo aumentare proporzionalmente le nostre taglie di testo. Il modo più semplice per farlo è aumentare il dimensione del font Entro html. selettore. Vogliamo anche usare unità relative per rispettare un utente dimensione del font preferenza.

 HTML {Font-Dimensione: 100%;}
@media (min-width: 40em) {
 HTML {Font-Dimensione: 112,5%;}
} 

Vogliamo anche usare un'unità relativa per altri elementi, quindi scalano secondo l'HTML dimensione del font ( H2. Nell'esempio seguente). Se hai bisogno di cambiare il dimensione del font A un numero diverso nella scala modulare, tutto ciò che fai è cambiare il dimensione del font di conseguenza ( H1. sotto).

 H1 {Font-Dimensione: 2.369Em;}
@media (min-width: 40em) {
 HTML {Font-Dimensione: 3.147em;}
}

H2 {Font-Dimensione: 1.777em;} 

Sebbene il processo sia semplice, i nuovi sviluppatori potrebbero affrontare una tonnellata di mal di testa a causa della matematica coinvolta, motivo per cui consiglio di utilizzare funzioni e mixins per aiutare. Spesso uso SM() dal Biblioteca in scala modulare . Con questo, puoi scrivere MS (4) invece di 3.157em e MS (3) invece di 2.369em .

Un esempio di una funzione che può alleviare il carico del calcolo del ritmo verticale è:

  @Function VR ($ ritmo) {@return $ rithm / 16 * 1rem;} 

Questo vr. La funzione ti consente di scrivere vr (3) Per un multiplo di tre baseline invece di calcolarlo da solo. Per aiutarti (e io stesso) anche oltre, ho creato una libreria di tipografia reattiva chiamata TYPE. .

Unità relative

Tutte le discussioni sulle unità relative terminano con una questione se dovresti usare remà o em. unità. credo che remà e em. Avere i loro casi d'uso unici, e dovresti usarli in diverse circostanze. Ecco due regole che potrebbero aiutarti a scegliere quale unità usare:

1. Uso em. Se la proprietà deve ridimensionare dimensione del font
2. In caso contrario, usare remà

Per ulteriori informazioni sulla scelta tra queste unità, Vedi questo articolo .

Riassunto

In questo articolo hai imparato gli elementi essenziali della tipografia web reattiva. Naturalmente, troverai maggiori dettagli mentre tu tuffino più a fondo, sia in teoria che in implementazione, ma ciò che hai qui copre l'80% di ciò di cui avrai bisogno in un vero progetto. Dotato di questa conoscenza, sei pronto per iniziare a conversare con entrambi i designer e sviluppatori su come progettare e codificare una buona tipografia per il web reattivo.

La tipografia reattiva non è incredibilmente difficile. È semplicemente impegnativo perché hai bisogno di un'enorme quantità di pazienza e diligenza per scoprire principi rilevanti e applicarli in modo che si adatta al web.

Questo articolo è originariamente apparso in Magazine netta . Iscriviti qui .

Articoli Correlati:

• Tipografia web Master accessibile
• Progetta un sito reattivo con il dimensionamento basato su EM
• 10 regole per creare moduli Web user-friendly