Skriven av: Richard Fröjdendahl, 2015

Som webbdesigner ställs man ofta inför valet vilket typsnitt som skall väljas. Det kan många gånger vara en rolig uppgift att hitta ett typsnitt, men på samma gång vara ett svårt projekt då det finns en hel uppsjö av typsnitt att välja bland. Inte nog med att vi har våra personliga favoriter när det kommer till design, utan det är även viktigt att lägga fokus på läsbarheten.

I denna guide kommer vi ta upp lite generell information om läsbarhet och typsnitt. Vi kommer att tala om radavstånd, textstorlek och andra små detaljer som påverkar läsbarheten av texten, allt för att du skall kunna skriva text som användaren ej vill släppa ögonen ifrån i första taget.

 

ATT BÖRJA PROCESSEN

Det första jag har tänkt ta upp i denna guide är själva starten av processen när typsnitt skall väljas. Att välja typsnitt kan vara ansträngande, då det finns tusentals att välja mellan. Det kan också vara intressant och spännande att hitta ett typsnitt som passar just den hemsida som du vill skapa.

Vad skall du då välja för typsnitt?

Det bästa sättet att starta processen med att välja typsnitt är att läsa igenom innehållet, och därmed uppskatta mängden text, samt tiden det tar för användaren att läsa igenom det samt även få en inblick av vilken målgrupp som innehållet är till för(Dugonjić, 2013).

Därefter kan vi dra slutsatsen av hur omfattande texten kommer vara. Handlar det om korta stycken där läsbarheten inte är lika viktig, kan vi gladeligen välja vårt typsnitt mer utefter design om vi vill det. Handlar det dock om längre texter där det är viktigt att läsaren har enkelt att hänga med i texten, bör vi då välja ett typsnitt som främjar läsbarheten.

Douglas Bonneville ger tipset om att välja ett typsnitt som är skapat för det ändamål man skall använda det för. För t.ex. brödtext, så är det smart att välja ett typsnitt som är skapat just för att användas till brödtext (Bonneville, 2011).

“Form och innehåll förutsätter varandra. Bäst blir resultatet när arbetet med dem går hand i hand. Alla inblandade bör sätta funktionen främst – av hänsyn till läsaren, som till syvende och sist är den tryckta textens huvudperson.”

-Christer Hellmark, 2006

 

GE PLATS ÅT UTRYMMET

Ett typsnitt med generöst utrymme mellan bokstäverna gör det lättare för ögat att känna igen bokstäverna, och kortar ner lästiden(Bonneville, 2011). Betydelsen av detta är alltså att ögat känner igen formerna på bokstäverna, och tillåts ögat att arbeta utan att bli stört från närliggande bokstav, så går processen mycket snabbare.

läsbarhet

Ett litet exempel på ett typsnitt där mellanrummet är generöst (i detta fall även utökat) som ställs emot ett typsnitt med knappt något mellanrum alls mellan bokstäverna.

Radavstånd (kägel), eller “line-height” som vi ofta träffar på, är en viktig faktor för läsbarhet. Enligt Reichenstein är det ursprungliga radavståndet för litet för att främja läsbarheten. Det blir ansträngande för ögat att fokusera på den linje av text som läsaren befinner sig på ifall radavståndet är för litet. Cirka 140% (1.4) är ett utmärkt radavstånd för läsbarhet (Reichenstein, 2006). Jag brukar laborera med radavståndet själv beroende på vilket typsnitt jag använder. Jag försöker hitta ett radavstånd mellan 1.4 upp till ibland 1.6, där jag känner att jag kan läsa texten ostört och bekvämt.

Det är också viktigt att lämna utrymme utanför texten, d.v.s det vi inom webbutveckling ofta kallar för “padding”. Att ge textstycket ett generöst utrymme minskar chansen för stress hos användaren. Reichenstein beskriver detta som “funktionell design”, och menar på att en hemsida nödvändigtvis inte behöver vara fullproppad med material, utan istället är det viktigt för användaren att känna ro när denne läser materialet. Jag brukar ha mellan 100-150 pixlar utrymme ovanför och under texten vid full skärmstorlek. Detta ger enligt mig texten tillräckligt med utrymme för att bli behaglig att läsa.

