CSS typografi på nett: slik gjør du tekst lett å lese og se bra ut

Tekst er det viktigste innholdet på de fleste nettsider, men typografi blir ofte nedprioritert til fordel for farger, logo og «kule» effekter. Resultatet er sider som ser greie ut ved første øyekast, men som er tunge å lese over tid.

Med noen gjennomtenkte grep i CSS kan du gjøre tekstopplevelsen merkbart bedre, uten avansert designbakgrunn. Her får du konkrete valg, eksempler og fallgruver du bør unngå.

Velg en font som fungerer på skjerm

Valg av font handler mindre om smak enn mange tror. For nett handler det først og fremst om lesbarhet i små størrelser og på ulike skjermer. Bruk en trygg standardskrift eller en webfont som er laget for langlesning, ikke kun for overskrifter.

Et godt utgangspunkt er å bruke systemfonter eller etablerte webfonter fra for eksempel Google Fonts. Vær forsiktig med dekorative skrifter: begrens dem til korte overskrifter, og test alltid hvordan de ser ut på mobil.

Slik setter du opp en enkel font-stack

En font-stack er listen med fonter nettleseren kan velge mellom. Hvis førstevalg ikke er tilgjengelig, går den videre til neste. Dette gir deg mer kontroll og færre stygge overraskelser.

Eksempel på en enkel, sans-serif-basert stack:

Eksempel:

CSS:

body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Dette gir deg moderne systemfonter som ligner på tvers av plattformer, samtidig som du unngår ekstra nedlasting av webfonter.

Fontstørrelse og linjehøyde som faktisk er lesbar

Den vanligste feilen på norske nettsteder er for liten tekst og for tett linjeavstand. Det kan se «rent» ut i designverktøy, men sliter ut øynene i faktisk bruk, spesielt på mobil.

Som tommelfingerregel kan du starte med minst 16px på brødtekst, gjerne 17–18px hvis du har mye innhold. Juster deretter linjehøyde til teksten føles luftig nok uten å bli fragmentert.

Praktiske startverdier for tekst

Et sett med startverdier som ofte fungerer bra for brødtekst, er:

• Fontstørrelse: 16–18px
• Linjehøyde (line-height): 1.5–1.7
• Maks bredde på tekstlinje: rundt 60–75 tegn per linje

Eksempel:

CSS:

body {
font-size: 16px;
line-height: 1.6;
max-width: 70ch;
margin: 0 auto;
padding: 1rem;
}

Her brukeschsom måleenhet for bredde. 70ch betyr omtrent 70 tegn, som ofte gir en behagelig linjelengde for lesing.

Jobb med kontrast uten å slite ut øynene

God kontrast er avgjørende for tilgjengelighet og komfort, særlig for folk med nedsatt syn eller på skjermer med lav kvalitet. Samtidig kan helt svart tekst på helt hvit bakgrunn oppleves skarp og slitsom for noen.

Løsningen er ofte å holde seg til høy, men ikke maksimal kontrast. For eksempel en veldig mørk grå på lys bakgrunn, i stedet for ren #000 på #fff, så lenge kontrasten fortsatt oppfyller kravene i WCAG-standardene.

Slik kontrollerer du kontrasten

Du kan bruke gratis nettverktøy for å sjekke kontrastforholdet mellom tekst og bakgrunn. Søk etter «contrast checker» og test fargekombinasjonene du vurderer, spesielt for mindre tekst.

Eksempel:

CSS:

body {
color: #222222;
background-color: #ffffff;
}

Unngå lys grå tekst på hvit bakgrunn for brødtekst, selv om det ser «lett» ut. Det går ofte ut over lesbarheten, spesielt på mobil ute i sollys.

Overskrifter, avsnitt og hierarki

God typografi handler også om struktur. Overskrifter må skille seg tydelig fra brødtekst, både i størrelse, vekt og luft rundt. Dette hjelper lesere å skumme siden og finne det de trenger raskere.

