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.

Det fjärde verktyget, mellanrummet, är det som är lättast att glömma, för det syns inte förrän det saknas. Sätter du en 48 pixlar hög knapp i ett kort där texten står tätt och kanterna är snåla ser knappen ut som en jätte i fel rum. Avstånden måste följa med: när ett element växer behöver det som ligger runt omkring mer luft, så att proportionerna hänger ihop. Designers kallar det rytm, återkommande avstånd som får en layout att kännas avsiktlig snarare än hopkommen.

Välj rätt fontpar

Hur du laddar in ett typsnitt kan du sedan Typsnitt & webbfonter, och vilken känsla olika typsnitt bär sorterade du i Designstilar & identitet. Kvar är hur de två sätts ihop till ett par.

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:

1. Markera ett textelement.
2. Klicka på färgprovet i Styles-panelen.
3. 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.

Lägg märke till att ordet kontrast gör två jobb i den här delen, och att de drar åt olika håll. Att dämpa brödtexten mot grått är ett hierarkiverktyg, det får rubriken att stiga fram. Men det äter av exakt samma kontrast som kravet mäter. Hierarkin får du alltså bygga med det utrymme som finns kvar ovanför 4.5:1, inte genom att låna av det.

Typografi-variabler

Idén att bestämma sina textstorlekar i förväg är betydligt äldre än webben.

Ett typprov var stilgjuteriets prislista: här är mina typsnitt, i de grader du kan beställa dem. Graderna hade namn i stället för siffror, och du kunde inte välja fritt däremellan. Du plockade ur en bestämd uppsättning, vilket är exakt vad du gör när du skriver var(--text-lg) i stället för font-size: 19.5px.

Två av namnen lever kvar som måttenheter. Pica och punkt används fortfarande inom typografi, och pt finns kvar i CSS just för utskrift.

Titta sedan på hur arket självt är satt. Rubriken överst är enorm, undertiteln mindre, och därefter faller storlekarna nedåt genom spalterna. Ögat hittar rätt utan att läsa ett ord. Det är samma visuella hierarki som i avsnittet ovan, tryckt långt innan någon skrev sin första <h1>.

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.