Denna artikel presenterar en extremt användbar uppsättning tips och bästa praxis för dem som fortfarande är ganska nya för att arbeta med typografi på webben.
Vi går igenom de mest populära metoderna för inbäddning av webbfonter, storlekar på teckensnitt och en solid linjehöjd.
Webtypografi: Grunderna
Jag började min designkarriär i tryck så att en av de mest krossade övergångarna till den webbaserade tankegången för mig var inom typografi. För utskriftsdesign kan jag använda vilken typsnitt jag vill ha på något stycke så länge jag äger det och det är bosatt på min maskin. Vidare bryr sig ingen egentligen hur jag storlekar på mina teckensnitt, så länge det skrivs tillräckligt stort!
Den här artikeln innehåller några tekniker som jag önskar att jag hade visat direkt från fladdermusen och fick lära mig den svåra vägen genom egregious fel och andra som jag bara nu lär mig om!
Var och en av dessa tre tekniker kan tyckas vara ganska grundläggande till ett proffs, och det kommer troligtvis att diskuteras av någon, men jag rekommenderar definitivt att alla som är nya i webbdesign försöker få ett ordentligt grepp om alla dessa begrepp så att du kan välja ett försvarbart position för hur du ställer in din typ online.
Inbäddning av webbfonter: Använd @ font-face
Ett år eller två sedan var webfontespelet ganska osäkert. Alla visste att en revolution kom men det fanns ett antal olika tekniker som förföljdes och få var säkra på var vi skulle hamna.
Snabbspolning fram till nu har en enda lösning överenskommits allmänt för att vara bäst för många eller till och med de flesta omständigheter. Om du ska bädda in anpassade teckensnitt till en webbplats är @ font-face vägen att gå. Det är en ren CSS-lösning med fantastisk webbläsarstöd och till skillnad från Cufon och kusinerna, resulterar i perfekt valbar text som fungerar och känns som en inbyggd font.
Fontsprings Bulletproof @ font-face Syntax
Detta är ett perfekt exempel på hur de bästa metoderna i webbdesign ständigt förändras. Den sista jag kollade, Paul Irlands smiley face bulletproof @ font-face syntax var det bästa sättet att gå. Men när jag undersökte denna artikel upptäckte jag att en ny metod har dykt upp som Paul irländare själv kallar? Bästa möjliga lösningen.?
Den nya metoden är Fontsprings Bulletproof @ Font-Face Syntax, som behandlar oro över bristen på stöd för Android i Irlands ursprungliga teknik.
Om du undrar över frågetecknet är det ett smart knep att lura IE9 i inlämning med att ladda rätt teckensnitt och undvika ett 404-fel. För mer om hur det här fungerar, kolla in det här inlägget.
Två gratis @ font-ansikte Tjänster
Om du vill integrera gratis anpassade teckensnitt på din webbsida är det absolut enklaste sättet jag hittat att använda Google webbfonter. Den här fantastiska tjänsten innehåller över 180 teckensnittsfamiljer och kräver nollfilhämtningar från din sida. Bläddra i biblioteket, välj de teckensnitt du vill ha och kopiera och klistra in de kodfragment du får. Det kunde inte bli enklare!
Som ett alternativ rekommenderar jag alltid FontSquirrel. Här måste du ladda ner @ font-face-kit, vilket är lite mer arbete, men utbetalningen är en oslagbar samling av vackra fria teckensnitt och möjligheten att ladda upp en enda typsnittfil som automatiskt omvandlas till flera format och omvandlas till ett användbart @ font-face-kit.
Font Storleksdilemma
Medan vi är föremål för teckensnitt, låt oss kortfattat diskutera typsnittstorlek. Detta är faktiskt ett mycket mer intensivt debatterat ämne än det föregående. Sanningen är, oavsett vilken metod du väljer, det finns gott om webbutvecklare där ute som kommer att insistera på att du gör fel!
För det mesta, em? verkar vara det populära valet. Bottom line är att använda? Px? resulterar i teckensnitt som inte skala bra i vissa webbläsare. Kyle Schaeffer har en intressant artikel om varför använda procentandelar kan vara ett bättre alternativ, men från vad jag kan säga är de flesta fortfarande positiva till dem? (eller åtminstone en em% hybrid).
Nu, sedan? kan vara lite besvärligt att arbeta med, en vanlig praxis är att ställa in kroppstypstorleken på 62,5% och sedan använda dem? för allt annat. Anledningen till detta är att resultaten är lätta att översätta: 1.2em = 12px, 1.4em = 14px, 2.4em = 24px, etc.
Tyvärr orsakar den här metoden en udda sammansättningsproblem när man arbetar med flera nivåer av föräldra- / barnrelationer. När du får ett par nivåer i, limning med? Em? blir svårt. Lösningen är typiskt att deklarera barnelement på? 1em ?, men Jonathan Snook kan ha en ännu bättre lösning.
Fontformat med REM
Den? Rem? Enheten är från CSS3-väskan med godis och storlekar typsnitt i förhållande till roten (html) snarare än föräldern, vilket undviker komplementeringsproblemet. Här är Snooks syntax från sin artikel Font Size With REM:
Nackdelen här är att du måste deklarera säkerhetskopior i? Px? för gissade du det, olika versioner av Internet Explorer. Resultatet, enligt Snook, är dock en konsekvent och förutsägbar dimensionering i alla webbläsare, och omfördela text i nuvarande versioner av alla större webbläsare.?
Trubbel i paradiset
Som jag nämnde ovan finns det alltid någon att säga? Det är inte rätt !? Utvecklare Harry Roberts publicerade nyligen en artikel på CSS Wizardry som beskriver varför dimensionering med? Rem? kan undvikas.Hans argument är att 62,5% tricket uppstår av latskap hos utvecklaren (en bra sak enligt Roberts) men resulterar i slutändan i Mer arbete (en dålig sak).
Roberts fortsätter att argumentera mot att ange godtyckliga basstorlekar som du inte behöver eller ens riktigt använder och i stället uppmuntrar till att ställa in din bas där du vill ha det och styling bara undantagen.
Båda utvecklarna har helt giltiga poäng. Snooks metod är säkert lättare att räkna ut men Roberts gör ett något övertygande argument för att undvika 62,5% trick helt och hållet. Du borde definitivt ta en titt på båda och bestämma vilken du kan bryta dig om!
Unitless Line Höjd och Typographic Grids
Det sista jag skulle vilja gå över är någonting som jag inte ens visste existerat förrän nyligen: unitless line height. Eric Meyer förklarar denna idé i detalj här, men jag ger dig en snabb översikt.
Konceptet här är lite svårt att förstå men bära med mig. I grund och botten, om du deklarerar linjens höjd med ett gemensamt värde, t.ex.? 1em?, Skickas det beräknade värdet automatiskt till dess efterkommande. Här är det exempel som Eric Meyer kokade upp:
Detta verkar vara korrekt nog först, men resultatet är faktiskt att ta tag i linjehöjden för barnelementen från det beräknade föräldervärdet. Därför är ovanstående kod exakt densamma som om du hade skrivit det här:
Lägg märke till hur linjens höjd stannar vid 15px för alla element. För att undvika detta föreslår Meyer att man använder enhetslösa linjer, som används som en multiplikator för linjens höjd hos barnelementen. Här är exemplet ovan omskrivet för att utnyttja denna teknik:
Resultatet för koden ovan är exakt samma som för koden nedan. Härifrån kan vi se att vår linjehöjd på? 1? multipliceras med typsnittets storlek li och små element och resultaten är mycket mer förutsägbara.
Observera att linjens höjd är lika med teckensnittstorleken för varje element. Det är viktigt att förstå att det här inte är ett argument för att ställa in din linjehöjd till exakt din stilsortstorlek. Detta gjordes endast för exemplet. Något tal kan användas för linjens höjd och du bör experimentera för att hitta det som fungerar bäst (nästa exempel använder 1.231).
HTML5 Boilerplate Approved!
För att se om det här är en vanlig praxis, hämtade jag en kopia av HTML5 Boilerplate och poked runt i CSS. Visst nog, jag hittade en enhetlös linjehöjd i praktiken, om än i en mer kortfattad, kortversion.
Skapa ett typografiskt rutnät
Om du verkligen vill dyka in för att skapa en bra webtypografi, kolla in Richard Rutters artikel,? Komponera till en vertikal rytm?, Som beskriver några användbara tekniker för jongleringstypstorlek, linjens höjd och marginal eller vaddering för att skapa en perfekt rytm för din sida .
Chris Coyier över på CSS-Tricks plockar upp den här tekniken och tar den vidare genom att kombinera den med, vänta på den, enhetlös linjehöjd! Kolla in den här sidan där du kan visa och ladda ner Chris 'prefab typografiska rutnät med hjälp av dessa metoder.
Slutsats
Dessa tre lektioner kan sammanfattas snyggt. Först, när du lägger in teckensnitt på webben, använd @ font-face för en mycket funktionell, cross-browser-lösning. För närvarande verkar Fontsprings syntax vara den bästa lösningen för att formatera dina @ font-face-deklarationer. Google Web Fonts och Fontsquirrel är de platser du vill gå om du vill ha gratis webbfonter som enkelt kan sättas in på vilken sida som helst.
Nästa, sedan? Px? kan och har problem med att ändra storlek på olika webbläsare, använder du dem? eller? rem? för fontstorlek är förmodligen det bästa sättet att gå. Använda? Rem? möjliggör enkel användning av 62,5% -tricket utan att sammanfoga problem, men det finns ett anständigt argument mot att överge denna teknik, ställa in en avsiktlig basstorlek och göra matematiken manuellt för eventuella undantag som rubriker.
Slutligen, när man arbetar med linjehöjd, är det en bra idé att ställa in en vertikal rytm eller allt ut typografiskt rutnät. En viktig metod att tänka på är användningen av enhetslösa linjer för att förenkla arvet.
Dessa är nuvarande bästa praxis så långt jag ser dem. Gärna lämna en hård rebuttal i kommentarerna för alla dessa tekniker. Jag älskar att gräva in och lära mig om dessa saker och om du har alternativa metoder vill jag se dem!