Share
La tipografia è uno degli aspetti più importanti se non il più importante del web design. Alcuni sostengono che ci vuole fino al 95% del web design, quindi perché spesso trascuriamo la sua importanza? I lettori che visitano il tuo sito spesso decideranno se rimanere o meno in base alle tue scelte tipografiche. Dopo tutto, sono venuti qui leggere innanzitutto. Pensaci per un secondo: se il contenuto è davvero re, la tipografia logicamente dovrebbe essere considerata la regina.
Infatti, anche alcuni nomi di font suggeriscono questa classificazione; Futura, Optima, Times New Roman (OK, probabilmente è un tizio), Verdana, Lucida, Georgia, Helvetica ... Non c'è dubbio, la tipografia è la regina. Perciò, anche lei deve essere vestita bene prima di uscire: dovrebbe mettersi un po 'di crenatura e di tracciamento, forse una diversa variante di carattere, e già sembra una vera signora.
Non sei sicuro di cosa sto parlando? Bene, continua a leggere.
Prima di procedere con questo articolo, e soprattutto se non hai molti contatti con la tipografia, ti suggerisco di colmare le lacune della tua conoscenza tipografica da Typedia, prendendo nota delle classificazioni dei caratteri tipografici e dell'anatomia di un carattere tipografico, che ti servirà bene quando crei i tuoi font-stack e i tuoi font accoppiati.
Dopo aver finito di leggere i due articoli su Typedia, torna qui così possiamo stringere la tua conoscenza tipografica appena fondata e prepararla per i prossimi capitoli di questo articolo.
I caratteri tipografici hanno relazioni dinamiche e possono sembrare buoni o cattivi insieme, a seconda di chi sono mescolati e delle loro differenze. Se ci piacerebbe avere dei dettagli tecnici, ci sono in effetti tre modi in cui i caratteri tipografici possono riguardare:
Una relazione concordante è quella senza brividi, in cui due caratteri tipografici sono molto simili nelle caratteristiche. Può anche essere un singolo carattere tipografico in più stili e / o dimensioni.
Quando i caratteri tipografici sono abbastanza diversi l'uno dall'altro, appare il contrasto. Di solito è utile puntare al contrasto, ad esempio, tra un carattere tipografico serif e sans-serif.
Due (o più) caratteri tipografici con caratteristiche diverse che sono ancora abbastanza simili da creare angoscia in una pagina sono in conflitto. Di solito dovresti evitare questo tipo di relazione.
I caratteri tipografici possono variare. Che si tratti di peso, altezza, larghezza o qualsiasi altra cosa, ogni singolo carattere ha alcune caratteristiche che lo contraddistinguono. Dovresti imparare a individuare queste sottigliezze e adattarti alla loro influenza. E non pensare che non abbia importanza, dal momento che anche le varie iterazioni degli stessi tipi di caratteri possono essere significativamente non uguali a volte.
Questo si riferisce specificamente al Web, dove l'arte di creare e applicare stack di font è molto importante. Non è necessario scegliere esattamente i caratteri tipografici identici per una riserva, ma è giusto dire che un font vecchio stile come Garamond deve essere sottoposto a backup da un altro carattere tipografico oldstyle con caratteristiche sensibilmente simili (Caslon, Baskerville, Times, ad esempio).
Sebbene siano tutti serif, Georgia, Garamond e Adobe Garamond Pro (200 punti nell'esempio sopra) sembrano molto diversi.
Un font moderno, come Bodoni Condensed o Bodoni Bold, è una scelta eccellente per i titoli, mentre sarebbe probabilmente un cattivo carattere per le estese linee di copia del corpo, in cui sarebbe solo distrarre il lettore dal contenuto. Un vecchio stile come Garamond (I ♥ Garamond) è una scelta molto migliore per queste situazioni.
I non-designer spesso prendono decisioni sbagliate quando scelgono caratteri tipografici per diverse occasioni e, anche se salterò la lezione di Comic Sans, dovresti essere consapevole del fatto che non è sempre adatto per usare, per esempio, Georgia per la copia del corpo. Non è sempre male usare Arial come carattere tipografico preferito; ma considera quale messaggio stai cercando di trasmettere, tramite la tua tipografia.
Questo articolo non è principalmente una vetrina, ma è sempre interessante osservare ciò che altri designer di talento hanno fatto per rendere i loro siti web (dei clienti) un piacere da guardare. Vedremo cosa si può fare con un'attenta considerazione per la decorazione dei font, così come con stack di font solidi e scelte tipografiche intelligenti.
(P.S. Se ti piacerebbe vedere altri esempi di buona Tipografia on line, sfogliare gli archivi di Typesites. Non ci sono troppi contenuti lì, ma hanno coperto alcuni siti molto buoni.)
Verdana è il carattere più noioso che puoi usare? Non se lo chiedi a Jason Santa Maria. Era intelligente nell'utilizzare la forza di Verdana (altezza X) per fare una copia del corpo di dimensioni piuttosto piccole per un aspetto dignitoso ed elegante che Un elenco a parte merita. Anche le piccole dimensioni lo rendono piacevole da leggere a lungo termine.
La Georgia è principalmente usata per dare enfasi a determinati elementi di pagina e come carattere tipografico di visualizzazione. Da altre importanti decisioni di progettazione, le lettere maiuscole sono di piccole dimensioni e distanziate con lettere positive per una leggibilità più semplice e un aspetto migliore.
Anche Jon Tan, come Khoi Vin e Daniel Mall, segue il culto del design minimalista in bianco e nero con spruzzi d'arancia accuratamente posizionati. Anche se c'è una mancanza di eccitazione nella scelta del colore, si potrebbe dire che Jon compensa prendendo in considerazione le sue scelte tipografiche. Il file CSS di Jontangerine.com contiene più di 250 dichiarazioni diverse per tutti i tipi di micro-tipografia!
La copia del corpo principale è ambientata nell'adorabile Georgia, mentre i titoli centrati appaiono in uno stack di font basato su Times con Baskerville e Palatino:
font-family: baskerville, 'palatino linotype', 'times new roman', serif;
In altre aree, il "colore" tipografico viene ottenuto utilizzando diverse varianti di font, varie tonalità di nero e uno stile di font eccellente. Sicuramente uno dei migliori siti incentrati sulla tipografia!
Probabilmente hai sentito molto parlare dell'incorporazione @ font-face con i CSS negli ultimi mesi. Sebbene Internet Explorer abbia avuto una tecnica simile sin dalla sua quarta iterazione (ci vergogniamo di ammetterlo), solo nel 2009, quando tutti e cinque i grandi browser hanno implementato @ font-face (nel modo giusto), abbiamo iniziato a parlare intensamente sull'utilizzo di webfile non-core online.
Ci sono, come forse saprai, alcuni notevoli inconvenienti di questa tecnica (principalmente problemi di copyright), ma se trovi un font adatto alle tue esigenze, hai tutte le possibilità di migliorare il modo in cui i lettori sperimentano il tuo sito. D. Bnonn Tennant (Information Highwayman) ha deciso di utilizzare Justus per la copia del corpo, che contrasta abbastanza bene con l'elemento di sfondo sans-serif (il "magnum irresistibile") e aiuta a raggiungere l'effetto "logoro" sul sito.
A Elliot piace usare i caratteri tipografici Slab-Serif, che è esemplificato in entrambi i suoi eccellenti 8 volti rivista su Tipografia (lo consiglio vivamente), con FF Unit Slab e il suo sito web, dove FF Tisa Web Pro è incorporato utilizzando il servizio di inclusione dei font di Typekit.
Non c'è tanto stile tipografico sul sito come, per esempio, Jon Tan ha; tuttavia, ha fatto un ottimo lavoro con allineamento e colore, che non dovrebbero mai essere trascurati e sono ingredienti importanti in una buona tipografia.
Anche se stanno rapidamente diventando "vecchie" tecniche di sostituzione, Flash e il testo sostituito da immagini (sia Cufón sia immagini inserite manualmente) invece del testo normale sono importanti per la compatibilità cross-browser in siti i cui visitatori non utilizzano prevalentemente browser moderni, come così come nei casi in cui il carattere particolare non è disponibile a causa di uno o l'altro motivo (ad esempio, problemi di copyright).
Squared Eye pone l'enfasi su diversi livelli di titoli con sIFR, così come con immagini inserite manualmente. Sta usando un bellissimo Archer con slab in armonia con una pila di font basata su Lucida per un look moderno ma elegante.
Anche se fornirò alcuni font stack che puoi usare nei tuoi progetti, considera quanto segue come un "allenamento" per creare stack di font personalizzati. Ci sono già molti altri siti che offrono molte soluzioni già pronte per la visualizzazione e il testo della copia del corpo.
Come dice il proverbio, "Dai a un uomo un pesce e dagli da mangiare per un giorno. Insegna a un uomo a pescare e gli dai da mangiare per tutta la vita".
Prima di iniziare a costruire pile di font, è necessario acquisire familiarità con il proprio pubblico principale e determinare quale software e sistemi operativi utilizzano. In questo modo, puoi prevedere quali tipi di carattere potrebbero aver installato e quanta flessibilità tipografica ti fornisce.
Per esempio; Matthew Smith (Squared Eye) probabilmente (giustamente) ha predetto che la maggior parte del suo pubblico non avrà un font come Archer installato sui loro computer e ha deciso di incorporarlo usando la sostituzione dei font Flash (confrontando Archer, ~ 97% degli utenti ha installato Flash).
Disegna sempre prima con i Webfonts principali e poi migliora gradualmente con gli stack di font)
Per ulteriori informazioni sui font forniti con software diversi, sfogliare la matrice di font di 24 modi, il tipo di web fluido e Apaddedcell. Potresti anche trovare l'ampia documentazione di Microsoft sui caratteri forniti con i loro prodotti, oltre a informazioni dettagliate sul loro reparto tipografico, una lettura utile.
Quando si tratta di creare stack di font, è necessario considerare alcune variabili, quando si determina cosa rende i font diversi dagli altri (si ricordi il confronto tra Georgia-Garamond-Garamond sopra?). Questo, di nuovo, si riduce alla tua esperienza e familiarità con diverse categorie di font. Avrai bisogno di imparare a notare non solo il modo in cui i serif vengono presentati (sono inclinati o dritti? O non esistono?), Ma anche le piccole (er) differenze tra due tipi di caratteri simili.
Considera come comunicano tra loro, le loro altezze e leggibilità su piccole dimensioni, nonché la loro forma e direzione. Anche se questo suona, forse, intimidatorio in questo momento, ricorda come la pratica rende perfetti.
Esempio: Ibis Display e Archer, anche se entrambi i slab-serifs per categoria, probabilmente non farebbero una buona coppia a causa della differenza significativa nel modo in cui i loro serif sono presentati e le notevoli transizioni thick / thin su Ibis contro un Arciere monoweight.
Ho già detto che mi piace Garamond. Quindi ho intenzione di basare una pila di font su Times New Roman, che è il font sicuro per il Web più vicino all'aspetto al summenzionato carattere tipografico oldstyle.
Vorrei ricordare che Garamond, a causa della sua altezza X ridotta, probabilmente non è la scelta migliore quando si progetta per un'eccellente leggibilità sullo schermo (dopo tutto, non è stato creato principalmente per la presentazione dello schermo), ma va bene se usato con dimensioni dei caratteri abbastanza alte (a mio avviso, Garamond 16-17 pixel / 1em è ottimale).
Nel ridimensionamento ottico, come viene chiamato, le dimensioni di testo più piccole hanno generalmente altezze x più grandi, larghezze dello stelo più larghe e meno contrasto dello stelo tipografico e dimensioni dello schermo più grandi hanno altezze x inferiori con più variazioni nelle larghezze dello stelo.
- Blog MSDN
In base alla Font Matrix di 24 Ways, Garamond viene fornito con Office Word 2007 per Windows e Word 2004 per Mac, il che significa che è disponibile per un'enorme percentuale di visitatori. Per coloro che non lo hanno installato, ho fornito un backup sotto forma di tipi di Adobe Caslon, Garamond e Minion Pro che vengono forniti con Creative Suite (si noti, tuttavia, che tutti questi caratteri sono disponibili anche per i singoli download, menziono i programmi con cui vengono spediti perché suppongo che molti di voi li abbiano acquistati con il software Adobe).
Ho anche deciso di usare il testo Crimson dal repository Webfont di Google per fornire un discreto ripiego prima di Times. Lo stack di font finale assomiglia a questo:
famiglia di font: Garamond, Adobe Garamond Pro, Minion Pro, Adobe Caslon Pro, Crimson Text, Times, serif;
Questo tipo di carattere deve essere utilizzato esclusivamente con caratteri di dimensioni maggiori, soprattutto perché Windows è noto per il rendering di caratteri scadenti.
Chrome con le impostazioni predefinite (a sinistra) e Safari con smussamento dei caratteri impostato su Medio (a destra). Può sembrare sottile all'inizio, ma ha un grande impatto sulla leggibilità in dimensioni più piccole.
Se stavi cercando una buona leggibilità sullo schermo, la Georgia e Verdana (entrambi i caratteri sono degli anni novanta, realizzati appositamente per il rendering dello schermo) offriranno risultati più soddisfacenti negli stack di font.
Ad esempio, potremmo sfruttare la somiglianza tra i serif Lucida (Fax e Bright, che vengono anche con MS Word) e Droid serif dal repository di Google Webfont per creare uno stack di font altamente leggibile con una grande altezza x:
font-family: Lucida Bright, Lucida Fax, Droid serif, Georgia, Serif;
Ancora una volta i webfonts di Google entrano in azione prima di una soluzione generica, soprattutto perché i Droid serif sono molto più vicini all'aspetto di Lucida rispetto a Georgia e Times, rispettivamente.
Uno stack molto simile a Verdana conterrebbe anche i tre quasi identici Lucida sans-serifs (Grande-ships con Mac, Sans, Sans Unicode):
famiglia di font: Lucida Sans, Lucida Sans Unicode, Lucida Grande, Verdana, Sans-Serif;
Si noti come i caratteri sostitutivi hanno caratteristiche simili, in particolare come il g la lettera è praticamente la stessa su caratteri tipografici e come o assomiglia a un cerchio piuttosto che a un'ellisse. Come con la maggior parte dei sans-serif, sono monoweight e non hanno transizioni thick / thin (Optima, ad esempio, non è monoweight - questo è ciò che rende più difficile l'accoppiamento con altri font).
La creazione di stack di font sensati è importante, al fine di fornire un'eccellente tipografia, dovrai fare il "dieci percento in più" e fornire contrasto tipografico usando diverse varianti di font, pesi, direzione e cura per tutti i metodi micro tipografici.
Jon Tan affronta la micro tipografia con estrema attenzione.
Jon Tan, ad esempio, utilizza alcuni selettori CSS3 per creare un grande impatto visivo.
.entry-content p: first-line, .entry-content img + p: first-line font-variant: small-cap; font-weight: 900; text-indent: 0px;
Sta usando i titoli centrati e in corsivo all'interno di un post del blog in uno stack di font basato su Times. Questo, combinato con il testo giustificato e il suo design minimalista, rende l'esperienza di lettura molto piacevole. Ricorda: le piccole cose contano.
Mescolare le cose con un carattere grassetto, i titoli maiuscoli e la spaziatura positiva delle lettere per intestazioni più piccole fornirà molte volte un'esperienza e un contrasto molto migliori, oltre a una separazione più chiara dalla copia del corpo, rispetto a un carattere tipografico differente. Samantha Warren ha trattato molto bene la gerarchia tipografica, e ti suggerisco di leggere il suo articolo per una comprensione più ampia dell'argomento.
Un Garamond di diciassette pixel per la copia del corpo e Lucida Sans 15px per il sottotitolo 4 (h4) ha un aspetto molto diverso nelle due situazioni superiori, solo a causa di alcune piccole modifiche nel nostro CSS:
body font: 17px / 1.4 Garamond, Adobe Garamond Pro, / * ... (guarda lo stack basato su Garamond sopra) * / serif; colore: # 333; allineamento del testo: giustificare; h4 # maiuscolo text-transform: maiuscolo; carattere: grassetto 14px / 1 Lucida Grande, Lucida Sans, Verdana, sans-serif; margin-top: 15px; letter-spacing: 1px; h4 # normalcase text-transform: none; font-weight: normal; letter-spacing: 0;
Le e commerciali in corsivo sono un'altra di quelle tecniche che dimostrano come "le piccole cose contano" (nota, tuttavia, che non tutti i caratteri hanno "e" commerciali e "speciali"):
.amp font-family: Adobe Caslon Pro, Garamond, Palatino Linotype, Bell MT, Minion Pro, Garamond, Constantia, Goudy Old Style, testo Torre Alta, serif; / * Il font-stack sopra contiene alcune famiglie di font che hanno dei bei e commerciali. Dovresti scegliere una coppia adatta alle tue esigenze su un determinato sito web, piuttosto che usare tutto. Ad esempio, Caslon, Palatino e Baskerville fanno un buon lavoro la maggior parte del tempo. * / font-style: italic; altezza della linea: 0;
Se desideri automatizzare l'uso di e commerciali fantasiosi (racchiudendoli in classi appropriate, oltre ad avere qualche aiuto tipografico avanzato), ti suggerisco di cercare il plugin WP-Typography per Wordpress.
Potremmo migliorare ulteriormente l'esperienza dei nostri utenti migliorando il sito con un semplice JavaScript per verificare se ha un font particolare installato sul suo sistema. Quindi, si tratta semplicemente di scegliere un font di fallback adatto, se il font non è disponibile (ad es. Aumentare la dimensione del font per rendere un altro font più leggibile, usare la sostituzione dell'immagine, caricare font aggiuntivi, ecc.).
Tieni presente che dovresti considerare il fatto che una piccola percentuale di utenti naviga sul Web con JavaScript disattivato.
Potresti, forse, aggiungere una classe noscript al corpo se JavaScript è disabilitato e preparare una tipografia ragionevole per questo, di conseguenza.
Detto questo, ci sono alcune tecniche essenzialmente equivalenti per scoprire se un determinato tipo di carattere è installato sul sistema dell'utente. Userò una versione leggermente modificata del codice di Lucas Smith:
Accentsconagua
function testFont (name) name = name.replace (/ ['"<>] / g,"); var body = document.body, test = document.createElement ('div'), installed = false, template = 'mmmmmwwwww'+'mmmmmwwwww', ab; if (name) test.innerHTML = template.replace (/ X / g, name); test.style.cssText = 'position: absolute; visibilità: nascosta; display: block! important '; body.insertBefore (test, body.firstChild); ab = test.getElementsByTagName ('b'); installed = ab [0] .offsetWidth === ab [1] .offsetWidth; body.removeChild (test); return installed; Dopo aver incollato il codice nel file JavaScript, puoi semplicemente verificare se un determinato tipo di carattere è installato sul computer degli utenti utilizzando le istruzioni condizionali:
if (testFont ("FontName")) // Fai cose se il font è installato else // Fai cose se il font non è installato, cioè carica Cufón sostitutivo Uno degli usi più interessanti di questa tecnica potrebbe essere il collegamento a un file di caricamento dei font (@ font-face, Google Webfonts ...), nel caso i nostri font preferiti non siano disponibili sul sistema dell'utente. In questo modo, miglioriamo le prestazioni e non costringiamo l'utente a scaricare extra ~ 30kb senza motivo:
if (! testFont ("Lucida Fax") &&! testFont ("Lucida Bright") &&! testFont ("Droid serif")) var head = document.getElementsByTagName ("head") [0]; var webfontLink = document.createElement ('link'); webfontLink.rel = 'foglio di stile'; webfontLink.href = 'http://fonts.googleapis.com/css?family=Droid+serif'; // ora abbiamo head.appendChild (webfontLink); ♣ ♠ ♣ ♠ ♣ ♣ ♠ ♣
Spero che tu ora abbia una migliore comprensione della tipografia sul web. C'è sicuramente di più in merito, e mi divertirò a sentire ciò che hai da dire a riguardo nei commenti!