Något jag ser att vissa inte tänker på inom webbdesign är antal tecken per rad. Det är vanligt att se långa textrader från sida till sida vilket kan vara ansträngande att läsa. Då textstyckena ofta blir lägre på höjden i dessa fall, väljer designern att fylla på med allt ifrån bilder till länkar och annat just för att fylla ut sidan. Många gånger ligger det ingen djupare tanke bakom utfyllnaden. Dessa objekt kunde med fördel ha placerats på andra ställen på hemsidan, och istället låtit textstycket få vara där det är i lugn och ro. Med ett mindre antal tecken på rad växer hemsidans höjd, och utfyllnaden blir inte nödvändig.

Jag brukar själv ha som tumregel att inte överstiga 55 tecken per rad, något som givetvis i vissa fall kan överträdas, men gärna inte för mkt. Reichenstein menar på att 10-20 ord per rad och en bredd på 50% av skärmens yta är en bra tumregel (Reichenstein, 2006). Enligt Hellmark skall text inte överstiga 55-65 tecken per rad, och inte heller vara färre än 35-45 tecken (Hellmark, 2006).

skön text

SERIF ELLER SANS-SERIF?

De flesta som arbetar med design av något slag känner säkerligen till begreppet seriffer och vad det är för något, det vill säga “klackar” på bokstäverna. Dessa är skapade för att främja läsbarheten, genom att guida läsaren lättare genom texten samt ge en läsbarare struktur för brödtext (Constantin, 2013). Constantin hänvisar till en studie, där hela 61,5% av de studerade webbplatserna använder sig av seriffer till brödtexten. Kollar man däremot på rubriker, så är det nästan jämn fördelning mellan seriffer och sans-serif.

Personligen använder jag nästan alltid seriffer när jag skapar ett material med en större mängd text. Vanligtvis består de webbsidor jag själv skapar av en mindre mängd text, och tillåter mig därmed att använda sans-serif i både rubriker och i brödtexten vilket jag vanligtvis gör. Oftast gör jag detta av personliga skäl, då sans-serif känns mer modernt och fräscht i min värld. Självklart gör jag valet utefter min design, och jag har aldrig några fasta regler som jag förhåller mig till.

Många gånger mixar jag de båda, och använder mig av sans-serif i rubriker och seriffer i brödtexten och ibland tvärt om. Något som Constantin anser kan utöka de visuella intrycken och läsbarheten av en webbsida (Constantin, 2013).

STORLEK PÅ TEXT

Vilken storlek är då bäst för att använda på webben, för bäst läsbarhet?

Tidigare fanns det argument för mindre storlekar på texten. En av de jag har kommit i kontakt med har varit “användaren slipper scrolla”. Användarvänlighets-experten Oliver Reichenstein påstår dock att användaren är helt okej med att scrolla. Han jämför det med att en läsare av en bok inte har några som helst problem med att byta sida i boken. Det viktigaste med texten, det är läsbarheten (Reichenstein, 2006).

Ett bra standardmått på textstorlek är 16 pixlar enligt D Bnonn Tennant. Han baserar detta på längden användaren normalt har till en datorskärm, mot hur det flesta håller en bok när det läser. En bok har oftast cirka 10 pixlar stor text, och med det extra avståndet som de flesta har till en datorskärm jämfört med boken, passar den i flesta fall bäst läsbara texten i storlek 16 pixlar (Tennant, 2011).

Jag brukar personligen använda mig av väldigt stora rubriker, och jag lämnar alltid generöst med utrymme åt dessa. Ofta har jag runt storlek 50 pixlar på mina huvudrubriker så att de syns mycket tydligt, och runt 40 pixlar på underrubriker. Enligt statistik som Constantin förmedlar har dock majoriteten av de hemsidor i studien rubrikstorlekar på 29-32 pixlar.

 

