Igår publicerade vi en artikel som beskriver åtta enkla och användbara tips för Kerning Type. Detta fokuserade mestadels på grunderna i kerning: vad det är, hur det fungerar, brevpar att hålla ögonen på, etc.
Idag följer vi upp det med en diskussion om hur man använder Lettering.js till kärnan din webbtyp. Oroa dig inte, det är det mycket lättare än du tror!
Kerning Webtyp: En förlorande kamp
Typografi på webben har kommit långt under de senaste åren. Det brukade vara så att det bara fanns en handfull "säker" typsnitt som används på en viss webbplats. Dessa dagar, med alternativ som Typekit och Google webbfonter, kan du uppnå text med flera webbläsare, levande och helt valda med hundratals olika teckensnitt.
Som en konsekvens har webbdesigners fallit huvud över klackar för typ och kan inte få nog av det. Tyvärr, med alla framsteg som gjorts med inbäddning av teckensnitt via CSS, saknas fortfarande en viktig ingrediens från typografens verktygslåda: kerning.
Det är nästan omöjligt att strukturera väldesignade rubriker utan kontroll över kärnning. Det finns faktiskt några avståndsalternativ i din CSS-arsenal, men de är egentligen ineffektiva för kerning. Låt oss ta en kort titt på hur dessa fungerar.
Teckenavstånd
Om du använder Google? CSS Kerning? Får du en massa artiklar som informerar dig om att använda? Letter-spacing? Till en given väljare kan du kärna din typ. Detta är faktiskt felaktigt. Här är en bild från gårdagens artikel som illustrerar vad jag menar.
Som du kan se, påverkar kerning avståndet mellan två specifika bokstäver, spårning påverkar den enhetliga mängden avstånd mellan alla bokstäver och ledande påverkar det vertikala utrymmet mellan linjerna. Med det här i åtanke, låt oss ta en titt på vilken effekt som "brevavståndet"? egendom har på lite text.
Som du kan se, är "brevavståndet"? egendom påverkar tydligt spårning, inte kerning. Genom att använda ett visst bokstavsavståndsvärde ändras avståndet över varje bokstav i ordet, raden eller stycket.
Använda Letter Spacing till Kern
För att vara rättvis är förklaringen i föregående avsnitt lite förenklad. I verkligheten gäller egenskapen för brevavstånd till vad som helst bokstäver riktas med din väljare. På grund av detta, är? H2? selektörer påverkar allt i rubriken.
Om vi verkligen vill bli otäcka kan vi lägga till extra markup för att uppnå en riktig karning med brevavstånd. Detta skulle innebära att du använder spans i din HTML.
Självklart är denna metod ganska oönskad på grund av den extra uppmärkning. Detta är särskilt sant om du behöver kärna flera bokstäver. Resultaten är katastrofala för läsbarheten av din kod.
Word Spacing
En annan CSS-egenskap som behandlar textavstånd är? Ordavstånd.? Återigen är det här en cool egenskap, men det hjälper oss inte mycket i vår strävan efter kärnan. Det gör exakt vad det låter som det gör: justerar storleken på mellanslag mellan dina ord.
Möt Lettering.js
Som du kan se, suger nuvarande CSS kerning lösningar ganska mycket. Såvitt jag kan berätta är det verkligen inget bra sätt att ta itu med det utan att på allvar rota upp din markering.
Lyckligtvis finns det en gratis jQuery-anknytning som heter? Lettering.js? Det öppnar ett antal alternativ för lätt styling av webtypografi.
Vad gör det?
Lettering.js skapades inte enbart med inriktning men i stället är ett verktyg som gör det enkelt att rikta in enskilda bokstäver, ord eller rader i din CSS. Detta i sin tur öppnar möjligheten för många olika effekter, inklusive kerning!
Som du kan tänka dig, när du enkelt kan rikta in specifika bokstäver i CSS kan du använda marginaler eller andra layoutegenskaper för att placera och stile allt precis vad du vill ha det. Kärnbokstäver, tillämpa olika färger och rotationer; bli tokig!
Hur fungerar det?
För att använda Lettering.js, först stanna av GitHub och ta tag i gratis nedladdning. Se även till att du innehåller den senaste versionen av jQuery.
Därefter bestämmer du vad du vill rikta in. I de flesta fall kommer det att vara en rubrik eller någon annan liten bit viktig text. Du vill nästan aldrig köra en hel paragraf!
Låt oss säga att vi vill rikta en? H2? tagg som i tidigare exempel, här är vår no nonsense HTML markup:
Varför använde jag en sådan nonsensisk mening? Eftersom standardkärnan för denna rubrik är ett tågavverk. Ta en titt på hur webbläsaren gör denna typ.
Som du kan se, med ett exempel på det här dåliga, är det klart att vi ibland ibland behöver lite lösning för korrigeringsjusteringar. Lyckligtvis har vi vårt hemliga vapen.
För att utnyttja kraften i Lettering.js. Lägg bara in följande kodbit i din kod. Du behöver bara ändra? H2? del om du vill rikta något annat.
Med detta på plats, kör JavaScript-magiken sin kurs och omvandlar väsentligen vår rena kod till något mer som den fulhet vi såg med bokstavsavståndet. Men kom ihåg att vår källhtml bara omvandlas när användaren laddar sidan, vår faktiska källfil är fri från alla spårstaggar. Men när sidan laddas, omvandlas den till detta:
Detta steg är allt Lettering.js tar hand om för oss. Beväpnad med dessa klassnamn kan vi nu göra vad vi vill ha med varje brev i CSS.
kerning
Hoppa över till vår CSS, vi kan enkelt rikta oss mot någon av de klasser som automatiskt genereras av Lettering.js.Låt oss säga att vi vill arbeta med "AV" brevparing. För att göra detta räknar vi över till? V? (den 11: e bokstaven) och flytta den över med följande kod.
Observera att du fortfarande kan använda egenskapen Letter-spacing om du känner att det är mer korrekt, här skulle du rikta dig mot? A? istället för? V? fastän.
Hur som helst, med mycket litet arbete, har vi uppnått den effekt vi vill ha!
Gör Kerning ännu enklare med Kern.js
Lettering.js är otroligt enkelt att implementera och använda, men kerning kan fortfarande bli lite tråkigt eftersom du måste kontinuerligt göra justeringar i koden och sedan uppdatera förhandsgranskningen för att se om justeringen var för mycket, för liten eller bara rätt. Lyckligtvis kan vi använda ännu ett gratis verktyg för att hjälpa oss.
Kern.js är inte ett bibliotek eller en förlängning, utan snarare mer av en webapp som tillåter oss att visuellt kärntyp som vi skulle i Photoshop eller Illustrator.
För att använda det här verktyget, stanna på Kern.js-webbplatsen och installera bokmärket. Öppna sedan din testwebbplats i din webbläsare och klicka på bokmärket. Härifrån blir allting med Lettering.js interaktivt, vilket innebär att du enkelt kan klicka och dra alla dina bokstäver på plats.
När du är klar klickar du på? Slutför redigering? och den nödvändiga CSS genereras automatiskt. Bara kopiera och klistra in det här i din kod och du är bra att gå!
För-och nackdelar
Självklart är denna metod för kerning av webbtyp inte utan dess fel. Det är dock den bästa lösningen jag har kommit över, så om du vet någonting bättre, lämna en kommentar nedan. Under tiden rekommenderar jag att du checkar ut Lettering.js och Kerning.js för dina behov av web kerning.
Fördelarna här är tydliga, du får en extremt enkel och lätt att implementera lösning för att skapa live typografi på webben. Texten förblir perfekt valbar och du behöver inte mudra upp din HTML-markup med ett gäng otäcka spårstaggar. De läggs till, men på ett sätt som håller din kod ren.
Det finns flera nackdelar också. Till att börja med är det en JavaScript-lösning så uppenbarligen fungerar det inte för användare med JavaScript avstängt. Den stora delen om det är dock att de användarna i huvudsak skulle få samma erfarenhet som de skulle ha fått om du hoppat över den här metoden helt! Så väsentligt är de verkligen inte ute någonting. Självklart finns det några väldigt små hastighetsimplikationer som uppstår när du använder JavaScript också.
Den största nackdelen är att du hamnar med en anständig bit av besvärlig CSS. Men om du vill utforma enskilda bokstäver finns det verkligen inte mycket annat du kan göra. I mitt exempel är här den resulterande koden efter att ha använt Kern.js för att flytta runt en massa saker manuellt. För att vara ärlig är det verkligen inte så illa!
Slutsats
Sammanfattningsvis suger kerning på nätet. I motsats till populär tro, är "brevavståndet"? CSS-egenskapen på egen hand är riktigt inriktad mot spårning än kerning, du måste verkligen skräpa din HTML till oss till kärnan.
Som ett alternativ kan Lettering.js implementeras om en minut och ger verkligen flexibilitet när det gäller hur du kärnar din typ. Du kan även använda Kern.js för att kärna din typ i ett visuellt gränssnitt, precis som om du använde grafikprogramvara!
Om du har letat efter ett bättre sätt att hitta webbtyp i kärnan, ge den här lösningen ett försök och meddela vad du tycker i kommentarerna.