Questo articolo presenta un insieme estremamente utile di suggerimenti e best practice per coloro che sono ancora abbastanza nuovi a lavorare con la tipografia sul web.
Analizzeremo i metodi più diffusi per l'incorporamento di caratteri Web, il dimensionamento dei caratteri e l'impostazione di un'altezza di riga solida.
Tipografia Web: Nozioni di base
Ho iniziato la mia carriera di disegnatore in stampa, quindi una delle transizioni più sconvolgenti verso la mentalità basata sul Web per me riguardava l'area della tipografia. Per il design di stampa, posso utilizzare qualsiasi carattere che desidero su qualsiasi pezzo, purché lo possieda e risieda sulla mia macchina. Inoltre, a nessuno importa davvero come ridimensiono i miei font, purché stampino abbastanza grandi!
Questo articolo contiene alcune tecniche che vorrei conoscere subito e ho dovuto imparare a fondo attraverso errori eclatanti e altri che sto imparando solo ora!
Ognuna di queste tre tecniche può sembrare piuttosto semplice per un professionista e probabilmente ne viene discusso anche da alcuni, ma consiglio caldamente che chiunque sia nuovo al web design cerchi di capire da vicino tutti questi concetti in modo da poter scegliere un difensore posizione per come si imposta il tuo tipo online.
Incorporamento di caratteri Web: utilizzare @ font-face
Un anno o due fa il gioco dei font web era piuttosto incerto. Tutti sapevano che stava arrivando una rivoluzione, ma c'erano un certo numero di varie tecniche che venivano perseguite e poche erano certe su dove saremmo finiti.
Avanzando rapidamente fino ad ora, un'unica soluzione è stata ampiamente accettata per essere la migliore per molte o anche per la maggior parte delle circostanze. Se hai intenzione di incorporare caratteri personalizzati in un sito web, @ font-face è la strada da percorrere. È una soluzione CSS pura con un eccezionale supporto per i browser e, a differenza di Cufon e dei suoi cugini, produce testo perfettamente selezionabile che funziona e si sente proprio come un font nativo.
Sintassi Bulletproof @ font-face di Fontspring
Questo è un perfetto esempio di come le migliori pratiche nel web design cambiano continuamente. L'ultima volta che ho controllato, la faccina di Paul Irish, la sintassi bulletproof @ font-face, era il modo migliore per andare. Tuttavia, nella ricerca di questo articolo ho scoperto che è apparso un nuovo metodo che Paul Irish stesso definisce "la migliore soluzione possibile".
Il nuovo metodo è Bulletproof @ Font-Face Syntax di Fontspring, che si occupa della mancanza di supporto per Android nella tecnica originale irlandese.
Se ti stai chiedendo il punto interrogativo, è un trucco intelligente per ingannare IE9 in sottomissione con il caricamento dei caratteri corretti ed evitare un errore 404. Per ulteriori informazioni su come funziona, controlla questo post.
Due servizi Free @ font-face
Se stai cercando di incorporare caratteri personalizzati gratuiti nella tua pagina web, il modo più semplice che ho trovato è quello di utilizzare Google Web Fonts. Questo straordinario servizio contiene oltre 180 famiglie di font e richiede zero download di file da parte dell'utente. Basta sfogliare la libreria, scegliere i caratteri desiderati, quindi copiare e incollare i frammenti di codice che ti vengono assegnati. Non potrebbe essere più facile!
In alternativa, consiglio sempre FontSquirrel. Qui devi scaricare i kit @ font-face, che è un po 'più di lavoro, ma il payoff è una collezione imbattibile di bellissimi font gratuiti e la possibilità di caricare un singolo file di font che verrà automaticamente convertito in diversi formati e trasformato in un kit @ font-face utilizzabile.
Il dilemma del dimensionamento dei caratteri
Mentre siamo in tema di caratteri, discutiamo brevemente del dimensionamento dei caratteri. Questo è in realtà un argomento molto più ferocemente discusso rispetto al precedente. La verità è che, a prescindere dal metodo scelto, ci sono molti sviluppatori web là fuori che insisteranno sul fatto che tu stia sbagliando!
Per la maggior parte,? Em? sembra essere la scelta popolare. La linea di fondo è quella che usa? Px? risultati in tipi di carattere che non si adattano bene in determinati browser. Kyle Schaeffer ha un interessante articolo sul perché usare le percentuali potrebbe essere un'opzione migliore, ma da quello che posso dire, la maggior parte delle persone sono ancora a favore di? Em? (o almeno un em% ibrido).
Ora, da? Em? può essere un po 'imbarazzante lavorare con, una pratica comune è quella di impostare la dimensione del carattere del corpo al 62,5% e quindi utilizzare? em? per tutto il resto. Il motivo è che i risultati sono facili da tradurre: 1.2em = 12px, 1.4em = 14px, 2.4em = 24px, ecc.
Sfortunatamente, questo metodo causa un problema di composizione dispari quando si lavora con più livelli di relazioni genitori / figli. Una volta entrati in un paio di livelli, dimensionando con? Em? diventa difficile In genere, la soluzione è dichiarare elementi figlio su? 1em?, Ma Jonathan Snook potrebbe avere una soluzione ancora migliore.
Dimensionamento dei caratteri con REM
Il? Rem? l'unità proviene dal sacchetto CSS3 di caratteri e dimensioni relativi al root (html) piuttosto che al genitore, che evita il problema di composizione. Ecco la sintassi di Snook dal suo articolo Font Sizing With REM:
Il rovescio della medaglia qui è che devi dichiarare i backup in? Px? per, avete indovinato, varie versioni di Internet Explorer. Tuttavia, il risultato, secondo Snook, è il dimensionamento coerente e prevedibile in tutti i browser e il testo ridimensionabile nelle versioni correnti di tutti i principali browser.
Guai in Paradiso
Come ho detto sopra, c'è sempre qualcuno in giro da dire? Non è giusto !? Lo sviluppatore Harry Roberts ha recentemente pubblicato un articolo su CSS Wizardry spiegando perché dimensionare con? Rem? può essere evitato.La sua argomentazione è che il trucco al 62,5% deriva dalla pigrizia da parte dello sviluppatore (una buona cosa secondo Roberts) ma alla fine si traduce in Di Più lavoro (una brutta cosa).
Roberts continua a discutere contro l'impostazione di dimensioni di font di base arbitrarie che non ti servono o addirittura non usano davvero, e invece incoraggia a impostare la tua base dove vuoi e a disegnare solo le eccezioni.
Entrambi gli sviluppatori hanno punti perfettamente validi. Il metodo di Snook è certamente più facile da capire, ma Roberts fa un argomento abbastanza convincente per evitare del tutto il trucco del 62,5%. Dovresti assolutamente dare un'occhiata da vicino a entrambi e decidere quale puoi avvolgere nella tua mente!
Griglia linealess senza unità e griglia tipografica
L'ultima cosa che vorrei approfondire è qualcosa che non sapevo nemmeno esistito fino a poco tempo fa: l'altezza della linea senza unità. Eric Meyer spiega questa idea in dettaglio qui, ma ti darò una rapida panoramica.
Il concetto qui è un po 'difficile da capire ma da sopportare. Fondamentalmente, se si dichiara l'altezza della linea con un valore unito come? 1em?, Quel valore calcolato viene automaticamente passato ai suoi discendenti. Ecco l'esempio che Eric Meyer ha inventato:
Questo all'inizio sembra abbastanza corretto, ma il risultato è in realtà il prendere l'altezza della linea degli elementi figlio da quel valore genitore calcolato. Pertanto, il codice sopra riportato è esattamente come se avessi scritto questo:
Nota come l'altezza della linea rimanga a 15px per tutti gli elementi. Per evitare ciò, Meyer suggerisce di usare altezze di linea senza unità, che sono usate come moltiplicatore per l'altezza della linea degli elementi figli. Ecco l'esempio sopra riscritto per utilizzare questa tecnica:
Il risultato per il codice sopra è esattamente lo stesso del codice qui sotto. Da questo possiamo vedere che la nostra altezza della linea di? 1? viene moltiplicato per la dimensione del carattere del Li e piccolo elementi e i risultati sono molto più prevedibili.
Si noti qui che l'altezza della linea rimane uguale alla dimensione del font di ciascun elemento. È importante capire che questo non è un argomento per impostare l'altezza della linea esattamente sulla dimensione del carattere, ciò è stato fatto solo per l'esempio. Qualsiasi numero può essere usato per l'altezza della linea e si dovrebbe sperimentare per trovare ciò che funziona meglio (il prossimo esempio usa 1.231).
Caldaia HTML5 Approvato!
Per vedere se questa è una pratica comune, ho scaricato una copia di HTML5 Boilerplate e ho cercato nel CSS. Abbastanza sicuro, ho trovato in pratica un'estensione della linea senza unità, anche se in una versione più concisa, a stenografia.
Creazione di una griglia tipografica
Se vuoi davvero immergerti nella creazione di una bella tipografia web, consulta l'articolo di Richard Rutter, "Componi a un ritmo verticale", che delinea alcune tecniche utili per destreggiarsi tra dimensione del carattere, altezza della linea e margine o riempimento per creare un ritmo perfetto per la tua pagina .
Chris Coyier su CSS-Tricks riprende questa tecnica e la porta più avanti combinandola, aspettandola, con l'altezza della linea senza unità! Dai un'occhiata a questa pagina in cui puoi visualizzare e scaricare la griglia tipografica prefabbricata di Chris utilizzando questi metodi.
Conclusione
Queste tre lezioni possono essere riassunte bene. Innanzitutto, quando si incorporano i caratteri sul Web, utilizzare @ font-face per una soluzione altamente funzionale e cross-browser. Per ora, la sintassi di Fontspring sembra essere la soluzione migliore per la formattazione delle dichiarazioni @ font-face. Google Web Fonts e Fontsquirrel sono i luoghi da visitare se desideri font web gratuiti che possono essere facilmente inseriti in qualsiasi pagina.
Quindi, da? Px? può e ha difficoltà a ridimensionare i vari browser, usando? em? o? rem? per il dimensionamento dei caratteri è probabilmente il modo migliore per andare. Usando? Rem? consente un facile utilizzo del trucco del 62,5% senza problemi di composizione, ma esiste un argomento decente contro l'abbandono di questa tecnica, l'impostazione di una dimensione del carattere di base intenzionale e il calcolo manuale della matematica per eventuali eccezioni come le intestazioni.
Infine, quando si lavora con l'altezza della linea, è una buona idea impostare un ritmo verticale o tutta la griglia tipografica. Un metodo importante da tenere a mente è l'uso di line-line senza unità per semplificare l'ereditarietà.
Queste sono le migliori pratiche attuali per quanto le vedo. Sentiti libero di lasciare una feroce confutazione nei commenti per qualsiasi e tutte queste tecniche. Mi piace scavare e conoscere questa roba e se hai metodi alternativi voglio vederli!