En praktisk guide till läsbar typografi på den moderna webben

Varför de flesta webbplatser är svårare att läsa än de borde vara

Den genomsnittliga webbplatsen 2026 levereras med en anpassad typsnittsfamilj, noggrant valda varumärkesfärger och ett designsystem som specificerar avstånd ända ned på pixelnivå. Ändå ligger brödtexten – det som de flesta besökare faktiskt kom för att läsa – ofta på 14px i en grå färg med låg kontrast, satt i ett typsnitt optimerat för rubriker, inte stycken.

Det här är inte ett utfall mot designers. Det är en påminnelse om att läsbarhet är en egen disciplin, skild från visuell design, och att de två inte alltid sammanfaller. Ett typsnitt som ser skarpt ut i en hero-sektion kan bli utmattande i styckeslängd. En färgpalett som fungerar bra på bild kan falla på kontrastkontroller. En layout som fungerar på en 27-tumsskärm kan kollapsa till en smal kolumn på mobilen.

Den goda nyheten: läsbar typografi kräver ingen examen i typografi. Den kräver uppmärksamhet på ett fåtal variabler som har oproportionerligt stor effekt.

Teckenstorlek: större än du tror

Det vanligaste läsbarhetsmisstaget på webben är brödtext som är för liten. Designers sätter ofta brödtext till 14px eller 15px eftersom det "ser rent ut" i desktopstorlek, och glömmer sedan att en betydande del av läsarna använder telefoner, ofta i mindre än idealiska ljusförhållanden.

En praktisk baslinje för brödtext 2026:

• Desktop: minst 18px, helst 20px
• Mobil: minst 16px, helst 18px

De här siffrorna känns stora om du är van vid mindre text, men de speglar hur människor faktiskt läser på skärmar. Större text minskar ögontrötthet, förbättrar förståelsen och gör ditt innehåll tillgängligt för läsare med mild synnedsättning som inte har justerat sina webbläsarinställningar.

Om ditt designsystem kräver mindre text, testa det på en telefon i solljus. Om du kisar är den för liten.

Radhöjd: ge texten utrymme att andas

Radhöjd (kägel) är det vertikala avståndet mellan textrader. För tätt, och raderna flyter ihop. För glest, och ögat tappar tråden mellan raderna.

För brödtext fungerar en radhöjd på 1,5 till 1,7 för de flesta typsnitt. Rubriker kan vara tajtare (1,1 till 1,3), men brödtext behöver andrum.

CSS:en:

body {
  font-size: 18px;
  line-height: 1.6;
}

Det här är en av de enklaste vinsterna för läsbarhet. Om din brödtext för närvarande ligger på line-height: 1.2 eller använder ett fast pixelvärde, ändra det i dag.

Radlängd: kortare än du tror

Den optimala radlängden för brödtext är 45 till 75 tecken per rad, ungefär 8 till 12 ord. Rader längre än 90 tecken gör det svårt för ögat att hitta tillbaka till början av nästa rad. Rader kortare än 40 tecken skapar en hackig, fragmenterad läsupplevelse.

De flesta webbplatser gör fel här genom att låta texten spänna över hela visningsytans bredd, särskilt på desktop. En 1920px bred skärm kan rymma över 150 tecken per rad, vilket är utmattande att läsa.

Lösningen är en max-width på din textbehållare:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

Enheten ch används för lite, men är perfekt för detta: den skalar med teckenstorleken och motsvarar ungefär teckenbredd.

Kontrast: inte så enkelt som svart på vitt

WCAG 2.1 anger ett minsta kontrastförhållande på 4,5:1 för brödtext (AA-nivå) och 7:1 för förbättrad tillgänglighet (AAA-nivå). De flesta webbplatser klarar detta på papperet men misslyckas i praktiken eftersom de använder ljusgrå text på vita bakgrunder.

Vanliga syndare:

• #666666 på #FFFFFF (4,54:1, klarar precis)
• #777777 på #FFFFFF (4,47:1, underkänns)
• Alla nyanser ljusare än #767676 på vitt (underkänns)

