Ordens utseende betyder mer än vad vi tror – ögat dras automatiskt till det tydliga, medan det mindre tydliga hamnar i bakgrunden. I den här artikeln berättar vi om hur du kan arbeta med typografi för att lyfta fram det viktiga i ditt innehåll, och samtidigt göra din hemsida mer lättläst.
Huvudsyftet med bra typografi – alltså allt det som rör bokstäverna och textens utseende – är både att underlätta läsandet och att locka ögat till det vi vill att läsare ska lägga märke till. Inom grafisk design är typografi central, och på internet är det kanske extra viktigt att vara omsorgsfull om textens grafiska snitt. På en datorskärm tävlar din hemsida ständigt om utrymme med knappar, banners och andra grafiska element, och det gäller att visa besökaren vad som är vad.
Tanken med den här artikeln är därför att undersöka hur du på ett bättre sätt kan använda dig av typsnitt, färg och form för att visa besökaren vad som är viktigt på din hemsida.
Inom den publicistiska världen talar man om rubriker, underrubriker och brödtext som textens stora huvudblock. Rubriken är den korta ordföljd som sammanfattar vad artikeln handlar om, underrubriken innehåller mer information om artikeln och brödtexten är artikelns själva innehåll. När du arbetar med texten för din hemsida kan det vara bra att tänka på samma sätt – vad är min rubrik och undertext? Hur ska de skiljas åt?
När man skriver på sin hemsida tillkommer det också en rad ytterligare element; du har kanske en huvudrubrik för hela webbsidan, en rad menyknappar och ett textblock med länkar på sidan av huvudmatieralet. När vi talar om typografiska heirarkier avser vi hela kedjan av textelement, och värderingen av hur viktiga de olika elementen är.
Här har vi den vy som möter besökaren på Moderna museets hemsida. Som ni ser finns det en rad textelement som skiljer sig åt i typografi, vikt, storlek och färg. Notera att det som man ser först är namnet på utställningen ”Frontlinjer”, och konstnären Omer Fasts namn – genom att skriva denna text i ett typsnitt som skiljer sig från hemsidans övriga element markerar man för besökaren att just det här är centralt. Den gråa färgen i konstnärens namn gör också att blicken dras direkt dit.
Läg också märke till museets logotyp, som trots att den ligger högst upp på sidan i stiliserad text inte fångar ögat direkt. Tack vare den vita färgen mot den blåa bakgrunden hamnar logotypen längre bak i hierarkin. Notera också den svarta menyraden som, tack vare sin kontrast mot den vita bakgrunden, är tydlig men inte tar upp så stor plats.
På Thielska gallieriet har man använt sig av en mycket tydlig, och något vågad, typografi för att lyfta fram sin utställning om Edvard Munch: den vita texten syns direkt. Även här lever galleriets egen logotyp en något undanskymd tillvaro i det övre vänstra hörnet, medan menyn inte heller drar alltför mycket uppmärksamhet till sig. Thielskas Munch-affisch är ett bra exempel på hur effektivt vitt kan vara när det sätts i kontrast med flera färger – eftersom sidan är så vit i sig ser man direkt den färgglada Munch-målningen, och den stora texten som verkligen står ut i kontrast mot sidans övriga element.
När man försöker skapa en hierarki är det alltså tacksamt att använda sig av både färger, storlek på texten, vikt och typsnitt för att markera vad som är viktigt och vad som ska ligga i bakgrunden.
Hur ska man då tänka? Det viktigaste elementet – din huvudinformation – bör skilja sig från det andra materialet genom att ha någonting speciellt kring sig. Hur du slutligen väljer att lyfta fram ditt material beror lite på hur din hemsida ser ut, men det finns några huvudidéer som kan vara till hjälp:
Det här är en påhittad hemsida om olika material – i det här fallet ett avsnitt om glas. Här har vi, som ni ser, inte använt några typografiska medel alls förutom att skilja de olika textstyckena åt med utrymme. Här är det så klart svårt att direkt se vad som är vad i texten, och det är svårt att veta var man ska börja läsa.
Om vi istället gör om textelementen något blir det genast lite tydligare:
Här har vi gjort flera saker för att göra texten lättare att hitta i:
- Vi har ramat in sidans huvudnamn och gett den ett lättare typsnitt för att flytta tillbaka den i strukturen.
- För att göra menyraden mer diskret i förhållande till huvudmaterialet har även den fått ett tunnare typsnitt, som samtidigt skiljer ut den från övrig text.
- Eftersom vi vill visa läsaren vad just den här sidan handlar om har vi gjort rubriken ”Glas” större, gett den ett serif-typsnitt och gjort den vit. Alla de här sakerna lyfter fram rubriken och gör att man direkt ser den.
- Vi har också ändrat vikten på underrubriken till en fetare stil, vilket gör att man tydligt ser att den inte tillhör brödtexten.
Genast ser det bättre ut: här dras blicken till huvudrubriken, och underrubriken går lätt att skilja ut. Brödtexten är skriven i en sans-serif (i det här fallet Ebrima) vilket på en datorskärm tenderar att göra texten något lättare att läsa
(även om vissa typer av serifer även fungerar bra).
Ett bra sätt att hitta en passande typografisk ordning är alltså att på ett tidigt stadium bestämma dig för vad som är brödtext, vad som är underrubrik och vad som är rubrik i dina texter. Välj därefter hur du vill markera vad som är vad, och håll dig till dina typsnitt och färger genom hela hemsidan. Då kommer dina besökare att enkelt kunna navigera genom dina texter – och därmed också ha lättare att läsa.
Du kan också läsa mer om hur du väljer typsnitt till din hemsida här: Välj rätt typsnitt: en guide till bokstävernas utseende
