Share
Una buona tipografia può essere la pietra angolare di un web design di successo. Poiché gran parte del design del web è costituito da testo, colpire il segno giusto per la tua tipografia è un fattore chiave per il successo generale del tuo sito. Le sottigliezze della tipografia fine possono essere una cosa difficile da afferrare per i principianti? ma oggi abbiamo 8 consigli che dovrebbero aiutarti a migliorare i tuoi progetti generali.
Come ho detto prima, una buona tipografia può giocare un ruolo vitale nel successo di un web design. Può aiutare a generare una gerarchia visiva. Può rendere il testo più facile da leggere. Come la citazione dall'indirizzo di Steve Jobs 'Stanford inizia sotto note, la tipografia non è un qualche stimolo casuale della decisione del momento, ci sono molti fattori e valori che dovrebbero essere considerati per generare una tipografia su misura che non solo ha un bell'aspetto, ma fornisce il vantaggio funzionale di essere più facile da leggere e prendere il valore da.
Ho deciso di prendere una lezione di calligrafia per imparare come [imparare la calligrafia]. Ho imparato a conoscere i caratteri serif e sans-serif, a variare lo spazio tra le diverse combinazioni di lettere, su ciò che rende grande la grande tipografia. È stato bellissimo. Storico. Artisticamente sottile in un modo che la scienza non può catturare. E l'ho trovato affascinante. Niente di tutto ciò aveva alcuna speranza di alcuna applicazione pratica nella mia vita. Ma 10 anni dopo, quando stavamo progettando il primo computer Macintosh, tutto tornò da me. E abbiamo progettato tutto su Mac. Era il primo computer con una bella tipografia. Se non avessi mai partecipato a quel singolo corso al college, il Mac non avrebbe mai avuto caratteri tipografici multipli o font con proporzioni distanziate. E dal momento che Windows ha appena copiato il Mac, è probabile che nessun computer personale possa averli.
Andremo a classificare i font e come selezionarli in un minuto? ma voglio che tu consideri i caratteri tipografici per te (o il progetto al quale stai lavorando al momento). Certo, puoi usare praticamente qualsiasi carattere tipografico per fare una parola - ma cosa dice realmente quel carattere tipografico sulla parola? Più di ogni altra decisione di progettazione che prendi, le selezioni di tipi che fai danno al tuo sito carattere e contesto. Sceglile attentamente e ti aiuteranno a comunicare con gli spettatori o a distrarli.
Come esempio rapido, esamina le seguenti due varianti della parola "potrebbe" (sotto). Nulla cambia in termini di colore o dimensioni, ma il significato implicito che potresti (har har) togliere cambia drasticamente semplicemente con il carattere tipografico e l'impostazione del caso.
Esistono diverse classi principali di caratteri, ma solo due a cui ci si riferisce principalmente sul web (serif e sans-serif). Il primo è un font che ha serif, piccoli dettagli aggiuntivi sui bordi di ogni lettera, mentre il secondo è sans serif (tradotto senza il serif, per quelli di noi che non capiscono il latino).
Più di ogni altra decisione di progettazione che prendi, le selezioni di tipi che fai danno al tuo sito carattere e contesto.
Entrambi i tipi di carattere possono funzionare bene, sia all'interno di uno schema principalmente di quelli o come una combinazione in alcune circostanze. Tuttavia, sbagliare può dare al tuo web design la sensazione e l'impressione completamente sbagliate, o semplicemente sembrare brutto. Considera i seguenti esempi e il tono portato a ciascun disegno dai caratteri tipografici usati:
Dovresti considerare anche altri aspetti, come se il tuo testo sia leggibile in un font serif piuttosto che in un font sans-serif. Il testo più piccolo verrà generalmente rappresentato meglio in un font sans-serif, purché si giochi bene con alcuni degli altri fattori che menzionerò oggi.
Vale anche la pena notare che l'avvento di Google Fonts, Typekit, CSS @ font-face services e altre tecnologie di sostituzione dei font hanno inaugurato una nuova ondata di caratteri tipografici che potrebbero non rientrare nelle categorie dei soli serif o sans-serif. Considera i seguenti esempi:
Un sito che utilizza molti tipi di caratteri diversi a caso è come una persona che usa molte voci diverse nella stessa conversazione? potrebbe sembrare una buona idea, ma è probabile che finirai per sembrare un pazzo per qualcuno che passa
Conoscenze comuni una volta consigliato ai web designer di scegliere un singolo font e attenersi ad esso, ma spesso può essere molto più interessante dal punto di vista visivo per scegliere 2 o 3 font e usarli (coerentemente e in modo uniforme!) In combinazioni accuratamente elaborate. È qui che mescolare i caratteri serif e sans-serif può davvero diventare interessante. Considera i seguenti esempi e in che modo la diversità del tipo aiuta a dare vita ai disegni:
Si noti che mentre in ogni disegno sono utilizzati più tipi di carattere, questi vengono utilizzati in modo appropriato (il suggerimento 1) e in modo coerente in ogni sito.
Il numero di diversi tipi di carattere può causare problemi di leggibilità e altri problemi generali di progettazione, quindi ciò non significa che solo perché è possibile utilizzare 100 tipi di carattere diversi, è necessario. Ci sono alcuni casi in cui molti font utilizzati contemporaneamente funzionano bene come una dichiarazione artistica, ma è generalmente una buona regola empirica mantenere il numero di font al minimo.
Perché? Una semplice risposta è che un sito che utilizza molti tipi di caratteri diversi a caso è come una persona che usa molte voci diverse nella stessa conversazione? potrebbe sembrare una buona idea, ma è probabile che finirai per sembrare un pazzo per qualcuno che passa. Limitare il numero di caratteri tipografici su un sito aiuta a stabilire la gerarchia e il tono senza esagerare.
Naturalmente, anche la scelta dei caratteri giusti in questa selezione è importante. Alcuni font funzionano bene con altri tipi di caratteri specifici, in particolare quelli che si trovano in categorie simili come serif / sans-serif. Un carattere tipografico lastra potrebbe non corrispondere al carattere ultrasottile che hai messo accanto. Prova diverse combinazioni fino a trovare il giusto 2 o 3 che funzioni per te.
La spaziatura tra le righe può essere un importante ostacolo per un buon schema di tipografia. L'interlinea è proprio questo, la spaziatura delle linee del tuo testo. Spostali più distanti e generalmente diventa molto più leggibile e più facile da guardare. La spaziatura delle linee dovrebbe, come regola generale, essere di circa 0.3em-0.5em più grande della dimensione del carattere, sebbene possa variare a seconda del modello. Anche se questa è una regola empirica, riconoscere che l'interlinea dovrebbe differire in base alla scelta del font in quanto altri caratteri potrebbero richiedere più o meno.
Per capire perché la generosa spaziatura delle linee è un must nella maggior parte dei design, fare riferimento al grafico sottostante per ottenere una comprensione di base. A questo livello, sono entrambi abbastanza leggibili, ma quello distanziato lo è sempre di più perché ogni parola ha più spazio per essere distinta e separata dal resto.
Il concetto di una gerarchia visiva è dove gli elementi che vuoi vedere e percepire dal tuo lettore per primi sono i più importanti, sia che si tratti di colore, dimensioni, tipo di carattere o qualcosa di completamente diverso. La tipografia può giocare fa parte della gerarchia complessiva del tuo sito, ma può effettivamente avere il proprio. L'esempio più semplice per spiegare questo è guardare il testo su un blog e notare come il titolo sia generalmente l'esempio più grande di testo.
È possibile utilizzare diversi fattori per aiutare a creare la propria gerarchia. Il colore è un esempio e gioca piacevolmente in contrasto, per cui gli elementi che vuoi che il tuo utente legga per primi sono i più facili. La dimensione è, forse, il più grande esempio, dato che noterai senza dubbio una massiccia stringa di testo di 10em sul tuo paragrafo standard di 1em.
Macintude utilizza il tema Black Sakura di ThemeForest. Probabilmente vai avanti e leggi il titolo prima di tuffarti nel contenuto, no? Per ulteriori informazioni sulla gerarchia visiva nel web design, vedi l'articolo di Brandon su quello stesso argomento.
La misura è anche un aspetto importante. Misura è la larghezza del tuo testo e un fattore che può determinare se il tuo testo è troppo largo o troppo stretto. La misura generalmente funziona insieme all'interlinea per rendere il testo facile da leggere per l'utente finale, adattando il contenuto alla gamma che l'occhio umano percorre comodamente nel suo viaggio attraverso la pagina.
A meno che il tuo modello non sia specificamente un design stretto o largo, probabilmente vorrai incollare il tuo testo a una larghezza costante che rispetta questa semplice somma matematica: 30 x dimensioni del testo. Usalo come una linea di base accanto al tuo padding e il tuo uso del golden ratio (se dovessi decidere di usarlo) per creare una larghezza che sia abbastanza facile da leggere. Basta non rovinare tutto riducendo l'interlinea o rendendo il testo troppo piccolo.
È un po 'più difficile definire quale buona misura sia, poiché può essere molto diversa tra i diversi progetti. Un testo più ampio potrebbe adattarsi meglio a un design specifico.
Anche l'allineamento del testo è un fattore importante. Di solito ci sono quattro tipi che potresti usare: sinistra, centro, destra e giustificato. La regola d'oro per la tipografia è renderla leggibile e non si ha il pieno controllo su questo se si opta per un allineamento del testo giustificato. Il testo giustificato è basicamente in cui il testo è ottimizzato per riempire l'intera larghezza del tuo elemento creando il rettangolo di testo perfetto. Ciò potrebbe essere buono nei giornali e nella stampa, ma sul web, semplicemente, non funziona così bene. Una linea potrebbe essere molto più stipata di un'altra linea, ma non è qualcosa che puoi controllare in modo specifico.
Certo, potresti aver perfezionato la tua tipografia con una scala del 100%, ma alcuni utenti potrebbero essere visualizzati con la finestra del browser ingrandita o ridotta. Pertanto, la tua tipografia deve essere in grado di scalare bene quando l'utente comanda uno zoom in avanti o indietro. Questo è molto semplice da testare e manipolare, semplicemente ridimensionando il browser.
Prendi nota dei tuoi visitatori con i requisiti di accessibilità, sia dentro che fuori dalla tipografia. Naturalmente, il ridimensionamento può essere utilizzato da chiunque e molto spesso, può essere effettivamente accidentale. Il netbook di mio fratello ha regolarmente la sua finestra di Chrome ingrandita troppo, per puro caso a causa del gesto del trackpad.
Ovviamente, il tipo di zoom prolungato che è possibile nella maggior parte dei browser è solo un tipo. Mac OS X Lion introduce un bellissimo pizzico-to-zoom simile a iOS che ingrandisce una pagina come se fosse un'immagine. Si dovrebbe anche considerare quel tipo di zoom e come appare il loro testo quando viene visualizzato all'interno dello stesso layout, solo a una vista molto più vicina.
In poche parole, il peso di un font è lo spessore. Un carattere può venire in molti pesi, che vanno dall'attaccatura ultra-leggera alla lastra ultra-nera. La modifica del peso di un testo è generalmente utilizzata per aggiungere una definizione sottile per determinare l'importanza, come evidenziare le parole chiave o un paragrafo di apertura, quando viene utilizzato in un paragrafo.
Il peso del carattere può essere utilizzato in molti scenari diversi. Ad esempio, puoi usarlo all'interno di un post per individuare parole chiave o frasi. Distinguere con il peso del carattere significa che è necessario meno caratteri multipli o introdurre altri fattori che potrebbero compromettere la leggibilità.
La tipografia è una parte veramente integrante del design. Quando guardi un blog, noterai quanta parte di testo c'è sulla pagina e quanta influenza avrà sul design nel suo complesso. Questi otto fattori sono i più importanti quando si tratta di tipografia e possono cambiare drasticamente l'estetica del suo design.
Scegliere se i tuoi caratteri tipografici usano i serif è una decisione importante, e il modo di mescolarli è ancora più critico. Il numero di caratteri, lo spazio tra le righe di testo, la misura, l'allineamento e il peso sono tutte caratteristiche importanti. In poche parole, la tua tipografia è qualcosa che dovrebbe essere ben pensato e non solo gettato insieme casualmente.
Accentsconagua