Hemsidors Typografi

av Nils Fridlund
den 31 augusti, 2017
Font & färg

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.

Författare

Nils Fridlund

Nils är specialiserad på sökmarknadsföring (SEO & AdWords). Karriären började 2012 och har sedan dess drivit egna projekt, resultatbaserad SEO mot kunder, bloggat på MajesticSEO och agerat konsult gentemot andra webbyråer. Idag är Nils VD och Head of Search på Sunbird. Boka ett möte och få en kostnadsfri första konsultation.

Du kanske också gillar:
Så dubblar du din hemsidas försäljning med konverteringsoptimering (CRO) 2018

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 försäljning med konverteringsoptimering. Kapitel 1: Vad

Modern webbdesign

Digitala trender 2019 – Håll din hemsida modern längre

Det genomsnittliga spannet en person håller fokus har gått från 12 sekunder år 2000 till åtta sekunder år 2015. Webbdesign ändras ständigt och anpassas efter användarna.

Bli en vinnare på Google

Bli en vinnare på Google – En konkret guide steg för steg

Syftet med detta inlägget är att ge dig konkreta steg för att öka din trafik och öka er försäljning. 1. Sökordsanalys Första steget mot att vinna

Font & färg

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

Mobil som visar upp responsive webbdesign

Responsiv webbdesign till ditt företags hemsida – Viktigt av flera anledningar

I en tid då mobiltelefoner, surfplattor m.m. fått en allt större plats så förväntar sig många hämta information på internet smidigare. Det är minst lika vanligt

Bild på säkra servrar i lokal

Ökad säkerhet för WordPress hemsidor

WordPress angrips ofta av hackare och spammare. Samtidigt som plattformen har rykte om sig att vara väldigt användarvänlig så är den tyvärr sårbar vid attacker. Varför

Christian Sandström

Nedan ord är Christians egna och representerar den resa Wellflix och Sunbird tagit.

Jag har länge haft en dröm om en affärsidé som nu skulle ta nästa steg. Vi anlitade en varumärkesbyggare, en logotypdesigner och Sunbird för vår webbutveckling. Så här gick det.

– Då hemsidan skulle ta längst tid började vi tillsammans med Sunbird slipa på designen. Jag fick först se några tidiga idéer och gillade riktningen vi skulle ta. Jag godkände och Sunbird fortsatte jobba på samma spår. Några dagar senare ringde Nils (på Sunbird) upp och skickade över vad de gjort. När jag fick se designen blev jag helt tyst och fann mig själv att nästan fälla en tår. Min dröm som jag haft så länge var framför mig. Jag har aldrig förväntat mig att en byrå ska kunna ha den förståelsen och det engagemanget.

– Under tiden hemsidan kodades gick jag vidare och funderade på vårt namn. Även här tänkte jag att jag behövde extern input från folk i branschen. Jag gick till två olika byråer som enbart jobbade med branding. Namnen de kom upp med var inte bättre än de jag själv kommit på och tackade besviket nej och sköt upp idén om det perfekta namnet till senare. Jag valde att behålla mitt gamla namn – Fungera & Prestera.

– När jag valt att behålla namnet gick jag till logotypdesigners för att sätta logotypen. Vid detta laget var både färger och namnet bestämt. Jag fick här totalt sett ett tiotal logotyper att kolla på. Logotyperna kändes som något jag sett förut och att de var gjorda utan minsta förståelse för just vårt företag. Jag hade både kontaktat brandingbyråer och logotypdesignerns som båda jobba med detta heltid och resultatet blev bristfälligt. Vid detta laget var jag rätt nedstämd och min dröm kändes inte riktigt lika nära.

– Jag ringde upp Nils för att be om råd. Vi pratade länge och kom fram till att Sunbird skulle ta på sig att göra både företagsnamnet och logotypen. Sunbirds visade återigen prov på sin förståelse och att ha lyssnat på mig. Vårt resultat:

 

Wellflix

 

 

 

– Min insikt om Sunbird är att de verkligen förstår mig som kund och brinner för var de gör. Sunbird har inneburit en hel del för Wellflix och vi lämnar alla dagar i veckan vår rekommendation.

– Christian Sandström

Vi har jobbat med Sunbird sedan 2013 och har bara det senaste året ökar vår organiska försäljning med +247%.

Det unika med Sunbird är att vi jobbar direkt med Sunbirds VD, Nils, och inte en projektledare. Nils har ett starkt driv och kommer med egna idéer som ökar vår försäljning. Han är enormt skarp och definitivt en av de bäst vi jobbat med. Nils förstår oss och blir som en förlängd arm inom webbutveckling och sökmotoroptimering.

Vi tror på Sunbirds affärsidé. De kombinerar snygg webbdesign som säljer tillsammans med ökad trafik. Vi har fastnat för Sunbird och rekommenderar dem till alla växande företag som vill driva resultat.

– Erik Schuss