Bruk HTML-overskrifter semantisk (h2, h3 osv.) og la CSS styre utseendet. Unngå å bruke en overskriftstag kun for å få større skrift, det gjør det vanskeligere for skjermlesere og søkemotorer å forstå innholdet.

Et ryddig hierarki med CSS

En enkel måte å bygge opp et konsistent hierarki på, er å definere grunnstørrelsen på body og så bruke relative enheter på overskrifter.

Eksempel:

CSS:

body { font-size: 16px; }
h1 { font-size: 2.2rem; line-height: 1.2; margin-bottom: 0.8em; }
h2 { font-size: 1.7rem; line-height: 1.3; margin-top: 2em; margin-bottom: 0.6em; }
h3 { font-size: 1.3rem; line-height: 1.4; margin-top: 1.5em; margin-bottom: 0.4em; }

Rem-enheter gjør at overskriftene skalerer i takt med grunnstørrelsen. Det gjør det enklere å justere hele tekstopplevelsen senere ved å endre én verdi.

Luft, marger og linjelengde

Selv om riktig font og størrelse er viktig, kan for lite luft rundt teksten ødelegge alt. Avstand mellom avsnitt og rundt overskrifter gir øynene pauser, og gjør siden mer oversiktlig.

En vanlig feil er å stole på dobbel linjeskift i HTML for å lage luft. Det gir uforutsigbar avstand og blanding av innhold og presentasjon. Bruk heller margin i CSS for å styre avstand konsekvent.

Eksempel på behagelig avstand

CSS:

p {
margin-top: 0;
margin-bottom: 1em;
}
h2 {
margin-top: 2em;
margin-bottom: 0.5em;
}

Kombinert med en passende maksimal bredde på tekstblokken, gir dette et rolig og lesbart uttrykk. Husk å teste med faktiske tekstmengder, ikke bare med kort «Lorem ipsum».

Linjelengde på mobil og desktop

Responsiv typografi handler ikke bare om fontstørrelser, men også om linjelengde. På store skjermer sprer tekst seg lett for mye utover, mens på mobil kan alt bli presset hardt sammen.

En god løsning er å kombinere en maks bredde på selve innholdskolonnen med litt innvendig padding på mindre skjermer. Da unngår du superlange linjer på desktop og tekst helt inntil kantene på mobil.

Responsiv justering med media queries

CSS:

.content {
max-width: 70ch;
margin: 0 auto;
padding: 1rem;
}
@media (min-width: 768px) {
.content { padding: 2rem; }
}

Test på både små og store skjermer, og blar du mye horisontalt med øynene for å lese én linje, er teksten sannsynligvis for bred.

Små detaljer som gir stor forskjell

Når grunnleggende valg er på plass, kan du finjustere med små justeringer som forbedrer helhetsinntrykket. Det kan være avstand mellom bokstaver i overskrifter, litt mildere vekt på fet tekst, eller bevisst bruk av kursiv.

Vær forsiktig med for mange typografiske effekter samtidig. Bruk fet skrift til å markere viktige ord, ikke hele setninger. Unngå understreket tekst til annet enn lenker, siden det ofte misforstås som klikkbart.

Et lite sett med finpuss-regler

• Brukfont-weight500–600 til overskrifter i stedet for ekstremt fet 700–900 der det passer.
• Gi små overskrifter litt ekstraletter-spacingfor bedre balanse.
• Unngå store bokstaver (all caps) på lange overskrifter, det er tungt å lese.

Samlet gir disse grepene en mer behagelig leseflyt, samtidig som siden din fremstår mer gjennomarbeidet.

Slik kommer du i gang uten å overtenke

Det er lett å gå seg vill i fonter, størrelser og avanserte typografiske begreper. Start enkelt: velg én god brødtekstfont, sett tydelige størrelser og luft for overskrifter, og sørg for god kontrast.

Deretter kan du justere basert på faktisk innhold og tilbakemeldinger. Be noen lese gjennom en lengre tekst på både mobil og laptop, og spør spesifikt om hvor komfortabel lesingen føles. Den typen tilbakemelding er ofte mer verdifull enn finjustering på pikselnivå alene.