Hemsidors Typografi

Detta är ett smakprov av Sunbirds kunskaper. Vi hjälper dig mer än gärna med en ny hemsida till ditt företag.

Med hjälp av våra webbplatser vill vi fånga besökarnas uppmärksamhet och intresse till den grad att det leder till konvertering. Tyvärr är typografi ett typiskt element som allt för ofta ignoreras med anledning av att det inte bedöms tillräckligt värdefullt. Men det finns mycket att vinna genom att använda sig av enkla knep baserade på kognitiva beteendemönster hos människor. Det första intrycket hos besökaren är oerhört betydande, och väl genomtänkt typografi förbättrar en webbplats karaktär och kan stärka ett företags varumärke.

Hierarkiska förhållanden

Studiet av gestaltpsykologi har bidragit till många betydelsefulla slutsatser som kan appliceras inom webbdesign. Människor tenderar nämligen att bearbeta textinnehåll hierarkiskt. Genomtänkt typografi kan således få människor att bättre tolka innehållet på din hemsida genom att få de viktigaste elementen att framstå tydligast i en form av visuell hierarki. Därför bör man laborera med textstorlek, färger och teckenstil. Att organisera text syftar till att läsarens kognitiva process ska leda till att läsaren bevarar information lättare. Delar av innehållet som behöver extra uppmärksamhet måste således vara framträdande.

Människors benägenhet att organisera information

Det finns en mental benägenhet hos människor att organisera information. Visuella element delas i huvudsak in i fem olika grupper, och dessa kan man med fördel utgå från i sitt typografiska arbete på webben, och i synnerhet i den hierarkiska strukturen som ju syftar till att leda besökaren vidare.
Likheter – när alla element i innehållet återges på ett liknande sätt, förutom call to action-elementet som istället bör stå ut ur mängden.

Upprepningar – läsarens ögon tvingas röra sig från ett objekt till ett annat.

Ifyllning – när hjärnan måste fylla i något som inte uppfattas fullständigt av ögat.

Sammanhållning – att enskilda objekt i nära anslutning kan uppfattas som grupper.

Figurer och grund – den visuella relationen mellan förgrund och bakgrund. Den har betydelse för hur vi uppfattar bilder eftersom kanterna formar bilderna vi ser.

Skillnaden mellan typsnitt och font

Många använder begreppen typsnitt och font synonymt vilket är felaktigt. Ett typsnitt avser en grupp med tecken, bokstäver eller nummer som alla har samma design. Till exempel så är Arial och Calibri två olika typsnitt och inte två olika fonter. En font är ett specifikt typsnitt med en given bredd, storlek och övrigt utmärkande egenskaper. Om Arial är ett typsnitt så är 12 pt Arial Bold en font.

Storlek på font

Generellt sett så är det ett större avstånd mellan datorskärmen och läsarens ögon än vad det är när man läser tryckt text i exempelvis en tidning eller en bok. Därför måste fontstorleken kompenseras. Att använda sig av en fontstorlek på 16px i brödtext är optimalt. Det finns en överhängande risk att för liten fontstorlek kan leda till en lägre konverteringsgrad, vilket helt enkelt beror på att läsaren tappar fokus om texten är för ansträngande att läsa. Tyvärr är det alldeles företag många företag som inte beaktar denna simpla åtgärd.

Luft mellan raderna

Ytterligare ett optimalt mått är 1,5 i radavstånd. Det underlättar för läsaren att få en mer övergripande förståelse för en textmassa. Med tillräckligt mycket luft mellan raderna ökar nämligen läshastigheten. Det medför en ökad chans att läsaren stannar kvar på hemsidan eftersom det tar kortare tid att selektivt finna något som förhoppningsvis är intressant. I annat fall finns en överhängande risk att besökaren snabbt klickar sig vidare till en annan webbplats och konkurrerande företag.

Line lenght

Vad gäller ”line lenght” så bör man varken hålla sig för kort eller för långt. Alldeles för korta avstånd innebär att ögonen med mycket korta mellanrum tvingas positionera sig tillbaka i vänstermariginalen vilket kan göra det anstängande för ögonen. Och om textraden istället är för lång så kan det ibland bli svårt för läsaren att hitta nästa rad. Det bidrar till att läsflödet bromsas upp och gör texten onödigt svårläst.

