Container & läsvänlighet

Webben är inte ett papper

Det är en flytande yta som kan vara allt från en klockdisplay till en 49-tums ultrawide-skärm. Om du bara dumpar all text i <main> kommer raderna att sträcka sig över hela skärmens bredd. Det är en mardröm att läsa.

Inom typografin pratar man om den gyllene radlängden: 45-75 tecken per rad. Sveriges officiella webbriktlinjer från Digg sätter gränsen vid högst 80 tecken per rad. För att uppnå detta på webben använder vi en låda som begränsar textens bredd, det brukar kallas för en container.

Tämj bredden: max-width

Många nybörjare sätter en fast width: 800px; på sin container. Det ser bra ut på deras egen laptop, men på en mobil skapar det en horisontell scroll-list. Det är fast width-fällan, och du testar för den genom att dra ihop webbläsarfönstret och se att innehållet följer med.

Vi använder istället max-width. Det säger: “Bli aldrig bredare än så här, men krymp gärna om skärmen kräver det”.

main {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

rem är en relativ enhet, 1rem är lika med webbläsarens grundfontstorlek (oftast 16px, så 50rem ≈ 800px). Fördelen mot pixlar är att layouten skalar upp om användaren har ändrat sin inställning. Vi går djupare in på måttenheter senare i kursen.

Vertikal rytm: line-height

Standardinställningen för radavstånd i webbläsare är oftast för kompakt. Det skapar en “textvägg” som skrämmer bort läsaren. Genom att öka line-height ger vi ögat utrymme att andas (om nu ögat kan andas…).

body {
    line-height: 1.6;
}

Regel: Ju bredare raderna är, desto högre radavstånd behöver du för att ögat inte ska tappa bort sig vid radbyte. Diggs webbriktlinje för läsbarhet rekommenderar minst 150 % radavstånd i löptext, så 1.6 ligger tryggt över.

Vanliga fällor

• Centrera containern, inte texten: Att sätta text-align: center på stora textblock skapar “trasiga” kanter som är svåra att läsa. Centrera containern med margin: auto, men håll texten vänsterställd.
• Padding mot kanterna: Om du har en max-width men ingen padding, kommer texten att klistras mot skärmkanterna på mobil. Ge containern minst padding: 1rem.
• Centrering kräver bredd: margin-left: auto; margin-right: auto fungerar bara när elementet har en angiven bredd. Utan max-width tar ett block-element 100% av sin förälder och det finns inget ledigt utrymme att fördela. Inget felmeddelande, bara en container som inte centrerar.