Share
La tipografia sul web è tutt'altro che semplice e per molti è un mistero inquietante. Oggi esamineremo sei modi in cui i web designer e gli sviluppatori possono migliorare la tipografia dei siti che creano.
La tipografia è l'arte di progettare lettere, parole, paragrafi e come interagiscono tra loro. Molti designer e sviluppatori spesso identificano la tipografia con la scelta di un font o di un carattere tipografico, mentre altri semplicemente dimenticano che il 95% del web design è tipografico e tende a dimenticarsene. Chiaramente, se la tipografia è davvero il 95% del web design, dovrebbe essere in prima linea nella mente di ogni designer e sviluppatore. Ecco Sei modi per migliorare la tua tipografia Web.
Le basi della tipografia sono importanti per tutti i progettisti, indipendentemente dal fatto che stiano progettando per il web.
Definizioni tipografiche
Di seguito sono riportate alcune definizioni tipografiche di base che ogni designer / sviluppatore dovrebbe comprendere quando si tratta di tipografia. Questa lista non è affatto completa. Vedere l'Elenco di lettura consigliato alla fine di questo articolo per glossari più completi.
Per creare una scala tipografica efficace, il metodo migliore che ho trovato è quello di utilizzare l'unità di misura "em", in quanto imposta la dimensione relativa alla base di un dato documento. Nell'esempio seguente, la dimensione del font di base è 12 pixel, che imposterà la dimensione standard del font per i paragrafi a 15 pixel.
body font-size: 12px; h1 font-size: 5.0em; h2 font-size: 4.0em; h3 font-size: 3.0em; h4 font-size: 2.0em; blockquote font-size: 1.5em; p font-size: 1.25em; input font-size: 1.0em; small font-size: 0.75em;
Il ritmo verticale dell'interlinea che fornisce la spaziatura ottimale da seguire per l'occhio. Per creare questo ritmo è meglio seguire una griglia di base. Dalla mia esperienza, il ritmo verticale online è impostato su o vicino a 1,5em. NETTUTS +, ad esempio, utilizza un ritmo verticale di 1,6em, che equivale approssimativamente a un'altezza della linea di 17,6 px (basata su una dimensione font 11px).
Di seguito è riportato un ritmo verticale standard che utilizzo su molti dei miei siti Web basati sul sistema a griglia 960. Per ottenere il ritmo verticale in modo appropriato, ogni paragrafo dovrebbe avere un margine o una spaziatura inferiore al valore equivalente all'altezza della linea della linea di base standard.
body font-size: 12px; altezza della linea: 15px; p margin-bottom: 15px;
Come molti designer e sviluppatori sanno, i siti Web vengono visualizzati in modo diverso nei vari browser. Questo è particolarmente vero con il rendering dei caratteri. Di seguito è riportato un confronto di come cinque browser popolari rendono lo stesso testo in modo diverso:
Fonte immagine: FontTech.Info Quando si costruisce un layout tipografico o un sito che è ricco di contenuti (come una rivista o un sito di blog), essere in grado di vedere le differenze tra la tipografia in ciascuno dei diversi browser e sistemi operativi è un vantaggio importante. Progettare nel browser non è una novità (anche nel 1997, quando ho creato il mio primo sito web, l'ho progettato interamente nel browser). Sebbene non tutti i siti siano candidati per la progettazione in un browser, quelli più interessati alla tipografia sono perfetti per la progettazione in un browser.
Fonte immagine: per un bel web Andy Clarke, famoso designer / autore, ha recentemente parlato ad An Event Apart Boston con una presentazione dal titolo Walls Come Tumbling Down in cui ha sostenuto la progettazione nel browser per molte ragioni. L'immagine sopra, presa dalla sua presentazione, mostra l'uso di una griglia standardizzata per entrambe le colonne e il ritmo verticale.
Il modo migliore per progettare in un browser è utilizzare una griglia come questa. Nel pacchetto sorgente, ho incluso due diverse griglie colonnari, ciascuna con tre varianti di ritmo verticale. Il CSS qui sotto mostra il metodo più semplice di distribuzione di una di queste griglie di test sostituendo l'immagine di sfondo o le immagini nel corpo della pagina HTML utilizzando una classe specifica per la griglia che si sceglie. Aggiungi semplicemente la classe specificata al tag body o al tag DIV del contenitore del contenuto e sarai pronto per la progettazione nel tuo browser.
.grid960base15 width: 960px; altezza della linea: 15px; background: url (images / grid960base15.png) repeat-y; .grid960base18 width: 960px; altezza della linea: 18px; background: url (images / grid960base18.png) repeat-y; .grid960base30 width: 960px; altezza della linea: 30px; background: url (images / grid960base30.png) repeat-y; .grid600base12 width: 600px; altezza della linea: 12px; background: url (images / grid600base12.png) repeat-y; .grid600base16 width: 600px; altezza della linea: 16px; background: url (images / grid600base16.png) repeat-y; .grid600base18 width: 600px; altezza della linea: 18px; background: url (images / grid600base18.png) repeat-y;
Va notato che per un buon ritmo verticale, è necessario avere un controllo granulare sull'altezza della linea per raggiungere il giusto ritmo verticale. Inoltre, puoi utilizzare questo Bookmarklet per la creazione di griglia per sovrapporre qualsiasi sito Web con una griglia personalizzata. Trovo che ciò sia utile quando non puoi sostituire l'immagine di sfondo con una delle griglie.
La sostituzione del testo con le immagini è stata una pratica standard nel web design dagli anni '90. Con l'adozione dei CSS nei principali browser, sono nate le tecniche di sostituzione delle immagini che non consistono semplicemente nel creare un'immagine e nel collocarla al posto del testo. Il primo di questi è stato ampiamente accettato come Fahrner Image Replacement (FIR), ma visto che le persone giocavano con CSS Image Replacement, hanno capito che questa tecnica non era accessibile. La tecnica Phark Image Replacement è stata originariamente concepita come un sostituto accessibile per la classica tecnica FIR. Prima proposta da Mike Rundle di 9rules nel 2003, Phark Image Replacement si basa sull'uso delle proprietà CSS di text-indent e background-image per nascondere il testo dall'utente ma rimane accessibile per screen reader e motori di ricerca.
Per utilizzare Phark Image Replacement, impostare l'elemento contenitore (in questo caso, i DIV) con altezza e larghezza definite. Quindi imposta un'immagine di sfondo. Infine, imposta la proprietà text-indent su -9999px. La proprietà text-indent essenzialmente spinge l'inizio del testo a 9999 pixel, ma ciò non aumenta l'area di scorrimento, causando effettivamente la scomparsa del testo.
Mentre Phark è attualmente la più comune tecnica di sostituzione delle immagini esclusivamente CSS, ce ne sono molte altre con diversi vantaggi e svantaggi. Ad esempio, Phark non riesce a mostrare nulla all'utente se le immagini sono disabilitate ma il CSS è abilitato, uno svantaggio relativamente piccolo. Inoltre, la sostituzione delle immagini CSS non è realmente pensata per la tipografia su larga scala (ad esempio, articoli), ma è la scelta migliore per pulsanti, intestazioni e altre piccole quantità di testo. Per saperne di più su altre tecniche di sostituzione delle immagini basate su CSS, CSS-Tricks ha scritto un buon sommario di tutte le tecniche di sostituzione delle immagini basate su CSS chiamate Nove tecniche per la sostituzione delle immagini CSS.
La sostituzione dell'immagine standard è ideale per situazioni altamente decorative e quantità di testo ridotte. Cosa fai quando vuoi sostituire il testo per un intero corpo di un articolo? Che ne dici di sostituire i titoli e di mantenere il testo selezionabile? La risposta qui è una delle tecniche avanzate di sostituzione delle immagini. Per tutti gli scopi intensivi, ci sono tre diverse sostituzioni di immagini avanzate disponibili in questo momento (se ne conosci altre, ti preghiamo di lasciarle nei commenti): basato su Flash, basato su Javascript e basato su PHP.
La prima delle tecniche avanzate di sostituzione delle immagini arrivate sulla scena è stata Scalable Inman Flash Replacement (sIFR), originariamente progettata da Shaun Inman come IFR e successivamente avanzata alla designazione SIFR da Mike Davidson e Mark Wubben, che attualmente mantengono il progetto.
PROFESSIONISTI:
- Il rendering dei font più nitido grazie all'anti-aliasing
- Mantiene il testo semantico e accessibile originale
- Degrado con garbo nel testo originale
- Il testo è selezionabile (parzialmente)
- Sceneggiatura non invadente
CONS:
- Non adatto per grandi corpi di testo
- L'installazione può essere complicata e complicata
- Richiede Flash e Javascript
- I tempi di caricamento possono essere lenti
- La stampa è problematica
Se vuoi imparare come implementare e vedere esempi di sIFR, NETTUTS + ha un ottimo tutorial su come usare sIFR o visitare il sito ufficiale di sIFR2 o il sito ufficiale di sIFR3, la versione più recente.
La più recente tecnica di sostituzione avanzata dell'immagine popolare è chiamata cufón, presumibilmente una parola "custom" e "font" secondo alcuni. "Mira a diventare una valida alternativa al sIFR, che nonostante i suoi meriti rimane ancora dolorosamente difficile da configurare e usare" secondo il wiki di cufón.
PROFESSIONISTI:
- La più veloce tecnica di sostituzione dell'immagine avanzata
- Mantiene il contenuto di testo semantico originale
- Degrado con garbo nel testo originale
- Non richiede alcun plugin (come Flash)
- Sceneggiatura non invadente
- Facile configurazione
CONS:
- Il testo non può essere copiato e incollato (il testo non è selezionabile)
- La gestione dei font è sfocata per quanto riguarda cufón
- La giustificazione del testo e gli effetti non funzionano
- : lo stato di hover ha molte peculiarità
- Richiede Javascript
Se vuoi imparare come implementare e vedere esempi di cufón, NETTUTS + ha un ottimo screencast e tutorial su come usare cufón o visitare il sito ufficiale di cufón.
La tecnica FLIR (Facelift Image Replacement) è diversa dalle due precedentemente citate in quanto utilizza lo scripting lato server con PHP e GD Image Library. È stato sviluppato da Cory Mawhorter per fornire una tecnica di sostituzione automatica dei font sul lato server.
PROFESSIONISTI:
- Mantiene il contenuto di testo semantico originale
- Non richiede alcun plugin (come Flash)
- I problemi relativi alla gestione dei font sono improbabili, se non mai
CONS:
- Il testo non può essere copiato e incollato (il testo non è selezionabile)
- Il rendering dei caratteri è inferiore rispetto ad altre alternative
- Richiede un server web con PHP e GD
- Richiede più risorse del server
- Può essere difficile da configurare
Se vuoi imparare come implementare e vedere esempi di FLIR, Divito Design ha un buon tutorial su come usare FLIR o visitare il sito ufficiale di FLIR
Il CSS3 è relativamente nuovo nel panorama del Web e non ha ancora ottenuto un utilizzo diffuso. Una delle funzionalità più interessanti di CSS3 è la regola @ font-face. Ci sono due grandi ostacoli per l'utilizzo di @ font-face in questo momento. Innanzitutto, non molti font e font tipografici supportano l'incorporamento di font-face. Alcune licenze sono vaghe e non riguardano l'incorporamento web, mentre alcune proibiscono esplicitamente l'incorporamento di @ font-face. Per un elenco di caratteri che supportano l'incorporamento di @ font-face, è possibile che webfonts.info disponga di un elenco eccezionale. Il secondo ostacolo è che non tutti i browser supportano la regola @ font-face, come mostrato nella seguente tabella di supporto del browser.
Fonte dell'immagine: Wikipedia La regola @ font-face ora consente l'incorporamento dei font in IE6, IE7, IE8, FireFox 3.5+ (PC e Mac) e Safari (PC e Mac) con supporto in Opera 10 e Chrome in arrivo. Ciò significa che, in una forma o in una moda, i webfonts saranno disponibili per circa il 90% + utenti.
Idealmente, questa prima dichiarazione @ font-face sarebbe parte di un file CSS servito tramite commenti condizionali a solo IE con la versione EOT del font. La seconda dichiarazione @ font-face dovrebbe essere un file di font OTF o TTF. Inoltre, a causa delle restrizioni di sicurezza del browser, l'URL di origine per le dichiarazioni deve essere relativo (anche se alcuni browser supportano URL assoluti).
Accentsconagua
@ font-face font-family: "Anivers"; src: url ("Anivers.eot"); @ font-face font-family: "Anivers"; src: url ("Anivers.otf"); Sì. Questo è tutto ciò che c'è da fare.
body font-family: Anivers, "Helvetica Neue", Helvetica, Arial, sans-serif;
Una volta che le dichiarazioni sono state fatte, la famiglia di font che è stata dichiarata può essere utilizzata come qualsiasi altro font che sarebbe disponibile sul sistema di un utente. Questo è un nuovo ed entusiasmante territorio per web designer e sviluppatori che sarà importante seguire nei prossimi mesi.
I prossimi progetti di consegna di font @ face come Typekit e Typotheque stanno cercando di fornire un aiuto significativo in termini di negoziazione delle licenze di incorporamento web con le grandi fonderie di font. Inoltre, con tutte le domande relative al noleggio di caratteri per l'incorporamento web, potrebbe risultare difficile ottenere alcuni (o tutti) i tipi di carattere che verranno utilizzati in un Web design da utilizzare nel software di modifica delle immagini. Esistono due soluzioni: 1) design nel browser come consigliato sopra, o 2) uso di caratteri tipografici simili per progettare i disegni di pagine statiche.
La tipografia sul web è nella sua infanzia rispetto alla tipografia in stampa, trasmissione e film. Guarda altre forme di media per l'uso creativo della tipografia. La prossima volta che sei al cinema, controlla tutti i poster dei film e presta molta attenzione alla tipografia usata nelle anteprime e nei trailer. Dai un'occhiata alla tipografia sia all'interno che sulla copertina dei libri nella tua libreria locale. Esamina la tua collezione di DVD o le tue riviste preferite come fonte di ispirazione.
Online, segui i principali esperti di tipografia online come For a Beautiful Web, adoro Typography, TypeInspire o webfonts.info. Di seguito, troverai un elenco di link di lettura consigliati per ulteriori informazioni sulla tipografia web oltre a NETTUTS + e il suddetto.
Speriamo che questi sei suggerimenti ti aiuteranno la prossima volta che lavori sulla tipografia per il web. È un momento eccitante per essere un tipografo che lavora sul web.