Seriffer och sans seriffer

Att uteslutande använda sig av antingen teckensnitt med seriffer eller sans seriffer är inte det bästa för den typografiska upplevelsen. För hierarkins skull är det till exempel fördelaktigt att ha seriffer i titlar och sans seriffer i brödtext eller vice versa. Överlag rekommenderas dock seriffer för titlar medan sans seriffer är bättre lämpade för brödtext. Kom ihåg att det inte finns något egentligen givet svar för vad som lämpar sig bäst beträffande seriffer och sans seriffer.

Det är viktigt att sträva efter kontraster eller korrenspondens. Det innebär att man använder sig av olika typsnitt som kompletterar varandra snarare än att de hamnar i konflikt med varandra. Konflikt uppstår om typsnitten är allt för lika.
Två korresponderande typsnitt skiljer sig men är ändå så pass lika att läsaren inte undermedvetet distraheras från det primära fokuset att tillskansa sig information på hemsidan. Kontrast uppstår när två typsnitt skiljer sig ur många aspekter förutom minst en som istället medför att typsnitten kompletterar varandra.
Det är bra att variera sig men aldrig för mycket. Innehållet på hemsidan ska inte innehålla samtliga av dina mest favoriserade typsnitt. Håll det istället enkelt. Studera din målgrupp noggrant och ta reda på om ditt typsnitt måste följa sedvanliga formaliteter eller om fonten kanske kan rentav kan vara aningen större. Utgå alltid från att din text bör vara tydlig och läsbar.

Färger

Valet av färger är givetvis också viktigt i arbetet med typografi. Grön text mot röd bakgrund är förmodligen ingen optimal kombination för läsbarheten. Men det dyker ständigt upp trender inom webbdesign och nu för tiden är det inte ovanligt att webbplatser exempelvis har grå text mot grå eller vit bakgrund. Det är dock viktigt att inte låta trender styra i ditt webbskapande så att läsbarheten får lida.
Kontraster är bra inom många områden, och vad gäller färger så fungerar alltid svart text mot vit bakgrund. Det är både en klassisk och säker kombination. Överlag så är en högre kontrast mellan färger bra för läsbarheten. Men det finns de som hävdar att högre kontraser medför påfrestningar för ögat och läsbarheten, och istället förespråkar varierande gråa kontraster.
Att finna rätt kontrast är inte alltid så enkelt. Det beror främst på att olika skärmar varierar. En grå nyans kan uppfattas mer eller mindre mörk beroende på skärmens förutsättningar och inställningar. Vad gäller mobiltelefoner så använder vi de ofta utomhus i starkt ljus vilket kan ge skärmarna en bländande effekt. För att lindra en sådan effekt gäller det att ha tillräckligt höga kontraster.
Tänk på att absolut svart, d.v.s. #000000 kan försvåra läsbarheten för dyslektiker och på sikt trötta ut ögonen. Istället är det bättre att använda sig av en väldigt mörk grå färg men som i nyans är lik absolut svart.

Att välja bästa typsnitt för en bättre konverteringsgrad

Det är viktigt att inte glömma bort att syftet är att besöken på din webbplats ska leda till försäljning av något slag. Därför bör användarbarhet komma före det personligt stilfulla även om de två begreppens funktion inte utesluter varandra. Det mest stilfulla typsnittet resulterar inte nödvändigtvis i fler sales åt ditt företag, och om det är svårläst text leder det sannolikt till färre istället.

Besökaren till din hemsida ska givetvis komma ihåg budskapet, det övergripande meddelandet eller ett konkret erbjudande genom call to action. Om besökaren istället lämnar din hemsida och endast kommer ihåg ett utstickande typsnitt så är det att betrakta som ett misslyckande. Kom ihåg att typsnittet ska vara lättläst och komplettera textinnehållet.

Digital analys: Du har 8 sekunder på dig att fånga besökarens intresse innan den lämnar

Koncentrationsförmågan har blivit sämre Koncentrationsförmågan har minskat kraftigt senaste året vilket är något den webbplats man gör måste möta. Enligt

Så dubblar du din hemsidas försäljning med konverteringsoptimering (CRO) 2019

Syftet med denna guide kommer vara att förmedla den kunskap, tekniker och verktyg ni behöver för att dubbla er hemsidas