Om ditt designsystem specificerar "text-secondary" som en ljusgrå färg, testa den. WebAIM contrast checker är det snabbaste sättet att verifiera.

Mörkt läge komplicerar detta ytterligare. Rent vit text på helt svart skapar halation (en glödande effekt) som är svårare att läsa än lätt brutet vitt på mörkgrått. Ett bättre tillvägagångssätt:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Typsnittsval: standardtypsnitt är bättre än du tror

Anpassade webbtypsnitt finns överallt, men de innebär kompromisser. De tillför fördröjning, ökar sidans vikt och kan blockera rendering om de inte laddas varsamt. För brödtext är systemtypsnitt ofta det bättre valet.

En robust systemtypsnittsstapel 2026:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Detta ger dig San Francisco på macOS/iOS, Segoe UI på Windows och Roboto på Android – alla mycket läsbara, professionellt formgivna typsnitt som laddas omedelbart.

Om du använder ett anpassat typsnitt för brödtext, välj ett som är utformat för långläsning, inte display. Undvik:

• Ultralätta eller ultrafeta vikter för brödtext
• Kondenserade eller utökade varianter
• Typsnitt med låg x-höjd (höjden på gemena bokstäver)

Testa ditt valda typsnitt i styckeslängd innan du bestämmer dig.

Responsiv typografi: flytande typskalor

Fasta teckenstorlekar skalar inte bra mellan enheter. Ett 20px brödtexttypsnitt som är bekvämt på desktop kan kännas överdimensionerat på mobil.

Flytande typografi använder clamp() för att skala teckenstorlek mjukt mellan ett minimum och ett maximum:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Detta skalar från 16px på små skärmar till 20px på stora skärmar, med mjuk interpolering däremellan. Det är mer sofistikerat än brytpunkter i media queries och anpassar sig till valfri visningsbredd.

För en fullständig typskala (rubriker, brödtext, liten text) genererar verktyg som Utopia flytande skalor baserade på dina begränsningar.

Styckeavstånd och textjustering

Två små detaljer som spelar roll:

1. Styckeavstånd: Lägg till avstånd mellan stycken (margin-block-end: 1em) eller använd ett indrag på första raden (text-indent: 1.5em), men inte båda. Det mesta webbinnehållet använder avstånd.

1. Textjustering: Vänsterjusterat (eller högerjusterat för RTL-språk) är nästan alltid mer läsbart än marginaljusterad text, som skapar ojämna ordmellanrum om avstavning inte är aktiverad. Centrerad brödtext är svår att läsa och bör reserveras för korta passager.

Testa läsbarhet i praktiken

Läsbarhet är inte helt objektivt, men du kan testa den:

• Läs ditt eget innehåll på din telefon i olika ljusförhållanden
• Kör en Lighthouse-tillgänglighetsgranskning för att fånga kontrast- och teckenstorleksproblem (se hur du läser en Lighthouse-rapport utan att få panik för vägledning)
• Be någon över 50 att läsa en sida utan att justera sina inställningar
• Kontrollera din analysdata för avvisningsfrekvens på texttunga sidor – om människor lämnar snabbt kan läsbarhet vara en faktor

Om ditt innehåll är svårt att läsa kommer människor inte att läsa det. Så enkelt är det.

Så här ser det ut i praktiken

En läsbar brödtextstil 2026 kan se ut så här:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Detta täcker teckenstorlek, radhöjd, radlängd, kontrast och responsiv skalning på ungefär ett dussin rader CSS. Det är inte spännande, men det fungerar.

När du bör bryta mot reglerna

Dessa riktlinjer gäller brödtext – de stycken människor läser för att få information. Rubriker, bildtexter, UI-etiketter och marknadsföringstext har andra begränsningar och kan tänja på de här reglerna.

Men om någon kom till din webbplats för att läsa en artikel, en dokumentationssida eller en produktbeskrivning är läsbar typografi inte valfri. Det är grundförväntningen.