På den här sidan hittar du en del information om vad man bör tänka på när det gäller färg, layout och typografi på en hemsida. Läs och tillämpa!
Färg är en viktig del av formgivningen av en hemsida. Det finns hur mycket som helst att säga om färglära och färgmatchning, och man skulle lätt kunna fylla en hel sajt med bara färg. Men för att hålla det lite kort, så tycker vi det finns några få viktiga punkter att tänka på.
Försök välja färger utifrån innehållet i din sajt. Några exempel: Om du gör en sajt om ett hårdrocksband är det kanske på sin plats med mycket svart, djupa röda färger, lite vita effekter, osv. Om din sajt är tillägnad en mycket seriös advokatbyrå kanske du ska satsa på lugna sobra färger, inte så knalliga och inte för mörka. Om du däremot gör en sida om leksaker för barn så passar det utmärkt med ganska starka färger, men kanske inte hur många olika färger som helst, vilket leder oss till nästa punkt:
Välj några få matchande färger som du håller dig till i hela sajten. Om du har för många färger blir intrycket bara rörigt när man tittar på din sajt. Tänk efter vilken eller vilka grundfärger du vill ha med, och försök hitta några som passar till dem. Du behöver nästan aldrig mer än fyra-fem färger till en sajt.
Se till att kontrasten mellan text och bakgrund blir tydlig. Läsbarheten är nästan det viktigaste på din sajt - du vill ju att folk ska kunna läsa det du skriver!
Om du vill ha hjälp att välja matchande färger till din hemsida hittar du tre bra verktyg på nätet här:
Kuler
Colorblender
Color schemer
Typografi betyder ungefär ”läran om bokstäverna”. Någonstans har jag läst den noggrannare förklaringen ”läran om bokstavsformerna och deras funktionella och estetiska användning inom trycktekniken”. Nu är det ju inte tryck vi håller på med, utan webdesign, men även där behöver man kunna en del om bokstavsformer och textformatering för att få ett snyggt och läsbart resultat.
Layout för internet skiljer sig egentligen inte så mycket från layout i tryck. Men när det gäller just typografin finns ett och annat att lägga märke till och tänka på när man formger en hemsida.
Den stora skillnaden när det gäller just text är att på en datorskärm är bokstäverna uppbyggda av fyrkantiga pixlar istället för kurvor. De här små fyrkantiga ”byggklossarna” innebär problem när man vill återge bokstävernas sneda streck och kurvor. Ju mindre grad (storlek) man använder på texten desto mer förstörs bokstavsformerna av pixlarnas kantighet.
I bilden till vänster ser vi ett a satt i Times New Roman. På bilden i mitten syns samma a, fast uppbyggt av fyrkantiga bildpunkter, som på en skärm. Där finns fortfarande något av a:ets karaktär kvar, även om det blivit lite kantigt.
I den högra bilden – samma a i mindre grad – har a:et förenklats väldigt starkt. Alla delar av bokstaven är lika tjocka, och de klumpiga bildpunkterna och mellanrummen mellan dem gör att det knappast ser ut som Times New Roman. Drar man ner storleken ännu mer ser det förmodligen inte ens ut som ett a längre.
Antikva kallas de typsnitt som har serifer, d v s de små ”fötterna” och ”flaggorna” upptill och nedtill. De är tydliga, oftast lättlästa, seriferna håller ordning på baslinjen som bokstäverna står på, och gör varje bokstav i alfabetet till en unik form som är lätt att urskilja. Detta gör att ögat lätt följer raderna. Bra för långa texter, s k brödtext (öppna en roman och kolla, 99% är satta med en antikva!)
Ex: Times New Roman, Bookman old style, Garamond
Sans-serifer (=utan serifer) är ocskå tydliga, men har en lite enklare form än en antikva. De är inte lika lättlästa i långa texter som serifer, speciellt inte i små grader. Däremot passar de mycket bra till t ex rubriker (mycket svärta!), och ingresser, eller andra kortare texter.
Ex: Arial, impact, Franklin Gothic Book, Gill Sans, Verdana
Scripter är typsnitt som efterliknar handstil, t ex skrivstil.
Ex: Blackadder ITC, Brush Script MT, Eewardian Script IT, Comic sans MS
Dekorativer eller displaytypsnitt är alla typsnitt som är lite mer som bilder, ofta snirkliga och färggranna. De är väldigt dekorativa och uttrycksfulla, men används knappast till längre texter. Lämpar sig bäst för skyltar och korta rubriker.
Ex: Stencil, Harlow Solid Italic, CASTELLAR, Magneto
Rubriker och underrubriker ska ju synas, skilja sig från den stora textmassan. Välj gärna ett typsnitt som är helt olikt brödtextens, gärna lite större och fetare också. Man brukar göra rubrikerna i olika grader (storlekar) beroende på var i texten de står; översta rubriken är störst och fetast, och underrubrikerna – de som delar upp textmassan i olika avsnitt – görs lite mindre. Kolla gärna i dagstidningarna, de är ofta exemplariskt satta!
Ingressen är en inledande text som kommer efter den största rubriken och som berättar i korthet om vad texten/artikeln handlar om. Sätts oftast i större grad än brödtexten, och ofta i ett annat typsnitt än både rubriker och brödtext.
Brödtexten är själva textinnehållet, den stora textmassan. Här bör man tänka på att välja ett läsvänligt typsnitt, ett som är lätt för ögat att följa och läsa länge. På papper är seriftypsnitt oftast bäst för långa brödtexter, på skärmen beror det på vilken storlek på texten man jobbar med. För vanlig brödtext är det bättre att välja en sansserif, eftersom ”pixligheten” ofta ställer till det med seriferna.
Bildtexter brukar man oftast låta se likadana ut genom hela publikationen (gäller både trycksaker och internet). Det är vanligt att bildtexter är kursiverade (lutande) och lite mindre än brödtexten, men kursiv text är inte riktigt lyckat på skärm. Återigen ett fall där pixlarna ställer till det för tydligheten - det är svårt att göra snygga tunna lutande linjer när de är uppbyggda av fyrkantiga pixlar. Så för att det ska vara lätt att skilja bildtext från brödtext på en hemsida kan man hellre välja alternativet att ha en annan färg och kanske mindre grad på bildtexten, men kanske samma typsnitt.
Om man vill betona vissa ord inne i en text använder man enklast samma typsnitt och grad som i resten av texten, men byt gärna färg på ordet, eller använd fet text. Understrykningar är också lätta att se, men inte så praktiska att använda på internet eftersom de liknar länkar.
Om man använder ovanliga typsnitt på sin hemsida är det väldigt osäkert om besökaren kan se dem! Webläsaren hämtar nämligen typsnitten på en hemsida från besökarens egen dator. Besökaren måste alltså ha samma typsnitt inlagt i sin dator som du valt att använda på hemsidan, annars byter webläsaren ut typsnittet till något som finns i datorn. Detta kan ställa till layouten rejält. Texten kanske tar mycket mer plats än du tänkt om ett annat typsnitt används, vilket kanske i sin tur ställer till det med bilder som du lagt in på sidan och som ska passa till texten. Det kan bli hur krångligt som helst! Det bästa är att lära sig hur de vanligaste typsnitten funkar i olika storlekar på en datorskärm, och sen använda sig av dem.
Brödtext: Ett bra skärmtypsnitt för längre texter ska helst vara så rätvinkligt som möjligt, så att det inte blir så förvrängt av skärmens pixlar. Två standardtypsnitt i Windows som brukar fungera bra för skärmtext är Verdana och Arial. Verdana är i princip standard numer. De är båda sans-serifer och har ganska enkla bokstavsformer. Speciellt Verdana fungerar utmärkt även i små storlekar. Geneva och Helvetica finns också på de allra flesta datorer. Georgia är en antikva (seriftypsnitt) som faktiskt fungerar ganska bra för skärmläsning, men den är inte standard i Windows längre, så det kan vara en liten chanstagning att använda den.
Om du har ett väldigt viktigt budskap och verkligen vill att alla – oavsett operativsystem eller ålder på dator – ska kunna läsa på din hemsida, så använd Courier eller Times New Roman. Det ska dock understrykas att dessa två inte är de lämpligaste eller snyggaste typsnitten för skärmvisning, men de finns på alla datorer.
Till rubriker går det oftast bra att använda seriftypsnitt, eftersom man då använder lite större grad på texten. Vill man ha en stor färgglad häftig rubrik i något dekorativtypsnitt är det bäst om man gör rubriken i Photoshop och lägger in den som en bild på hemsidan.
Försök undvika kursiv stil på nätet om du kan. Kursiva bokstäver består ju nästan bara av sneda linjer, så de blir lätt förvrängda på en skärm.
Gör inte textraderna på skärmen för långa. Man brukar säga att ungefär 64 tecken per rad (inklusive mellanslag och skiljetecken) i 12 punkters storlek är lagom. Om raderna är längre än så är det lätt att ögat ”tappar bort sig” i letandet efter nästa rad.
Man ska inte ha för korta rader heller, då avbryts läsaren hela tiden av radbrytningarna och tappar läsrytmen. Försök undvika rader som är kortare än c:a 30 tecken i löptext.
Håll texten vänsterjusterad, då blir det lättare för läsaren att hitta nästa rad. Centrerad text är ganska svår att läsa, speciellt om det är en lite längre text.
Använd så få typsnitt som möjligt på din sajt. Bestäm gärna redan innan du börjar arbeta med sajten vilka typsnitt du tänker använda till rubriker, underrubriker respektive brödtext. Oftast räcker det med dessa tre nivåer på texten. Möjligen kan navigeringen få ett eget typsnitt också. På det här viset får du ordning och reda i alla texter, och läsaren känner igen sig på alla sidor.
OBS! Det väcker inte mer uppmärksamhet att använda så många typsnitt som möjligt, snarare tvärtom – rörigheten kommer att trötta ut din besökare innan han/hon hunnit läsa det du vill berätta.
Olika undersökningar visar att man läser ungefär en tredjedel så snabbt på en skärm som i en bok. På hemsidor tenderar läsaren att bara ”skumma” eller ”scanna” igenom innehållet för att snabbt bedöma om det är värt att läsas ordentligt. Bilder, rubriker och länkar används som verktyg för att hitta de intressanta ”godbitarna” i texten. Inte förrän man verkligen hittat något intressant saktar man ner farten i sitt läsande – eller skriver helt enkelt ut texten för att läsa den på papper! Tänk på detta när du skriver texter för internet, gör texterna kortfattade och koncisa, dela upp i stycken där varje stycke innehåller en tankegång. Sätt rubriker och underrubriker som klart beskriver vad texten handlar om.
Om du har en längre text som du vill publicera på nätet, inled då texten med en ingress eller en sammanfattning om vad texten handlar om. På så vis lockar du de intresserade att börja läsa, och besparar resten tiden och arbetet med att ta reda på vad din text handlar om. För att underlätta för den som sedan vill läsa hela din långa text – se till att göra den lättsam att läsa! Lätta upp den med underrubriker och styckeindelningar, få in lite luft på sidan så att inte hela skärmen bara är en enda massiv textmassa. Sådant kan avskräcka även den mest intresserade från att börja läsa.
Det är alltså ingen dödssynd på något vis att ha långa texter på sin hemsida, se bara till att de blir läsvänliga!