Quindi ami la tipografia, chi non lo fa in questi giorni? La domanda è: quanto sei scortese quando si tratta di implementare il tipo nei tuoi progetti?
Oggi stiamo tracciando alcuni consigli di tipografia grandi e semplici che tutti quelli che lavorano con il tipo dovrebbero sapere. Che tu sia un esperto o un principiante, continua a leggere per vedere se sei colpevole di una qualsiasi di queste trappole.
Non: lascia Photoshop Kern al tuo testo
Questo principio è la tipografia 101. Photoshop è un ottimo strumento, ma esso e tutti gli altri software con uno strumento di tipo non sono adatti per quegli ambiti pazzi impiantati nella parte anteriore del tuo viso (i tuoi occhi).
Il software utilizza un algoritmo per trovare una migliore ipotesi? per come una sezione di tipografia dovrebbe essere crenata. In alcune app, puoi scegliere tra un paio di versioni diverse di questo. Ad esempio, Photoshop e Illustrator ti consentono di scegliere tra una? Metrica? e un? Ottico? modalità.
Questa è una buona opzione da sperimentare frequentemente per vari blocchi di testo. Non ho trovato che una delle opzioni funzioni meglio nel 100% dei casi, in realtà dipende dalle lettere e dal carattere tipografico usati.
Un'altra cosa da tenere a mente è che i diversi tipi di carattere richiedono diverse esigenze di crenatura. Per testare la crenatura in un font, scrivo spesso la parola maiuscola? LAVA? in modo che io possa avere un'idea di alcune delle tipiche aree problematiche.
Do: Kern Manually
Le modalità multiple di crenatura automatica sono buone, ma per testi veramente importanti, è sempre meglio guardarla con attenzione.
Tieni presente che ho detto:? Testo davvero importante? Se stai lavorando con paragrafi di grandi dimensioni, è più utile modificare l'intera area di testo rispetto alle singole coppie di kern. Certo, potevi entrare e cernere manualmente ogni parola, ma sarebbe un esercizio insensato. Tuttavia, se stai creando il logo, vale la pena dedicare del tempo extra per assicurarti che ogni singola lettera sia posizionata perfettamente.
Non: utilizzare la sottolineatura predefinita
Ho citato alcune volte su Design Shack che, mentre sono a favore dell'uso delle linee per aggiungere un certo interesse visivo a un design, non sono sicuramente un fan della funzione di sottolineatura predefinita nella maggior parte delle applicazioni.
Il testo nell'esempio sopra è stato creato usando il comando di sottolineatura di testo di Photoshop. Come puoi vedere, è terribilmente imbarazzante, specialmente se combinato con discendenti.
Do: Get Creative With Underlines
Proprio come il kerning, le sottolineature sono spesso le migliori quando vengono gestite manualmente. Quando estrai un tratto, hai il controllo completo della personalizzazione. È possibile modificare il peso del tratto, creare un doppio tratto, estendere la sottolineatura oltre la parola o persino trasformare la linea in forme interessanti.
Un trucco che uso abbastanza spesso con le sottolineature sta creando un piccolo incavo per i discensori come visto nel secondo esempio sopra. Non è affatto una regola che sottolinea non può intersecare discendenti, preferisco semplicemente come appare quando si evita l'incontro dei due.
Non: utilizzare i caratteri ornati per la copia del corpo
Questo è un errore classico che i nuovi designer e non designer fanno costantemente. I font sono un modo semplice per iniettare divertimento e personalità in un design, quindi la tentazione di utilizzare caratteri tipografici interessanti è quasi insopportabile.
Il problema è che molte persone non sanno come implementare correttamente un font dall'aspetto unico. Prendi il seguente esempio.
Qui ho usato il carattere di Lobster molto popolare in un modo che ho visto su siti reali. Il problema dovrebbe essere ovvio, il paragrafo potrebbe sembrare stravagante ma ti ci vorrà un'eternità da leggere.
Inoltre, c'è una mancanza di contrasto tra il titolo e la copia del corpo. Certo, sono di dimensioni diverse, ma prendere in considerazione l'audacia è altrettanto importante.
Esegui: utilizza i font di font orntate per i titoli
Nell'esempio seguente, ho risolto il problema. Usiamo ancora il nostro carattere pazzo, ma invece di travolgere il lettore con esso, siamo più selettivi.
Si noti che i nostri due elementi di testo sono molto contrastanti ora. Il titolo è grande, il paragrafo è piccolo. Il titolo è in grassetto, il paragrafo è sottile. Il titolo è stravagante, il paragrafo è chiaro. Le differenze vanno avanti e avanti.
La chiave qui è che gli elementi di design attraenti sono apprezzati in piccole dosi. Usa un carattere creativo in un titolo e penserò che tu sia un designer decente, usalo ovunque e penserò che non hai idea di cosa stai facendo.
No: usa Cufon per la sostituzione del testo
Questo è un dibattito di cui ho già parlato in passato e, nonostante il respingimento, mantengo fermamente la mia posizione. Ero abituato a pensare che Cufon fosse un'ottima soluzione, ma le pratiche moderne si sono davvero spostate sui CSS.
Cufon ha alcuni grossi inconvenienti. Per cominciare, è uno script di sostituzione del testo basato su JavaScript. Certo, sono un grande fan di JavaScript per quasi tutto, ma non sono sicuro che sia necessario qui quando i CSS hanno una soluzione solida (anche se io uso Google Web Fonts quindi forse sono un ipocrita).
Ancora più importante, come utente, noto sempre Cufon perché non riesco a selezionare / copiare / incollare correttamente il testo. È fastidioso vedere il testo dal vivo e quasi avere la possibilità di interagire con esso, ma essere fermato da selezioni buggy.
Do: usa @ font-face
La soluzione CSS è ovviamente @ font-face. È semplice, veloce, facile da usare e funziona con i browser moderni.
Ci sono alcune cose da tenere a mente quando si lavora con @ font-face. Prima di tutto, il "migliore"? la sintassi è cambiata alcune volte. Il preferito preferito dagli sviluppatori web preferiti è la nuova sintassi Font-Face di Bulletproof @ di Fontspring.
Inoltre, anche se @ font-face è la tecnologia preferita per Google Web Fonts, Typekit e altri, non tutti sono favoriti da Cufon. Alcuni puntano a problemi di rendering dei font, specialmente su computer basati su Windows, come una ragione per evitare @ font-face. Per esplorare questo lato dell'argomento, dai un'occhiata a Cufon vs.Font-face: un confronto visivo.
Non: usare finte maiuscolette
L'uso di maiuscoletto può essere un modo divertente per aggiungere una piccola variazione al titolo maiuscole. Fondamentalmente, stai usando tutte le lettere maiuscole ma mantenendo le dimensioni delle lettere simili a quelle che avresti usato nel caso di titolo (la prima lettera è più grande).
La parte più delicata di questo è che il tuo primo istinto su come farlo è sbagliato. Considera l'esempio qui sotto:
Qui ho digitato del testo in lettere maiuscole e poi ho semplicemente ingrandito la prima lettera di ogni parola. Il risultato sono font di dimensioni veramente diverse, il che è abbastanza brutto per l'astuto osservatore. Notare come lo spessore della linea tra i due tipi di lettere sia molto diverso.
Fai: usa un carattere con maiuscoletto
La soluzione più ovvia a questo problema è utilizzare un font che è stato effettivamente realizzato con maiuscoletto. Traiano è il caso tipico sovrautilizzato, ma ce ne sono molti altri come Goudy Small Caps e Old Style Figures. Tipi di carattere come questi sono progettati per mantenere un aspetto coerente nonostante le diverse dimensioni delle lettere.
Se hai bisogno di una via di mezzo, Photoshop e Illustrator hanno entrambi un? Maiuscoletto? opzione integrata nella tavolozza dei caratteri. Questo è in mostra nel "Better Small Caps"? esempio sopra. Si noti come le lettere siano molto più coerenti rispetto al primo esempio in cui ho provato la stessa cosa manualmente.
Con alcuni font di vecchio stile, la funzionalità di maiuscoletto può funzionare in modo abbastanza decente. Tuttavia, i risultati possono essere altrettanto poveri o peggiori rispetto agli sforzi manuali su altri tipi di carattere. Ad esempio, ecco cosa succede quando si tenta di utilizzare la funzione su Helvetica.
Come puoi vedere, siamo tornati a una notevole mancanza di coerenza nella larghezza del tratto. Il mio miglior consiglio è di provare sempre ad usare maiuscoletto in congiunzione con un font che lo ha incorporato. Se questa non è un'opzione, prova ad usare la funzione software per le maiuscoletto e testando il risultato per vedere se è accettabile.
Torna per la seconda parte!
Grazie per aver letto le nostre 5 cose da fare e da non fare che tutti dovrebbero sapere. La sorpresa è che ne abbiamo ancora cinque in arrivo! Torna più tardi questa settimana per la conclusione che contiene alcuni errori più classici e come evitarli.
Nel frattempo, lascia un commento e facci sapere quali sono i tuoi errori personali di tipografia e quali errori sei colpevole di aver commesso.