Att skriva på webben är inte helt olikt som att skriva för tryck. Många principer stämmer för båda och kan tillämpas för respektive medium. Oavsett om du använder dig av pixlar, ems eller viewport width finns det några saker att tänka på och akta sig för så att inte texten blir svårläst för besökaren. Här kommer några tips för att förbättra typografin.
Tips nr 1: Gör inte dina textrader för långa.
Detta är något som ofta kan förekomma på hemsidor. Jämför dessa två texter, vilka anser du lättast att läsa?
En rekommendation är att hålla sig till max 75 tecken i bredd. Allt längre än det blir svårt att läsa och orsakar onödig belastning på ögonen på grund av avståndet ögat måste resa från vänster till höger och tillbaka igen. Hur gör vi detta med css? Jo, sätt en max-width på elementet paragrafen är i. Själv rekommenderar jag att ställa in en max-width separat i en container eller en grid-klass istället för på paragraf-elementet i din css för om man i framtiden vill ändra på textens bredd eller storlek blir det då lättare att korrigera.
Tips nr 2: Rätt radavstånd.
Titta på dessa tre paragrafer. Vilken tycker du är lättast att läsa?
Felaktig radavstånd bidrar till en svårläst text. Avståndet mellan raderna skall vara så stort att det bildas ett tydligt ljusrum. En bra tumregel är att hålla radavståndet mellan 140% till 180% av grundstorleken på fonten. Mindre gör det svårläst och känns trångt medans större gör att ögat kan förlora sin fokus och man blir vilsen i texten. Hur tillämpar vi detta med css då? Jo säg att du har en font-size på 18pixlar och du siktar på att ha ett radavstånd på 150% så multiplicerar du helt enkelt din font med 1.5 för att få rätt radavstånd: 27 pixlar.
Typsnittet själv kan avgöra vilket radavstånd som krävs. Ett typsnitt med långa upp- och nerstaplar behöver mycket luft för att staplarna inte skall kollidera. Titta på bilden nedan:
Tips nr 3: Undvik tunn font om inte designen kräver det.
Kanske ett av de vanligare problemen på nätet när det gäller typografi på webben. Nämligen användandet av extremt tunna sans-serif typsnitt för stycketext. Detta gör texten svårläst eftersom texten börjar blekna mot bakgrunden på grund av bristen på kontrast. Ett exempel på ett för tunt typsnitt:
Försök och läs texten där. Märker du att du kämpar för att läsa den? Mer fokus krävs för att läsa den. Läsbarheten minskar och läsningen blir mycket mer irriterande än den verkligen måste vara. Jag rekommenderar att du väljer en vanlig vikt för brödtext. Att läsa tunna fonter kan vara en fin effekt i korta partier men att läsa den i en längre form blir ansträngande.
Tips nr 4: Skapa en bättre hierarki med fetstil på dina Rubriker.
Kan kännas självklart men en tydlig hierarki är avgörande för att kontrollera läsarens fokus, särskilt i komplexa applikationer som visar massor av data. Även om det brukade vara vanligare för ett par år sedan, brukar jag fortfarande se att många använder mycket tunna vikter för rubriker på webbplatser. Hur svårt är det att se rubriken nedan?
Det finns ofantligt mycket böcker och artiklar om typografi om man vill lära sig mera men detta är enkla knep som ger en bra grund. Som webbdesigner är det en bra egenskap att ha grundläggande information om hur man ska presentera text på nätet. 95% av informationen på webben är nämligen text.