Val av färger och typsnitt för webbplatsen

01Varför är färg och typsnitt så viktiga?

Besökaren uppfattar färgerna och bokstävernas form innan hen läser texten på sidan. Det första intrycket ger snabbt en bedömning av om företaget är seriöst, varmt, nyskapande eller pålitligt.

Färg och typografi är inte bara ett estetiskt val. De påverkar direkt läsbarhet, tillgänglighet och konvertering. En blekgrå text kan se stilren ut, men om den inte går att läsa lämnar besökaren sidan. En otydlig knappfärg gör att den viktigaste handlingen missas.

Därför är val av färg och typsnitt grundläggande beslut som bör fattas innan resten av webbplatsen designas. De hör till de första stegen i arbetet med UI/UX-design.

02Bygg en palett utifrån företagets färger

Har du en logotyp och tryckt material är det dem du utgår från. Särskilt en företagswebbplats är varumärkets digitala ansikte. Ett varumärke som är marinblått på visitkortet ska inte vara orange på skärmen. Om den visuella identiteten ännu inte är klar är det klokare att först lägga grunden med varumärkesstrategi.

Företagets färger räcker oftast inte till en webbpalett. Utöver en huvudfärg behövs toner för bakgrund, text, kantlinjer samt varnings- och framgångslägen. En bra färgpalett för webbdesign består av följande lager:

• Huvudfärg: varumärkesfärgen, i rubriker, meny och framhävda ytor.
• Accentfärg: för uppmaningar till handling som knappar och länkar, en ton som harmonierar med huvudfärgen men går att skilja från den.
• Neutrala toner: fyra, fem toner från vitt till mörkgrått för bakgrund och text.
• Statusfärger: rött för fel, grönt för framgång och gult för varning, i formulär och aviseringar.

60-30-10-regeln

Den här praktiska regeln från inredningsvärlden fungerar även för webben: ungefär 60 procent av ytorna är neutral bakgrund, 30 procent huvudfärg och sekundära områden och 10 procent accentfärg. Proportionerna är inget tvång utan en vägledning för balans som hindrar färgen från att dränka sidan.

Skydda accentfärgen

Används accentfärgen överallt förlorar den sitt värde. Om du reserverar färgen för huvudhandlingar som »Få offert« eller »Ring nu« och inte använder den i dekorativa områden styr du besökarens blick rätt.

03Kontrast och tillgänglighet

Det som oftast glöms bort vid färgval är kontrasten. Enligt WCAG-riktlinjerna ska kontrastförhållandet mellan normal text och bakgrund vara minst 4,5:1, och för stor text minst 3:1. Vit text på ljusgrått eller ljus text på pastellbakgrund hamnar under den gränsen.

Kontrollera kontrasten genom att mäta, inte gissa. Webbläsarnas utvecklarverktyg och gratis kontrastkontroller visar förhållandet mellan två färger direkt. Förmedla dessutom inte information enbart med färg: ange ett fel i ett formulärfält inte bara med röd kantlinje utan också med en förklarande text.

04Hur giltig är färgpsykologin?

Det sägs ofta att blått förknippas med förtroende, grönt med natur och rött med energi. Associationerna är kulturellt utbredda men inga universella regler. Samma färg kan väcka helt olika känslor i olika branscher och i olika nyanser.

Ett mer pålitligt sätt är att titta på normerna i din bransch och skapa en medveten skillnad. Om alla konkurrenter använder marinblått kan samma ton få dig att försvinna i mängden, medan en helt ovanlig färg kan skapa en förtroendefråga. Det mest balanserade resultatet får du ofta om huvudfärgen kopplas till varumärket och accentfärgen till handlingen.

I urvalsprocessen går det mycket snabbare än med abstrakta diskussioner att applicera några kandidatpaletter på samma utkast till startsida och jämföra dem sida vid sida. Titta på tre frågor i stället för personlig smak: Påminner färgen om varumärket? Går texten att läsa bekvämt? Syns huvudknappen på sidan redan vid första ögonkastet? Om svaret på alla tre är ja gör paletten sitt jobb.

05Hur väljer du webbtypsnitt?

Valet av webbtypsnitt diskuteras mindre än färg men påverkar läsbarheten mer. Första regeln är att hålla sig begränsad: ett typsnitt för rubriker och ett för brödtext, alltså högst två familjer. I de flesta fall räcker olika vikter av en enda familj.

Stöd för å, ä och ö

För en svensk webbplats är det ett måste att typsnittet stöder alla bokstäver, å, ä, ö, Å, Ä, Ö. I typsnitt som inte gör det visas de här bokstäverna med ett annat typsnitt, och mitt i orden uppstår skillnader i form. Prova typsnittet med ord som Åre, Ängelholm och Östersund innan du väljer; versala bokstäver med prickar och ringar kan vara särskilt problematiska.

Serif eller sans-serif?

Typsnitt med seriffer (serif) ger ett klassiskt och elegant intryck och fungerar bra i rubriker. Typsnitt utan seriffer (sans-serif) är renare att läsa på skärm, särskilt i små storlekar, och ett vanligt val för brödtext. En serifrubrik i kombination med sans-serif-brödtext är en vanlig och balanserad matchning.

06Mått för läsbar typografi

Även ett bra typsnitt blir tröttsamt när det används med fel mått. Följande värden är en stabil startpunkt för typografi:

07Låt inte typsnitten göra sajten långsam

Varje typsnittsfil läggs till sidans laddningstid. Att ladda fem olika vikter och två familjer fördröjer den första visningen, särskilt på mobila anslutningar. Genom att använda typsnittsfilerna i formatet WOFF2, bara ladda de vikter som behövs och begränsa teckenuppsättningen till latinska tecken kan du minska filstorleken märkbart.

Inställningen font-display används för att texten inte ska vara osynlig tills typsnittet har laddats. Den hör till det första man tittar på i arbetet med hastighet och prestanda. Att definiera färgvärdena som CSS-variabler gör det också enklare att hantera paletten på ett ställe och skapa varianter som mörkt tema.

:root {
  --renk-ana: #1d3557;
  --renk-vurgu: #e76f51;
  --renk-metin: #1f2933;
  --renk-zemin: #ffffff;
}

@font-face {
  font-family: 'Brödtext';
  src: url('/fontlar/govde.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: 'Brödtext', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--renk-metin);
  background: var(--renk-zemin);
}

08Testa ditt val

Testa färg och typsnitt inte i en designfil utan med riktigt innehåll och på riktiga enheter. Att titta på samma sida på en telefon i solen, på en gammal bärbar skärm och på en bred monitor avslöjar problem som inte syns på papper.

Konsekvens är lika viktigt som testning. En gång bestämd palett och typsnitt ska tillämpas med samma regler på alla de sidor en webbplats bör ha. Färdiga mallar begränsar ofta den flexibiliteten, och skillnaden har vi gått igenom i artikeln färdigt tema eller skräddarsydd design. Fler artiklar i ämnet hittar du under etiketten varumärkesidentitet.