Förstå Typografi Skriva För Webben

I webbdesign är ämnet typografi viktigt när man överväger alla områden av användarupplevelse. Varje webbplats har behov av text, och det finns riktlinjer som du kan följa för att skapa exceptionellt fantastiska layouter. Gridlines, bokstäver, fonthöjd, textavstånd, färgscheman och andra liknande egenskaper bör alla beaktas.

I den här artikeln skulle jag vilja gräva in i webtypografiens rike. Vi ska titta på populära idéer bakom utformningen av trovärdiga webbsidor. Längs vägen ska jag introducera några hjälpsamma CSS3 egenskaper vilka designers glömmer ofta.

Jag har försökt att lägga mer fokus på teori och ideologier på webben. Detta ger ett bredare fokus på digital text i allmänhet, och du kan webbdesignern då välja vilka stilar som ska tillämpas för vilket syfte. Kontext är alltid nyckel och du måste bestämma detta på ett lämpligt sätt för varje projekt du arbetar på. Tänk på denna guide ett referenspaket som är fullt av moderna webbtrender från typografiska innovatörer över hela världen.

Mät dina stycken

Du behöver inte byta ut gården för denna typ av mätning. I själva verket avser åtgärden i relation till typografi bredden (horisontellt) av ett visst stycke på din sida. Det är inte ett ämne som alltid diskuteras, men det påverkar läsbarheten för ditt innehåll. Som en allmän tumregel vill du begränsa en rad med en längd av 75-85 tecken (inte nödvändigtvis inklusive mellanslag).

Nu kan det här tyckas som lite sträckt för några bredare layouter. Speciellt om din design är flytande och avsedd att anpassas när användaren omformar deras webbläsarfönster. Du kan alltid ställa in en CSS maximal bredd egendom på huvudinnehållet div. Kodningsmarginaler och teckenstorlekar i skalbara enheter (procentandelar, ems) i stället för pixlar tillåter sådan flexibilitet inom vilken layout som helst.

Det finns ingen max måttenhet att vara försiktig med. Hur du skriver innehåll och formulerar ord i meningar är mycket viktigare än bredden på varje rad. Men kom ihåg att längre meningar är mycket svårare att läsa jämfört med kortare, kortfattade uttalanden.

Ledande Förklarade

Vid utformningen, tillsammans med din paragrafåtgärd, bör du också överväga tanken på ledande. Ordet uttalas “ledd-ing”, såsom bly som används i pennor. Detta namn härstammar från de äldre dagarna av mekanisk uppsättning där bandremsor placerades mellan textlinjer.

Ledande är fortfarande ett mycket viktigt koncept i webbdesign och går hand i hand med styckeåtgärder. När din punktbredd ökar bör du tillämpa en lika stor ökning av mängden ledande, eller mellanslag mellan textrader. Detta extra utrymme gör behandlingen mycket enklare på dina ögon.

Om du skulle skumma igenom mycket tätt sårad text kan det vara svårt att fokusera på en enda rad. Om så är fallet, försök öka antalet ledande med CSS radavstånd fast egendom. Du vill alltid ha mer utrymme i mellan rader av text än mellan ord. Annars kan dina textblock visas som tidningstryck och kommer inte vara mycket användarvänliga att skumma igenom.

En solid teknik är att applicera mer utrymme än vad som ursprungligen behövdes och att minska det om det behövs. Inte all text skapas lika och du behöver säkert stycken med olika interna formateringar, såsom djärva ord, ankarlänkar, understrykningar, etc. Med lite extra ledning kommer dessa förändringar inte att vara så balanserade jämfört med den andra texten.

Använd naturliga teckensnitt

Det finns fortfarande en handfull webbplatser som väljer att hålla sig till mindre än genomsnittliga teckensnittstorlekar. 11px-12px kan tyckas vara mycket mer av “standard professionell” för företagslayouter. Men dessa storlekar hjälper inte de flesta besökare som söker specifik information.

Vanligtvis webbläsare som standard till 16px om du inte tillämpar några CSS-regler. Även detta kan betraktas som lite litet om du har extra rummet i din layout för att rymma större text. Större skriftstorlekar ser bara trevligare ut och är mycket lättare att skumma på relativa sökord. Serif typsnitt väljs inte ofta som styckematerial, men du kan fortfarande komma undan med dem. Jag föreslår att du använder mycket större textstorlekar för serifbaserade teckensnitt för att förbättra läsbarheten och uppmärksamma.

Svara på användarens miljö

När du prövar olika teckensnittfamiljer och storlekar måste ditt innehållsområde anpassa sig i enlighet med detta. Standardenheten jag håller med är ems eftersom de lätt kan omformas baserat på ledigt utrymme och skärmupplösning. Detta optimerar prestanda på användarens slut som är viktigast.

Men när du har så flexibelt innehåll som det gör din layout utsatt för ett buggyutfall. Innehållet i ditt sidfot eller sidofält kan sluta skev eller obalans i vissa webbläsare. Eller det kan hända att du har svårt att lägga upp bilder eller andra former av media i din huvudtext. Det finns några andra alternativ att använda ems om du behöver en layout i fast stil - men försök båda lösningarna för att se vilken du gillar bäst.

