Visuell hierarki & typografi

Design är kommunikation

Första gången en användare landar på din sida fattar de ett beslut inom millisekunder: kan jag lita på det här?

Det beslutet fattas innan de läst ett ord. Det fattas baserat på hur sidan ser ut, och typografin är en stor del av den signalen. Professionell typografi kommunicerar kompetens och omsorg. Rörig typografi kommunicerar det motsatta.

Typografi handlar om mer än valet av typsnitt. Det är ett system av beslut: storlek, vikt, radavstånd, hierarki och kontrast.

Visuell hierarki

En användare läser inte en webbsida uppifrån och ned. De skannar den. De letar efter rubriker, nyckelord och knappar.

Visuell hierarki är den ordning ögat uppfattar element. Du skapar den med:

storlek: h1 är störst, h2 näst störst, brödtext är liten
vikt: font-weight: 700 (bold) drar blicken
färg: mättade färger syns före grå
mellanrum: element med luft runt sig uppfattas som viktigare

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: 1.75rem;
    font-weight: 600;
}

p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

Regel: om allt ser lika viktigt ut är ingenting viktigt.

Se principen i praktiken. Blocken nedan ligger i en ordning i koden, men ögat läser dem i en annan:

Överst i koden ligger blocket du läser sist. Storlek, vikt och kontrast styr blicken, inte dokumentordningen. Det är visuell hierarki.

Google Fonts: Välj rätt par

Du laddade in Google Fonts i Typsnitt & webbfonter i Tema 2 och vet redan hur preconnect, display=swap och <head>-ordningen fungerar. Nu är frågan inte hur du laddar in ett typsnitt, utan vilket du ska välja.

I Designstilar & identitet sorterade du in varumärken i Erik Kennedys fyra stilpersonligheter: Fancy, Quirky, Friendly och Techie. Fontparet är det tydligaste sättet att bära den stilen i kod.

Ett professionellt fontpar består nästan alltid av en kontrast: ett mer personligt rubrik-typsnitt paras med ett extremt lättläst brödtext-typsnitt. Playfair Display + Inter är ett klassiskt exempel, men det finns hundratals kombinationer på fonts.google.com.

Regeln om max 2 familjer och max 2 vikter gäller fortfarande, prestanda och designval är inte motstridiga.

WCAG och kontrast

Kontrast handlar inte om att sidan ska se “snygg” ut, det handlar om att texten ska gå att läsa för alla, inklusive personer med nedsatt syn.

WCAG 2.2 AA-krav:

Normaltext (under 18pt/24px): 4.5:1 kontrastförhållande
Stor text (18pt+/24px+ eller 14pt bold+): 3:1

Kontrastförhållande 4.5:1 låter abstrakt. I praktiken: svart text på vit bakgrund är 21:1 (perfekt). Ljusgrå #999 på vit bakgrund är ca 2.85:1 (underkänt).

Så här kontrollerar du i DevTools:

Markera ett textelement.
Klicka på färgprovet i Styles-panelen.
Färgväljaren visar kontrastförhållandet direkt med bock (godkänt) eller kryss.

Eller använd WebAIM Contrast Checker för att kontrollera en färgkombination mot kraven.

Typografi-variabler

Liksom med spacing är CSS-variabler rätt sätt att hålla typografin konsekvent:

:root {
    --font-heading: "Playfair Display", Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;

    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-4xl: 2.25rem;
}

I en omodifierad webbläsare motsvarar skalan 14 till 36 pixlar, men eftersom den är skriven i rem följer den användarens textstorlek. När designen säger “gör rubriken lite mindre” ändrar du en variabel, inte tio selektorer.

Uppgift: Din typografiska profil

Ge din övningssida en genomtänkt typografi. Fontparet laddade du in redan i Tema 2, så här handlar det inte om inladdningen utan om valet, skalan och läsbarheten.

Motivera fontparet. Titta på --font-heading och --font-body i ditt :root-block. Vilken av Erik Kennedys fyra stilar pekar de mot, och stämmer den med de tre adjektiven från din varumärkesanalys? Byt typsnitt om de drar åt olika håll.
Bygg en typskala. Lägg till --text-sm till --text-4xl i :root enligt exemplet ovan, i rem. Ersätt sedan alla hårdkodade textstorlekar i din CSS med var().
Sätt hierarkin. Ge rubrikerna högre font-weight och tightare line-height än brödtexten. Ögat ska hitta ordningen utan att h1 behöver bli gigantisk.
Kontrollera kontrasten. Öppna WAVE eller DevTools färgväljare och kontrollera brödtexten mot bakgrunden. Är förhållandet minst 4.5:1?

Vad händer om…

Ändra textfärgen till #aaa (ljusgrå) på vit bakgrund och kör WAVE igen. Vilket fel dyker upp, och vilket kontrastförhållande visar färgväljaren? Sänk sedan skärmens ljusstyrka och läs samma text. Ställ tillbaka en färg som klarar 4.5:1.

Motivera & reflektera

Skriv i din readme.md vilken känsla ditt fontpar ska kommunicera och hur just de typsnitten bär den känslan. Koppla till en av Erik Kennedys fyra stilar och motivera varför den passar ditt varumärke. Skriv också vilken enda rad du ändrar om all text på sidan ska bli ett steg större, och varför det räcker med den raden.

Nästa nivå

4.5:1 är AA, golvet. Sikta på AAA i stället: 7:1 kontrast för din brödtext. Testa också din typografi vid 200% zoom (Ctrl och plus) och kontrollera att inget bryts eller överlappar, precis det WCAG 1.4.4 kräver. Kan du hålla AAA-kontrast och en snygg, dämpad grå brödtext samtidigt, eller tvingar kraven dig att kompromissa? Att navigera den spänningen mellan estetik och läsbarhet är det riktiga typografiarbetet.

Vill du dessutom ta typskalan ett steg längre: Utopia genererar en flytande skala där storlekarna växer mjukt med skärmbredden i stället för i fasta steg. Klistra in dess variabler i :root och jämför med din egen skala. Verktyget bygger på funktionen clamp(), som dyker upp igen som fördjupning i Layoutmönster.