VART STÄLLER VI TEXTEN?

Tidigare ställdes all text centrerat, något som under de senaste 100 åren har ändrats. Numera ställs ofta texten vänsterställt förutom längre texter i böcker eller spalt, som brukar ha rak högerkant. Detta för att minska textens oroliga intryck (Hellmark, 2006).

Hellmark anser att en försiktig blandning mellan centrerad text och vänsterställd är acceptabelt, dock bör man inte använda sig av en centrerad rubrik med vänsterställd text under, då brödtexten inte fyller upp hela spaltbredden som vi i vår teori föreställer oss (Hellmark, 2006).

BARNHEM ÅT DE FÖRÄLDRALÖSA

Något som är störande i den typografiska helheten är föräldralösa ord, också känt som det mindre välklingande ordet “horungar” på gammelsvenska. Detta innebär att det avslutande ordet på ett textstycke hamnar ensamt på en egen rad. Detta är fult, och ser helt enkelt inte genomtänkt ut.  Enligt Hellmark finns det allvarligare typografiska fel, och det finns många förlag som helt enkelt inte orkar ta sig tid att avlägsna dessa föräldralösa ord i deras böcker (Hellmark, 2006). Personligen tycker jag det påverkar designen mycket, och jag försöker i de flesta fall arbeta bort dessa horungar. Det är inte alltid enkelt då mycket av det vi skapar på webben är dynamiskt, och en ovetande administratör för en hemsida kan publicera textstycken i din design där föräldralösa ord förekommer. Man får även ha i åtanke att på vissa skärmstorlekar så flyttas ord ner, och kan således skapa horungar om du har otur.

Hur som helst är det värt att tänka på detta enligt mig. Har du t.ex. skapat tryckmaterial som kommer vara statiskt anser jag det vara viktigt att försöka få med minst tre ord på varje rad.

orphant

KORT SAMMANFATTNING

Här kommer en kort sammanfattning av min guide till läsbarhet på webben. Några snabba tumregler:

  • 35-65 tecken per rad, ungefär 50% av skärmstorleken bred text
  • Generöst med utrymme över och under text (100px+)
  • Radavstånd minst 1.4 (140%)
  • 16 pixlar stor text, bra grundpelare
  • Läs igenom texten innan du väljer typsnitt och stilregler
  • Sätt alltid läsbarhet som prioritet före design
  • Inte för långa centrerade textstycken
  • Arbeta bort föräldralösa ord

 

typsnitt

Som avslutning bjuder jag på några av mina favorittypsnitt som inspiration. De flesta av dem är tagna ifrån google fonts, och är därmed gratis och webbsäkra.

Referenser:

Bonneville, D. and Bonneville, D. (2011). How To Choose A Typeface – Smashing Magazine. [online] Smashing Magazine. Available at: http://www.smashingmagazine.com/2011/03/how-to-choose-a-typeface/ [Accessed 20 Nov. 2015].

Constantin, J. (2013). Typographic Design Patterns And Current Practices (2013 Edition) – Smashing Magazine. [online] Smashing Magazine. Available at: http://www.smashingmagazine.com/2013/05/typographic-design-patterns-practices-case-study-2013/ [Accessed 20 Nov. 2015].

Dugonjić, M. (2013). Designing For The Reading Experience – Smashing Magazine. [online] Smashing Magazine. Available at: http://www.smashingmagazine.com/2013/02/designing-reading-experience/ [Accessed 20 Nov. 2015].

Hellmark, C. (2006). Typografisk handbok. Stockholm: Ordfront.

Tennant, D. and Tennant, D. (2011). 16 Pixels: For Body Copy. Anything Less Is A Costly Mistake – Smashing Magazine. [online] Smashing Magazine. Available at: http://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/ [Accessed 20 Nov. 2015].