Ieri abbiamo pubblicato un articolo che illustra Otto consigli semplici e utili per il tipo di Kerning. Questo si è concentrato principalmente sulle basi del kerning: cosa è, come funziona, coppie di lettere da tenere d'occhio, ecc.
Oggi lo stiamo seguendo con una discussione su come usare Lettering.js per kern il tuo tipo di web. Non ti preoccupare, lo è tanto più facile di quanto pensi!
Kerning Web Type: una battaglia perduta
La tipografia sul web ha fatto molta strada negli ultimi anni. In passato c'era solo una manciata di? Sicuri? caratteri utilizzati su un determinato sito Web. Al giorno d'oggi, con opzioni come Typekit e Google Web Fonts, puoi ottenere testo cross-browser, live e completamente selezionabile utilizzando centinaia di tipi di carattere diversi.
Di conseguenza, i web designer sono caduti a capofitto per tipo e non ne hanno mai abbastanza. Sfortunatamente, con tutti i progressi compiuti con l'incorporamento dei caratteri tramite CSS, manca ancora un ingrediente chiave nella toolbox del typographer: kerning.
È quasi impossibile strutturare titoli ben progettati senza controllo sulla crenatura. Ci sono infatti alcune opzioni di spaziatura nel tuo arsenale CSS, ma sono davvero inefficaci per il kerning. Diamo una breve occhiata a come funzionano.
Spaziatura del carattere
Se tu sei Google? CSS Kerning ?, ottieni un sacco di articoli che ti informano che applicando? Letter-spacing? per un dato selettore ti permette di kern il tuo tipo. Questo è in realtà inaccurato. Ecco un'immagine dell'articolo di ieri che illustra cosa intendo.
Come si può vedere, la crenatura influisce sulla spaziatura tra due lettere specifiche, il tracciamento influisce sulla quantità uniforme di spaziatura tra tutte le lettere e l'interlinea influisce sullo spazio verticale tra le linee. Con questo in mente, diamo un'occhiata a quale effetto la? Spaziatura delle lettere? la proprietà ha un testo.
Come puoi vedere, la "spaziatura delle lettere"? la proprietà influenza chiaramente il tracciamento, non la crenatura. L'applicazione di qualsiasi valore di spaziatura delle lettere specificato modifica la spaziatura tra tutte le lettere della parola, linea o paragrafo.
Utilizzando la spaziatura della lettera in Kern
Per essere onesti, l'affermazione nella sezione precedente è un po 'semplificata. In realtà, la proprietà di spaziatura delle lettere si applica a qualunque lettera sia indirizzata al tuo selettore. Per questo motivo, il? H2? i selettori influiscono su tutto nell'intestazione.
Se vogliamo davvero diventare cattivi, potremmo aggiungere marcatori extra per ottenere il vero kerning con spaziatura delle lettere. Ciò comporterebbe l'uso di span nel tuo codice HTML.
Ovviamente, questo metodo è piuttosto indesiderabile a causa del markup extra. Questo è particolarmente vero se hai bisogno di kern più lettere. I risultati sono disastrosi per la leggibilità del tuo codice.
Word Spacing
Un'altra proprietà CSS che riguarda la spaziatura del testo è "word-spacing". Ancora una volta, questa è una proprietà interessante, ma non ci aiuta molto nella nostra ricerca di Kern. Questo fa esattamente come suona: regola la dimensione dello spazio tra le tue parole.
Incontra Lettering.js
Come puoi vedere, le attuali soluzioni di kerning CSS fanno quasi schifo. Per quanto posso dire, non c'è davvero un buon modo per farlo senza seriamente incasinare il tuo markup.
Fortunatamente, c'è un'estensione jQuery gratuita chiamata? Lettering.js? questo apre un sacco di opzioni per disegnare facilmente la tipografia del web.
Che cosa fa?
Lettering.js non è stato creato solo con la crenatura in mente, ma è invece uno strumento che semplifica il targeting di singole lettere, parole o linee nel tuo CSS. Questo a sua volta apre la possibilità di molti effetti diversi, incluso il kerning!
Come puoi immaginare, una volta che sei facilmente in grado di indirizzare specifiche lettere in CSS, puoi usare i margini o altre proprietà di layout per posizionare e stilare tutto esattamente come desideri. Lettere Kern, applica diversi colori e rotazioni; andare fuori di testa!
Come funziona?
Per utilizzare Lettering.js, prima interrompi GitHub e scarica il download gratuito. Assicurati inoltre di includere l'ultima versione di jQuery.
Quindi, decidi cosa vuoi indirizzare. Nella maggior parte dei casi, questo sarà un titolo o un altro piccolo testo importante. Praticamente non vuoi mai andare a crenare un intero paragrafo!
Diciamo che vogliamo scegliere come target un? H2? tag come negli esempi precedenti, ecco il nostro markup HTML senza senso:
Perché ho usato una frase così assurda? Perché il kern predefinito per questo titolo è un naufragio del treno. Dai un'occhiata a come il browser rende questo tipo.
Come puoi vedere, con un esempio così brutto, è chiaro che almeno occasionalmente abbiamo bisogno di qualche soluzione per le regolazioni dei kern. Fortunatamente, abbiamo la nostra arma segreta.
Per sfruttare la potenza di Lettering.js. inserisci semplicemente il seguente frammento di codice nel tuo codice. Devi solo cambiare il? H2? porzione se si desidera indirizzare qualcos'altro.
Con questo in atto, la magia JavaScript fa il suo corso e sostanzialmente trasforma il nostro codice pulito in qualcosa di più simile alla bruttezza che abbiamo visto con il trucco di spaziatura delle lettere. Tuttavia, tieni presente che il codice HTML sorgente viene trasformato solo quando l'utente carica la pagina, il nostro file sorgente reale rimane libero da tutti i tag span. Tuttavia, quando la pagina viene caricata, viene trasformata in:
Questo passaggio è tutto per cui Lettering.js si prende cura di noi. Armati di questi nomi di classe, ora possiamo fare ciò che vogliamo con ogni lettera in CSS.
crenatura
Saltando sul nostro CSS, possiamo facilmente scegliere come target qualsiasi classe generata automaticamente da Lettering.js.Per esempio, diciamo che vogliamo lavorare su? AV? accoppiamento di lettere. Per fare ciò, contiamo sulla? V? (l'undicesima lettera) e spostarlo con il seguente codice.
Tieni presente che puoi ancora utilizzare la proprietà di spaziatura delle lettere se ritieni che sia più corretto, qui scegli come target l'? A? invece del? V? anche se.
In ogni caso, con pochissimo lavoro, abbiamo raggiunto l'effetto che vogliamo!
Rendi ancora più semplice la crenatura con Kern.js
Lettering.js è incredibilmente facile da implementare e utilizzare, ma il kerning può comunque diventare un po 'noioso, poiché devi continuamente apportare modifiche al tuo codice e quindi aggiornare la tua anteprima per vedere se la regolazione fosse troppo, troppo piccola o giusta. Fortunatamente, possiamo usare ancora un altro strumento gratuito per aiutarci.
Kern.js non è una libreria o un'estensione, ma piuttosto un'app web che ci consente di visualizzare visivamente il tipo di kern come faremmo in Photoshop o Illustrator.
Per utilizzare questo strumento, fermati sul sito Kern.js e installa il bookmarklet. Quindi, apri la pagina web di prova nel browser e premi il bookmarklet. Da qui, qualsiasi cosa con Lettering.js applicata diventerà interattiva, il che significa che puoi semplicemente fare clic e trascinare tutte le tue lettere in posizione.
Al termine, fai clic su Fine modifica? e il CSS necessario verrà generato automaticamente. Basta copiare e incollare questo nel tuo codice e sei a posto!
Pro e contro
Ovviamente, questo metodo per il kerning web non è privo di difetti. È comunque la soluzione migliore che abbia mai incontrato, quindi se sai qualcosa di meglio, lascia un commento qui sotto. Nel frattempo, ti consiglio di controllare Lettering.js e Kerning.js per le tue esigenze di crenatura del web.
I vantaggi qui sono chiari, si ottiene una soluzione estremamente semplice e facile da implementare per la crenatura della tipografia live sul web. Il testo rimane perfettamente selezionabile e non devi confondere il tuo markup HTML con una serie di brutti tag span. Vengono aggiunti, ma in un modo dopo il fatto che mantiene pulito il tuo codice.
Ci sono anche molti svantaggi. Per i principianti, è una soluzione JavaScript, quindi ovviamente non funzionerà per gli utenti con JavaScript disattivato. La grande parte di ciò è che quegli utenti otterrebbero essenzialmente la stessa esperienza che avrebbero avuto se avessi saltato del tutto questo metodo! Quindi in sostanza, non sono davvero fuori niente. Ovviamente, ci sono alcune lievi implicazioni sulla velocità che si presentano quando si utilizza JavaScript.
Il più grande svantaggio è che si finisce con una buona parte di CSS scomodo. Tuttavia, se vuoi modellare singole lettere, non c'è davvero molto altro da fare. Nel mio esempio, ecco il codice risultante dopo aver utilizzato Kern.js per spostarsi manualmente su un gruppo di cose. Ad essere onesti, non è tanto male!
Conclusione
Per riassumere, il kerning sul web fa schifo. Contrariamente alla credenza popolare, la "spaziatura delle lettere"? La proprietà CSS da sola è davvero orientata più al tracking che al kerning, devi davvero cestinare il tuo HTML a Kern.
In alternativa, Lettering.js può essere implementato in meno di un minuto e offre davvero una completa flessibilità in termini di come crimini il tuo tipo. Puoi perfino usare Kern.js per kern del tuo tipo in un'interfaccia visuale proprio come se tu stessi usando un software di grafica!
Se stai cercando un modo migliore per kern live web, prova questa soluzione e facci sapere cosa ne pensi nei commenti.