Kom ihåg att fasta bredder och styckestorlekar låser in många inställningar i din design. Det är bra för innehåll som innehåller många stationära estetiska effekter - tänk bakgrundsbilder eller massor av anpassade sidobar widgets. Det är också en enkel process att bygga ett område för vätskeinnehåll i den vänstra kolumnen med fasta sidobar till höger.

Stil baserat på kontext

Några andra riktigt snygga CSS-tricks har blivit dolda från vanlig design. Specifikt finns trender kopierade från utskriftsarbete som kan tillämpas i rätt sammanhang.

Många webbdesigners har aldrig ens använt textinnehållet CSS-egenskapen. Du anger ett värde som anger den första raden i ett stycke som riktas mot denna regel. Enheter följer standardtextalternativen som pixlar, poäng, ems, procentsatser ... Det är verkligen ingen trend du hittar i de flesta bloggar. Men det ger en bra sidrytm medan du läser igenom stora textblock.

Det finns en annan typ av CSS-väljare som är känd som en pseudoelement. Det här kan rikta in sig mot en viss del av valfri innehållsväljare. CSS3: första bokstaven pseudo väljaren är perfekt för att skapa fina stilar på viktiga punkter. Du kan jazz upp varje stycks öppningsbrev - liknar en ganska historiahistorikbok - med fetstil, kursiv eller till och med byta typsnitt. Kolla in det här fina exemplet av droppkepsar som innehåller en del extra CSS-kod du kan använda.

Spelar med Letter Spacing

Jag är säker på att många av oss har hört termen spårning förrän ändå aldrig insåg att det är samma idé som egenskapen CSS brevavstånd. Dessa två begrepp är ett i samma, relaterat mellan tryck och digital typografi. Enheten hänför sig till mellanslag mellan bokstäver inom en enda textrad. Det här är en väldigt snygg effekt att tillämpa på rubriker och till och med några mindre innehållsblock på din webbplats.

Det är viktigt att inte förväxla villkoren med bokstavsavstånd med kartering. Båda är relaterade till typografi och avståndet mellan bokstäver. Men kerning hänvisar specifikt till avståndet mellan 2 enskilda bokstäver i ett ord. Brevavståndsegenskapen gäller för ett helt element av text, vare sig det är ett ord eller stycke eller rubrik eller ankarlänk. Tänk på detta när du spelar med nya idéer för stilar.

Jag använder ofta några pixlar / punkter i brevavstånd i rubriker med alla huvudstorlekar. Detta bryter upp de enskilda tecknen med lite extra utrymme och visas också som en mycket definierad “rubrik” se. Negativt brevavstånd fungerar också bra i rätt sammanhang. Jag brukar hålla fast vid mindre enheter, kanske -0.03em eller -0.1em högst.

Kombinera och matcha typsnitt

Designkoncepten bakom webtypografi är verkligen en form av konst, inte så mycket av vetenskapen. Det finns riktlinjer du kan följa, men det finns inga fasta regler som du är begränsad till. Det betyder att du har en enorm mängd frihet att experimentera blandning och matcha de olika teckensnitt du har tillgång till.

Den allra mest populära kombinationen av teckensnitt innehåller en serif / sans-serif split för rubriken och styckeinnehållet. Jag gillar att byta upp båda, men oftare använder jag serif-teckensnitt i rubrikrubrikerna. De extra markeringar och slag på varje bokstav gör att de blir smidigare som dominerande sidtext.

Dessutom är sans-serif-teckensnitt renare och lättare att skryta ihop i meningar. Det är inte att säga serif typsnitt fungerar inte i stycken. Det finns faktiskt gott om bra exempel! Men ett litet känt begrepp som heter x-höjd är avgörande för att skilja på en typsnitts komplexitet. Från att titta på baslinjen för ett par ord kommer du att hämta upp hur sådana typsnitt kommer att “passa in” med varandra.

Det är också värt att notera betydelsen av rymden mellan dessa olika element. Du kommer sannolikt att använda 2 eller 3 olika rubrikstilar, så var och en av dessa kommer att komma ut med ett utseende. Jag tenderar att hålla mina h2 / h3-element lite närmare följande styckblock, eftersom detta innebär att det finns en korrelation mellan innehållet.

Denna korrelation är särskilt användbar när du använder två helt olika teckensnitt intill varandra. Jag rekommenderar inte mer än 3 olika fontfamiljer per uppsättning innehåll. Efter alltför många anpassningar verkar dina ord jumbled tillsammans och hela sidan kommer ut som en hodgepodge av felaktiga teckensnitt.

Slutsats

Det är mitt hopp att dessa begrepp kommer att kasta lite ljus på det komplicerade ämnet för digital typografi. Det kan vara svårt att verkligen komma in i arbetet som designer, speciellt om hela ämnet är främmande för dig. Men fortsätt studera och var noga med att träna en hel massa!

Nästa vecka: Håll dig stillad så vi tittar på lite hjälpsamma verktyg och resurser för bättre webtypografi.

Mer…

Här är fler typografi relaterade inlägg:

• Utställning av webbdesign med vacker typografi
• Bättre typografi för moderna webbplatser
• Snabbguide till typografi: Lär dig och bli inspirerad