Kap 3.2 - Färg, typografi och läsbarhet

Mål

• Använda färg på ett kontrollerat sätt i CSS.
• Förstå min- och maxvärden i rgb() och hsl().
• Välja läsbara fonter och font stacks.
• Förstå kontrast, line-height och textjustering.

Färger i CSS

Du kan ange färger med namn, hexkod, RGB eller HSL. Namngivna färger är praktiska när du testar, men i designarbete behöver du oftast mer kontroll.

body {
    color: #172026;
    background-color: rgb(246 248 247);
}

.warning {
    background-color: hsl(35 90% 55%);
}

Moderna format som oklch och färgrymder som P3 finns också. I kursens början räcker det att du kan hex, RGB och HSL, men det är bra att känna till att färgsystem utvecklas.

RGB och HSL

rgb() blandar färg med rött, grönt och blått ljus. Varje kanal går från 0 till 255. 0 betyder inget ljus i den kanalen och 255 betyder full styrka. Därför blir rgb(0 0 0) svart, rgb(255 255 255) vitt och rgb(255 0 0) rött.

hsl() beskriver färg på ett annat sätt: hue, saturation och lightness. Hue är färgvinkeln på färghjulet och går från 0 till 360. Röd ligger vid 0 och 360, grön vid 120 och blå vid 240. 270 ligger alltså inte på ren blå, utan mellan blå och magenta. Saturation och lightness skrivs i procent eftersom de beskriver andel: 0% saturation är grått och 100% är fullt mättad färg. 0% lightness är svart, 50% är normal ljushet och 100% är vitt.

Interaktiv färgväljare

Ändra värdena och jämför hur samma färg kan beskrivas med både rgb() och hsl().

background-color: rgb(64 160 220);
background-color: hsl(201 69% 56%);

Kontrast

Text måste ha tillräcklig kontrast mot bakgrunden. I den här övningen ska färgkombinationen nå minst 7:1. Ljusgrå text på vit bakgrund kan se diskret ut, men den blir svår att läsa. Ren röd färg, #FF0000, kan inte nå 7:1 mot någon bakgrund. Testa färger med WebAIM Contrast Checker.

Varför 7:1? WCAG betyder Web Content Accessibility Guidelines. Det är internationella riktlinjer för att göra webbinnehåll mer tillgängligt. WCAG har nivåerna A, AA och AAA, där AAA är den striktaste nivån. För vanlig text kräver WCAG AAA minst 7:1 i kontrast mellan text och bakgrund. Därför använder vi 7:1 som mål här.

Fonter

En font stack ger webbläsaren flera alternativ. Om första fonten saknas används nästa.

body {
    font-family: Arial, Helvetica, sans-serif;
}

Vanliga kategorier är sans-serif, serif, monospace, handwriting/cursive och display. Brödtext bör nästan alltid vara lättläst. Dekorativa fonter passar bäst i små mängder.

Google Fonts och modern font stacks

Google Fonts ger många fonter, men kan påverka laddningstid och integritet om fonten laddas från Googles servrar. Modern Font Stacks är ett alternativ där du använder fonter som ofta redan finns på användarens system.

En modern font stack är alltså inte en font du laddar ned. Det är en lista med systemfonter som redan finns på många datorer och mobiler.

body {
    font-family: system-ui, sans-serif;
}

.article {
    font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
}

code {
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

font-family: system-ui, sans-serif;

Line-height och text-align

line-height styr radavstånd. För brödtext fungerar ofta ett värde runt 1.5.

p {
    line-height: 1.5;
    text-align: left;
}

.intro {
    text-align: center;
}

.meta {
    text-align: right;
}

Vänsterställd text är oftast lättast att läsa på svenska webbsidor. Centrerad text passar bäst för korta rubriker eller mycket korta texter. Högerställd text bör användas sparsamt eftersom längre stycken blir svårare att följa.

Prova själv

1. Välj två färger till profilsidan: en bakgrundsfärg och en textfärg.
2. Testa samma färg i färgväljaren med både rgb() och hsl().
3. Testa kontrasten.
4. Lägg till en font stack på body.
5. Sätt line-height: 1.5 på stycketext.