Comprendere la scrittura tipografica per il web
In Web Design l'argomento della tipografia è importante quando si considerano tutte le aree dell'esperienza utente. Ogni sito web ha bisogno di testo e ci sono linee guida che puoi seguire per creare layout straordinari. Gridline, caratteri, altezza del carattere, spaziatura del testo, combinazioni di colori e altre proprietà simili dovrebbero essere tutti presi in considerazione.
In questo articolo mi piacerebbe approfondire il regno della tipografia web. Noi esamineremo idee popolari dietro la progettazione di testi di pagine web credibili. Lungo la strada ne introdurrò alcuni utili proprietà CSS3 che i progettisti spesso dimenticano.
Ho cercato di concentrarmi maggiormente sulla teoria e le ideologie per il web. Ciò conferisce maggiore attenzione al testo digitale in generale e tu, il web designer, puoi scegliere quali stili applicare per quale scopo. Il contesto è sempre fondamentale e devi determinarlo in modo appropriato per ogni progetto su cui lavori. Considera questa guida un pacchetto di riferimento pieno zeppo di tendenze del web moderno da innovatori tipografici di tutto il pianeta.
Misura i tuoi paragrafi
Non avrai bisogno di sbarazzarti del bastone del cantiere per questo tipo di misurazione. In realtà la misura in relazione alla tipografia si riferisce alla larghezza (in orizzontale) di un dato paragrafo sulla tua pagina. Non è un argomento sempre discusso, ma influenza la leggibilità dei tuoi contenuti. Come regola generale, si desidera limitare qualsiasi singola riga di circa 75-85 caratteri (non includendo necessariamente spazi).
Ora, questo può sembrare un po 'allungato per alcuni layout più ampi. Soprattutto se il tuo design è fluido e pensato per adattarsi mentre l'utente ridimensiona la finestra del browser. Puoi sempre impostare un CSS larghezza massima proprietà sul tuo contenuto principale div. I margini di codifica e le dimensioni dei caratteri in unità scalabili (percentuali, ems) piuttosto che pixel consentiranno una tale flessibilità all'interno di qualsiasi layout.
Non c'è nessuna unità di misura massima su cui diffidare. Il modo in cui scrivi contenuti e forma parole in frasi è molto più importante della larghezza di ogni riga. Ma tieni presente che frasi più lunghe sono molto più difficili da leggere rispetto alle affermazioni più brevi e concise.
Spiegato da capo
Nel progettare, insieme alla misura del paragrafo, dovresti considerare anche l'idea di principale. La parola è pronunciata “ledd-ing”, come il piombo usato nelle matite. Questo nome deriva dai vecchi tempi della composizione meccanica in cui erano posizionate strisce di piombo tra le righe di testo.
Dirigere è ancora un concetto molto importante nel web design e va di pari passo con le misure del paragrafo. All'aumentare della larghezza del paragrafo si dovrebbe applicare un aumento uguale alla quantità di vantaggio, o spazio tra le righe di testo. Questo spazio in più rende la lettura molto più semplice ai tuoi occhi.
Se si dovesse sfogliare il testo molto avvolto, potrebbe risultare difficile focalizzarsi su una singola riga. Se questo è il caso, prova ad aumentare la quantità di lead con il CSS altezza della linea proprietà. Desideri sempre più spazio tra le righe di testo che tra le parole. Altrimenti i blocchi di testo potrebbero apparire come una stampa di giornale e non saranno molto user-friendly da sfogliare.
Una tecnica solida consiste nell'applicare più spazio del necessario e ridurlo se necessario. Non tutto il testo è stato creato uguale e avrai sicuramente bisogno di paragrafi con una formattazione interna diversa, come parole in grassetto, link di ancoraggio, sottolineature, ecc. Con alcuni extra, questi cambiamenti non saranno così sbilanciati rispetto all'altro testo.
Usa le dimensioni dei caratteri naturali
Ci sono ancora una manciata di siti Web che scelgono di restare con dimensioni dei caratteri più piccole della media. 11px-12px può sembrare molto più del “professionista standard” per i layout aziendali. Ma queste dimensioni non aiutano la maggior parte dei visitatori che cercano informazioni specifiche.
In genere i browser Web vengono impostati su 16px se non si applicano regole CSS. Anche questo può essere considerato un po 'piccolo se si dispone della stanza in più nel layout per contenere testo più grande. Le dimensioni dei caratteri più grandi sembrano più belle e sono molto più semplici da sfogliare per le relative parole chiave. I font Serif non sono spesso scelti come materiale di paragrafo, ma puoi comunque farli franca. Suggerisco di utilizzare dimensioni di testo molto più grandi per i caratteri basati su serif per migliorare la leggibilità e attirare l'attenzione.
Rispondere all'ambiente dell'utente
Mentre provi diverse famiglie di font e dimensioni, l'area del tuo contenuto dovrà adattarsi di conseguenza. L'unità standard con cui mi aggrappo è ems in quanto possono facilmente ridimensionare in base allo spazio disponibile e alla risoluzione dello schermo. Questo ottimizza le prestazioni per l'utente che è più importante.
Ma quando hai contenuti così flessibili, il tuo layout è incline a un risultato buggato. In alcuni browser il contenuto nell'area dei piedi o nella barra laterale potrebbe risultare distorto o sbilanciato. Oppure potresti avere difficoltà a mettere in fila immagini o altre forme di media all'interno del testo principale. Ci sono altre alternative all'utilizzo di ems se hai bisogno di un layout in stile fisso, ma prova entrambe le soluzioni per vedere quale ti piace di più.
Ricorda che le larghezze fisse e le dimensioni dei paragrafi bloccano molte delle impostazioni del tuo disegno. È fantastico per i contenuti che includono molti effetti estetici stazionari: immagini di sfondo o molti widget di barre laterali su misura. È anche un processo semplice per costruire un'area di contenuto fluido nella colonna di sinistra con barre laterali fisse a destra.
Stile basato sul contesto
Alcuni altri trucchi CSS davvero accurati sono stati nascosti al design tradizionale. In particolare ci sono tendenze copiate dal lavoro di stampa che possono essere applicate nel contesto corretto.
Molti web designer non hanno mai nemmeno usato la proprietà CSS del rientro del testo. Fornisci un valore per rientrare la prima riga di qualsiasi paragrafo oggetto di questa regola. Le unità seguono le opzioni di testo standard come pixel, punti, ems, percentuali ... Non è certo una tendenza che troverai nella maggior parte dei blog. Ma fornisce un bel ritmo di pagina durante la lettura di grandi blocchi di testo.
C'è un altro tipo di selettore CSS noto come a pseudo elemento. Questo può indirizzare una parte specifica di qualsiasi selettore di contenuti. Il CSS3: lo pseudo-selettore della prima lettera è perfetto per creare stili di fantasia su paragrafi importanti. Puoi ravvivare la lettera di apertura di ogni paragrafo, simile a un libro di fiabe piuttosto onesto, usando grassetto, corsivo o persino cambiando il carattere. Dai un'occhiata a questo bellissimo esempio di capolettera che include alcuni codici CSS aggiuntivi che puoi utilizzare.
Giocando con Letter Spacing
Sono sicuro che molti di noi hanno già sentito il termine "rintracciare", ma non si sono mai resi conto che è la stessa idea della proprietà di interlinea delle lettere CSS. Questi due concetti sono uno nella stessa, correlati tra stampa e tipografia digitale. L'unità si riferisce allo spazio tra le lettere all'interno di una singola riga di testo. Questo è un effetto davvero interessante da applicare alle intestazioni e persino a blocchi di contenuto più piccoli all'interno del tuo sito.
È importante non confondere i termini letter-spaziatura con kerning. Entrambi sono legati alla tipografia e alla distanza tra le lettere. Tuttavia, la crenatura si riferisce specificamente alla distanza tra 2 singole lettere in una parola. La proprietà di spaziatura delle lettere verrà applicata a un intero elemento di testo, che si tratti di una parola o di un paragrafo o di un'intestazione o di un collegamento di ancoraggio. Tienilo a mente quando stai giocando con nuove idee per gli stili.
Uso spesso alcuni pixel / punti di spaziatura delle lettere nelle intestazioni con tutte le maiuscole. Questo rompe i singoli personaggi con qualche spazio in più e appare anche come molto definito “intestazione” Guarda. Anche la spaziatura delle lettere negativa funziona alla grande nel giusto contesto. In genere mi attengo a unità più piccole, forse -0.03em o -0.1em al massimo.
Combinare e abbinare caratteri tipografici
I concetti di design alla base della tipografia web sono certamente una forma d'arte, non tanto di scienza. Ci sono delle linee guida che puoi seguire, ma non ci sono regole costanti alle quali sei limitato. Ciò significa che hai un'enorme libertà di sperimentare il missaggio e la corrispondenza con i diversi tipi di carattere a cui hai accesso.
Di gran lunga la combinazione più popolare di caratteri tipografici include una divisione serif / sans-serif per l'intestazione e il contenuto del paragrafo. Mi piace passare a entrambi, ma più spesso userò font serif nelle sezioni di intestazione. I segni e i tratti in più su ogni lettera li fanno apparire più lusinghieri come il testo della pagina dominante.
Inoltre i caratteri sans-serif sono più puliti e più facili da scrivere insieme nelle frasi. Questo non vuol dire che i caratteri serif non funzioneranno nei paragrafi. In effetti ci sono molti ottimi esempi! Ma un concetto poco noto chiamato x-height è di cruciale importanza per distinguere la complessità di un carattere tipografico. Osservando la linea di base di un paio di parole, capirai come funzioneranno tali caratteri “adattarsi” insieme.
Vale anche la pena notare l'importanza dello spazio tra questi diversi elementi. Probabilmente utilizzerai 2 o 3 stili di intestazione diversi, quindi ognuno di questi apparirà con un aspetto diverso. Tendo a mantenere i miei elementi h2 / h3 un po 'più vicini al seguente blocco di paragrafo, poiché ciò implica che esiste una correlazione tra il contenuto.
Questa correlazione è particolarmente utile quando si utilizzano due tipi di carattere completamente diversi l'uno accanto all'altro. Raccomando non più di 3 diverse famiglie di font per set di contenuti. Dopo troppe personalizzazioni, le tue parole appaiono mescolate e l'intera pagina appare come un miscuglio di caratteri mal interpretati.
Conclusione
Spero che questi concetti facciano luce sul complicato tema della tipografia digitale. Può essere davvero difficile entrare nel lavoro come designer, specialmente se l'argomento è estraneo a te. Ma continua a studiare ed assicurati di praticare un sacco di persone!
La prossima settimana: Restate sintonizzati mentre ne esamineremo alcuni strumenti e risorse utili per una migliore tipografia web.
Di Più…
Ecco altri post relativi alla tipografia:
- Vetrina di Web design con bella tipografia
- Tipografia migliore per siti web moderni
- Guida rapida alla tipografia: impara e lasciati ispirare
