5 semplici modi per migliorare la tipografia Web
Il tipo è uno degli elementi più utilizzati del web. Pensaci. A meno che tu non sia YouTube o Flickr, è probabile che i visitatori del tuo sito stiano arrivando per il tuo contenuto testuale, non per l'elegante confezione che lo circonda. Quindi perché i web designer trattano ancora il testo come un elemento secondario?
Una buona tipografia porta ordine alla pagina e aumenta la leggibilità . Permette alle persone di elaborare le informazioni più velocemente.
Un sito più leggibile e leggibile significa visitatori felici. I visitatori felici tornano spesso, acquistano prodotti, lasciano commenti e condividono il sito con gli amici. Scopri perché potrebbe valere la pena di pensarci?
Potrei blaterare per sempre su quanto lontano sia arrivata la tipografia sul web e quanto lontano debba ancora arrivare. Ho spesso rimbalzato tra il web e il design di stampa. Quando passi da InDesign a TextMate, le limitazioni del tipo di web sono chiare .
Ma è stato detto molto su ciò che il web type non può fare. Questo non sarà un altro sproloquio. Concentriamoci invece su 5 semplici correzioni per i morsi tipografici che abbondano sul Web.
1. Usa A Stylesheet Resetta
Stupido, ma vero: non esistono due browser che utilizzano le stesse impostazioni di default della presentazione. Le differenze di padding, margini, intestazioni e rientranze sono dilaganti. Se desideri che il layout della tua pagina sia più coerente nei vari browser, vale la pena iniziare con un foglio di stile CSS Reset.
Due raccomando:
Stiliheet di ripristino CSS di Yahoo
Il foglio di stile CSS Reset di Eric Meyer
2. Guarda la tua misura
Misura si riferisce alla lunghezza di una singola riga di tipo. Una linea più lunga = una misura più lunga. Gli studi hanno dimostrato che per una leggibilità ottimale, l'esecuzione di colonne di testo come la copia del corpo principale deve essere compresa tra 45 e 75 caratteri (30 - 50 em), compresi gli spazi . Questo è uno dei motivi per cui i disegni fluidi (quelli in cui le colonne si espandono e si contraggono per adattarsi alla larghezza del browser) sono più difficili per gli occhi.
Inoltre, il tuo vantaggio dovrebbe aumentare con la lunghezza della tua misura . L'interlinea è la quantità di spazio bianco tra le righe di testo ed è controllata tramite la proprietà altezza riga CSS. Se hai bisogno di usare una misura extra lunga, assicurati che il tuo vantaggio si apra.
Allo stesso modo, se hai una colonna piccola come una barra laterale con una misura corta, la tua guida dovrebbe essere più stretta. Trovo il valore predefinito che la maggior parte dei browser assegna è un po 'troppo stretto. Un'altezza della linea di circa 1,4em funziona bene per la maggior parte del contenuto corporeo.
3. Tendono allo spazio tra
Non riguarda solo il tuo testo, è lo spazio che lo circonda. Troppo poco spazio rende il testo difficile da leggere, ma lo fa anche troppo. La chiave è trovare un semplice equilibrio che guida l'occhio da un elemento all'altro.
Uno degli errori più comuni che fanno i nuovi designer è quello di riempire ogni centimetro di spazio. Lo spazio bianco si riferisce allo spazio vuoto o "negativo" attorno al tuo contenuto ed è fondamentale. Dai uno sguardo ad una rivista ben progettata come Dwell o Good e vedrai che anche se costa ai soldi dei publisher stampare ogni pagina, lasciano una quantità abbondante di spazio bianco attorno al testo. La pagina sarà in equilibrio e l'occhio si sposterà dallo spazio allo spazio in modo efficace.
Oltre a regolare l'altezza della linea (come indicato in # 1), prova ad aumentare il riempimento e i margini . A meno che tu non stia provando a tirare fuori un trucco visivo pazzo, ci dovrebbe sempre essere una buona quantità di spazio bianco attorno al tuo testo. Non farlo scontrare con altri elementi, specialmente con le immagini. Respira i tuoi pezzi di contenuto (titoli, paragrafi, barre laterali, ecc.).
Mark Boulton ha scritto un articolo molto informativo su Spazio bianco per A List Apart, dai un'occhiata.
4. Do not Go Font Crazy
Una buona regola empirica per ogni designer è: non usare più di due font facce nel tuo design. Le due facce dei caratteri possono sembrare molto eleganti. Un elenco a parte usa le varianti di Georgia e Verdana per creare un look elegante e raffinato. Ma continuare ad aggiungere i font alla tua interfaccia crea inutili confusioni. Allo stesso modo, evita di usare troppe dimensioni, colori o trattamenti di font in una pagina o in un paragrafo o si confronteranno tra loro invece di aggiungere enfasi come previsto.
Sebbene pile di font e tecnologie come sIFR e Typeface.js ti permettono di specificare praticamente qualsiasi font che vuoi come predefinito, resisti alla tentazione di scatenarti con la copia del corpo. Caratteri decorativi è meglio mantenere i titoli perché influiscono sulla leggibilità. Pensaci - quand'è l'ultima volta che hai raccolto un romanzo tascabile ambientato interamente in Comic Sans?
Quando crei stack di font, fai attenzione alle dimensioni dei tuoi abbinamenti. Alcuni tipi di carattere che sembrano simili vengono visualizzati con dimensioni molto diverse. Verdana e Arial ne sono un ottimo esempio. Typetester è un ottimo strumento per confrontare i principali web font e creare uno stack di successo. Un altro strumento utile chiamato Font Stack Builder mostra quale percentuale di utenti vedrà ogni variazione.
Indipendentemente da quali caratteri decidi di utilizzare, assicurati che non siano piccoli. So che è difficile ... un testo minuscolo sembra interessante. Ma pensa ai poveri, gli utenti che guardano gli occhi! Mantieni il corpo del testo sopra 10 o 12 pixel. Se insisti su teeny tiny, almeno usa il dimensionamento relativo per tutti quegli utenti di IE 6.0 che altrimenti non potrebbero renderlo più grande. Leggere L'articolo di Wilson Miner sulle dimensioni dei caratteri per una grande presa sul dibattito.
5) Non trascurare i dettagli
Il cliente ha fornito il contenuto. Aggiungerlo al sito è solo una questione di copia e incolla, giusto? Sbagliato, sbagliato, sbagliato. Questa è una trappola che i web designer cadono troppo spesso.
Anche quelli di noi che aggiungono diligentemente tag di intestazione, formattano ogni paragrafo e organizzano elenchi puntati con cura dimentica alcuni importanti dettagli tipografici. Molti (incluso me) non hanno seguito un corso di tipografia formale, quindi non puoi biasimarci completamente. Ma il diavolo è nei dettagli. È tempo di abbracciare queste basi:
Usa le virgolette intelligenti
Qual è la differenza tra citazioni intelligenti e citazioni stupide? Le virgolette intelligenti (conosciute anche come libri o ricci ) sono curve e hanno uno stile di apertura e chiusura. Le virgolette ( dritte ) di solito sono dirette su e giù. Un apostrofo è tipograficamente una singola citazione, quindi si applica lo stesso problema. Una citazione stupida (chiamata anche un primo ) dovrebbe essere utilizzata solo tra le misure. Ad esempio, 6'4 "utilizza virgolette doppie e singole prime.
Sfortunatamente le nostre tastiere hanno impostato automaticamente le virgolette. Microsoft Word e altri editor di testo li correggono semplicemente per noi mentre scriviamo. L'aggiunta di citazioni intelligenti a pagine HTML richiede più lavoro da parte dello sviluppatore web perché è necessario utilizzare la marcatura per produrre simboli di virgolette di apertura e chiusura. Vedo lo stesso problema con em e en-dashes, ellissi, marchi e simboli di copyright. I coders prendono la via più semplice sostituendoli con trattini, periodi multipli, una grande TM e il famigerato (C). Usare i simboli giusti fa una differenza visivamente. Fai bene e fai sorridere gli editori ovunque.
Come fare citazioni intelligenti:
#8216; = apri virgoletta singola
’ = chiusura singola citazione
“ = apertura doppia citazione
” = chiusura doppia citazione
Lo so - nessuno vuole passare tutto il giorno a cercare le virgolette. Fortunatamente, strumenti come Smartypants e Textism puoi eseguire gran parte del lavoro svolto per te formattando automaticamente il testo che include citazioni intelligenti e simili.
Leggere "I problemi con EM e EN" da una lista A parte ulteriori dettagli sull'argomento e la codifica dei caratteri UTF-8 per i caratteri speciali più comuni.
Un avvertimento: molti editor di testo CMS (come quello utilizzato da questo sito) non consentono di implementare preventivi intelligenti senza plug-in aggiuntivi. Triste ma vero.
Smettere di mettere due spazi dopo un periodo. Per favore! Non è necessario e in realtà è piuttosto fastidioso.
Nei tuoi link, usa border-bottom: 1px solido invece di text-decoration: underline . Le sottolineature possono scorrere attraverso i caratteri del discensore (g, j, p, q, y) rendendole difficili da leggere, specialmente quando si usano dimensioni dei caratteri più piccole.
E mentre non ha nulla a che fare con la tipografia, eseguire un rapido controllo ortografico non ha mai ucciso nessuno . Anche se tutto ciò che hai fatto è stato il copia e incolla, un errore di ortografia che sfugge a un sito dal vivo riflette male su tutti i soggetti coinvolti.
Presta attenzione a queste 5 correzioni e i tuoi progetti del sito miglioreranno sicuramente. Ricorda che questi sono solo un punto di partenza. La buona tipografia è un'abilità appresa proprio come qualsiasi altra cosa, e richiede studio e pratica . Tieni sempre d'occhio i siti che stanno facendo bene e prendi nota di ciò che stanno facendo. Hai bisogno di ispirazione? Dai uno sguardo ai seguenti siti per esempi di grande tipografia web e esempi di post che ritieni siano di ispirazione.
Inspirational Type:
- Sottrazione
- Un elenco a parte
- Architetti dell'informazione
- Jon Tangerine
- Progettare le notizie
- Andy Rutledge
Scritto esclusivamente per WDD da Mindy Wagner.
Cosa ne pensi di questi semplici modi per migliorare la tua tipografia? Li realizzi sui tuoi siti web? Ci piacerebbe sentirti!