Skriftstørrelser til et website – guide til ideelle størrelser

Det ER størrelsen, det kommer an på! Vælger du forkerte skriftstørrelser til et website, kan det have adskillige negative konsekvenser

En af de mest sikre veje til at vælge forkert er at lade valget styre af subjektive meninger om, hvad der er pænt - uden at bruge objektiv viden om, hvad der fungerer godt.

Pænt design er ikke altid garanti for, at det også er velfungerende.
Pænt design handler i øvrigt meget ofte om at overholde “regler”. Eller snarere principper.

I denne guide får du simple værktøjer og metoder til at regne ud, hvilke skriftstørrelser til et website, der er ideelle.

Du kan naturligvis bare vælge efter, hvad du synes er pænt….

Og lad os starte der. Det er svært at diskutere, hvad der der pænt webdesign - og pæn typografi - uden at svare med: “JEG synes…”

Altså meget personlige meninger, der ofte er vidt forskellige.

Vi kan diskutere i uendelighed, om det DU synes er bedre end det JEG synes.

Regn ud, hvad der er harmoniske skriftstørrelser til et website

Vi kan også prøve at lægge vores “synsninger” væk - og vurdere efter mere objektive principper.
Når det gælder størrelse på skrifttyper, er der en ret enkel og nyttig model…. SYNES JEG :-)

Folk med forstand på typografi har lært mig, at bestemte proportioner appellerer til vores øjne på samme måde som musikalske harmonier er godt for ørerne.

Man kan kort sagt regne ud, om proportionerne er harmoniske.
Er det harmonisk, bliver det ofte opfattet som pænt.

Det handler om meget mere end størrelse

Denne guide fokuserer på størrelse. Men der er 116 andre detaljer, der er værd at fokusere på, når vi taler om brug af typografi i webdesign. Dem lader vi ligge for nu.

Tilbage til størrelsen. Vi skal have valgt de rigtige størrelser til overskrifter og brødtekster.
Forskellige størrelser!

Der skal nemlig gerne være et visuelt hieraki med tydelig forskel. Ikke fordi det er pænt. Fordi det er praktisk.

Forskellige størrelser hjælper besøgende med hurtigt at skelne mellem forskellige typer information.

Er al tekst i (næsten) samme størrelse - som i gamle dage med skrivemaskine og tekst på A4-papir - er det svært at kende forskel på teksttyper - brødtekst, rubrikker, underrurbikker, mellemrubrikker, etiketter, billedtekster, citater. Dermed er det svært at navigere i en tekst. Og svært for besøgende at finde den information, de søger. Svært at bevare koncentrationen og interessen.

Kontrast og visuelt hieraki hjælper besøgende med at finde rundt i teksten. Med at finde interessante eller relevante informationer blandt andet.

I en bog kan vi eksempelvis nemt finde et nyt kapitel ved at kigge på en markant overskrift i toppen af siden, mens vi blader i bogen.
I en papiravis kan vi adskille de forskellige artikler ved hjælp af overskriften.

Det er derfor ikke nok, at en tekst er pæn at se på.
Den skal også være nem at læse, skimme og skanne.

Hvad de tre forskellige læsemønstre betyder, kommer jeg nærmere ind på. Der er tale om tre forskellige slags besøgende med vidt forskellige forventninger til en tekst. Og for dem er brugen af forskellige skriftstørrelser ret afgørende.

Er der et dårligt visuelt hieraki i en tekst, kan det ofte måles, at læserne falder fra.

Starter du med en lidt for lille tekststørrelse - og overskrifter, der ikke er væsentligt større - vil besøgende forlade siden betydeligt hurtigere, end hvis der bliver skruet op for mindste skriftstørrelse og op for de øvrige størrelser på siden.

Kan vi nemt kan se, om en tekst er brødtekst, mellemrubrik eller hovedrubrik, er det lettere at navigere i en tekst. Nemmere at skelne mellem forskellige informationer. Det er derfor vi aldrig nøjes med én skriftstørrelse.

Guide til at vælge størrelse på skriften

I denne guide får du to simple metoder til at vælge gode skriftstørrelser. Eller font size, som det også hedder.

• Regnestykket - en tommelfingerregel til at regne sig frem til de rigtige størrelser
• Øjemålet - brug dine øjne (og fødder!) til at vælge de rigtige størrelser

Det fine ved begge metoder er, at uanset du bruger den ene eller anden, lander du i begge tilfælde med noget brugbart. Hvis du blot accepterer at starte med en bestemt skriftstørrelse som udgangspunkt.

Lad os starte i det små - med den mindste skriftstørrelse. Den såkaldte brødtekst. Det er den, der sædvanligvis er mest af.
Derudover er der rubrikker (overskrifter) og mellemrubrikker.
Måske endda også citater, lister, billedtekster og andre tekst-typer.

Vi kan formodentlig nemt blive enige om at stille følgende minimumskrav til brødtekstens størrelse:

• Teksten skal være nem at læse. Også for besøgende over 40 år
• Teksten skal være nem at læse både på computer og smartphone

Min målestok for, om en tekste er nem at læse er ret simpel. Man kan gå med sin coffee-to-go i den ene hånd og smartphone i den anden hånden - og nemt læse teksten uden at tabe tråden undervejs.

Starter vi med letlæselig brødtekst som et fundamentalt og ufravigeligt krav, er det rimeligt enkelt at fastlægge størrelsen på den mindste skrifttype på et website.

• 16px er minimum, mener mange
• 18px er langt bedre, vil jeg mene
• 20px er i mange tilfælde bedst

Så lad os lige få mindste størrelse fastlagt.

Tre forskellige slags læsere

Grundlæggende læser vi på tre forskellige måder på en skærm.

Det vil sige, vi læser kun i det ene tilfælde.
Vi skimmer for at se, om der står noget interessant.
Eller skanner fordi vi leder efter bestemt information. (Åbningstid, telefonnummer, adresse, klokkeslet, dato, emailadresse etc.)

• Når vi læser, er vi koncentrerede og læser sædvanligvis fra top til bund, fra A til Å
• Når vi skimmer er vi ukoncentrerede og mister lynhurtigt interessen
• Når vi skanner er vi utålmodige og vil have relevant information lynhurtigt

Læs mere om de forskellige læser-typer

Og med det in mente er valg af skriftstørrelse nemt:

• 18px er fint til de tålmodige læsere. Med den størrelse kan de fleste læse ubesværet.
• 20px er bedst, hvis vi vil fange og fastholde interessen hos skimmere og skannere.

Jeg vælger derfor ofte de to forskellige størrelser efter følgende princip

• 18px til blogindlæg og lange artikler, som overvejende bliver læst koncentreret
• 20px til forside, salgssider, produktomtaler og lignende, der skal kunne fastholde

Har du først valgt brødtekstens størrelse, er det nemt at finde passende størrelser til rubrikker og mellemrubrikker.

Men lad os lige kigge lidt på de forskellige typer tekst på en webside - og de koder, er bruges til at styre dem.
I webdesign bruger man blandt andet disse koder til at styre skrifttyper:

• <P> betyder paragraph. Det er brødteksten
• <H1> betyder header1 og det er den primære rubrik (overskrift) på siden. Den står sædvanligvis i toppen.
• <H2> er den sekundære rubrik. Den er fint i toppen af nye sektioner på en side. Der kan være flere på samme side.
• <H3> er den 3. rubrik. Den er velegnet til såkaldte mellemrubrikker - små overskrifter mellem afsnit i brødtekst.

 

I modsætning til hvad mange vist tror, handler brug af H1, H2 og H3 ikke nødvendigvis om at vælge forskellige skriftstørrelser.

H1 handler også om søgemaskineoptimering. Ordene i den overskrift (H1) opfatter Google som det vigtigste signal om, hvad teksten handler om. Det er derfor en fordel at bruge vigtige nøgleord i netop det overskrift. Uanset dens størrelse.

De tre rubriktyper kan sagtens have samme størrelse. Google er ligeglad med, hvilken størrelse, de har.

Webdesigneren indstiller, hvordan de tre forskellige rubrikker skal se ud - hvordan de skal adskille sig fra hinanden.

Tager du udgangspunkt i brødtekstens størrelse, kan du nemt regne dig frem til den ideelle størrelse på H1, H2 og H3

Hvordan du kan gøre det, fortæller jeg om lidt.

Først et par ord om, hvorfor markant forskellige skriftstørrelser er optimalt.

Det handler nemlig ikke (kun) om, hvad der er pænt.
Det handler først og fremmest om at gøre det nemt for brugerne at navigere i teksten.

• Brødteksten skal være nem at læse
• H1, H2 og H3 skal derudover være nemme at skimme og skanne

Størrelse hjælper brugeren. Tydeligt forskellige størrelser gør det nemt at navigere i en sides indhold og finde dét, der er interessant og relevant.

Og så lige et par ord om kontrast. Det er nemlig også en væsentlig psykologisk trigger.

Når vi bruger kontraster i webdesign, bliver det ikke kun nemmere at finde rundt. Designet bliver også mere interessant. Ofte endda mere elegant. En massiv tekst, hvor alt er i samme størrelse, bliver ofte opfattet som massiv, uoverkommelig og uoverskuelig. Især på en skærm.

Tekst på skærm skal ikke ligne romansider

På papir er romaners væg-til-væg-tekst fremragende.

Romansider layout - væg-til-væg-tekst - gør det nemt at læse i flow. Men sådan læser vi kun, når vi er uforstyrrede. Når vi læser af lyst. Når vi har afsat masser af tid til at læse. Når vi læser uafbrudt og koncentreret.

Sådan læser vi bare yderst sjældent på computer, tablet og smartphone.
Og derfor skal tekst på skærm IKKE ligne tekst i en roman. (Medmindre det ER en roman).

Mange gammeldags tekstforfattere og journalister - især dem, der selv er rutinerede læsere - skriver desværre stadig tekster til skærm som om de bliver læst på papir af en tålmodig, koncentret og læsevant bruger med masser af tid.

Skriv til skærmen og den forstyrrede læser

Skriver vi til utålmodige, ukoncentrerede og forstyrrede læsere med (lille) skærm og slatten koncentration (altså tekst til et website) skal teksterne slet ikke ligne papirtekster. Ikke hvis vi vil gøre det bedst mulige for læsere, skimmere og skannere.

Vi skal bruge kontrast. Altså forskellige skriftstørrelser.
Der er mange andre design-teknikker, vi også kan bruge, men her og nu fokusere jeg udelukkende på skriftstørrelser.

“En modulær skala er - som en musikalsk skala - et forudbestemt sæt af forskellige skriftstørrelser i harmoniske proportioner.”
Robert Bringhurst, typograf og forfatter til bogen “The Elements of Typografic Style”

Man starter med en bestemt størrelse og et nummer (en faktor til at lave beregningen).
Eksempelvis kan faktoren være ratioen fra det gyldne snit (1.618) som mange mener er perfekt harmoni.

Den synes jeg dog kan blive for voldsom. Men prøv!

Jeg kan personligt godt lide “Perfect fifth” (1.5)

I runde tal, som er nemme for en tekstnørd at regne med, er det cirka:

1. Primære rubrikker - lidt mere end tre gange så store som brødteksten
2. Sekundære rubrikker - lidt mere end dobbelt så store som brødteksten
3. Tertiære rubrikker (mellemrubrikkerne i brødteksten) - halvanden gang større end brødteksten

Helt nøjagtigt - ifølge den modulære skala - bliver det til følgende.

• Brødtekst 20px
• H1 67px
• H2 45px
• H3 30px

Du kan se dem på skærmbilledet herunder. Efter billeder finde du linket til typografi-calculatoren, så du selv kan regne den ud.

Det er især de fire nederste skrifttyper, du skal lægge mærke til. (20px, 30px,45px og 67px)

Her kan du finde den modulære skala med 20px som udgangspunkt

Tager vi udgangspunkt i en brødtekst på 18px bliver det:

• Brødtekst 18px
• H1 60px
• H2 40px
• H3 27px

Her kan du finde den modulære skala med 18px som udgangspunkt

Du behøver ikke følge størrelsen totalt slavisk.
Jeg forsøger at holde mig til de valgte størrelser, men skruer gerne et par px op og ned efter behov.

###Glem ikke, om du designer til læsere, skimmere eller skannere
Lad mig lige minde om, at nu taler vi om at designe tekst på sider, der skal vække interesse - fange og fastholde den. Altså sider med tekst, der overvejende bliver skimmet og skannet.

Hvis vi derimod skriver og designer blogindlæg - eller andre tekster, der bliver LÆST koncentreret - kan vi skrue lidt ned for effekterne og skriftstørrelsen. Så behøver vi ikke larme så meget. Når først folk går i gang med at læse, bliver de sædvanligvis ved.

Synes du kontrasten er FOR voldsom, kan du skrue ned for den faktor, du bruger til at variere størrelserne. Du kan eksempelvis prøve konsekvent at gange med en anden faktor

Vælg din egen faktor og følge den

Ganger du med 1.2 får du følgende skala:

• Brødteksten 20px
• H3 24px
• H2 29px
• H1 35px

Ganger du med 1.3 får du følgende skala:

• Brødteksten 20px
• H3 26px
• H2 34px
• H1 44px

Følg din skala (nogenlunde) konsekvent

Nu har du formodentlig luret, at det for det første kan være smart at vælge størrelser efter et gennemgående princip. Og at det tillige er smart at følge princippet konsekvent på alle sider.

Brug ikke en H1 i 50px på den ene side for så at lave alle H2 i den størrelse på en anden side.
Vær konsekvent fordi det hjælper de besøgende med at navigere.

Bruger du en konsekvent samme størrelse til H2, hjælper du besøgende med at vurdere, hvornår indholdet er en særskilt del på siden - hvornår der eksempelvis er tale om et nyt emne. Lige som man bruger en bestemt størrelse til at vise, at læseren er nået til et nyt kapitel.

Skriftstørrelser til tålmodige og koncentrerede læsere

Når vi skriver og designere til tålmodige læsere (frem for de utålmodige skimmere og skannere), kan skriftstørrelserne uden videre skrues betydeligt ned.

Vi behøver ikke “larme” så meget, når brugerne er koncentrerede og indstillet på at læse tålmodigt. Vi skal blot sørge for - naturligvis - at brødteksten er nem at læse. 18px kan gå. 20px er bedre.

1. Primære rubrikker behøver ikke være mere end 2 gange så store som brødteksten
2. Sekundære rubrikker kan fint være 1.5 gang så store som brødteksten
3. Tertiære rubrikker (mellemrubrikkerne i brødteksten) kan være 1.2 gang større end brødteksten

• Brødteksten 18px
• H1 36px
• H2 27px
• H3 22px

 

• Brødteksten 20px
• H1 40px
• H2 30px
• H3 24px

Teksten fortsætter efter billedet

Brug dine øjne og fødder til at vurdere skriftstørrelser

Når du har regnet størrelserne ud, kan du teste dem ved bare at bruge dine øjne og fødder.

Skriv en tekst på skærmen, hvor du bruger de fire skriftstørrelser. Altså

Gå nu så langt væk fra skærmen, at du får svært ved at læse brødteksten.
… du skal stadig kunne læse H3

Gå så langt væk fra skærmen, at du får svært ved at læse H3
… du skal stadig kunne læse H2

Når du ikke mere kan læse brødtekst, H2 og H3 skal du kunne læse H1 uden problemer.

Kontrasten sikrer, at du nemt kan vække interesse - samt fange og fastholde.

Der er adskillige andre teknikker, som webdesignere bruger til at lokke besøgende ind i teksten. Her handlede det kun om størrelse.
Og ja - teksten skal også være velskrevet, relevant og interessent. Størrelse alene er aldrig nok.

Ingen regel uden undtagelser

Selvom jeg nu lige har forsøgt at gøre det enkelt og ligetil er jeg nødt til at tilføje, at der ikke er tale om eksakt videnskab eller vedtagne regler. Og at det endda er en forsimplet forklaring.

Først og fremmest: Der er altid undtagelser.
Der også plads til at bryde “reglerne”.

Derudover kan der være stor forskel på fonte.
20px kan være et fremragende valg til nogle fonte og helt forkert til andre.

Størrelsen alene er heller ikke nok.
Du kan vælge en passende størrelse og ødelægge læsbarheden ved at vælge forkert linjehøjde.
Omvendt bliver en lidt for lille tekststørrelse nemmere at læse, hvis en lidt for klemt linjehøjde øges en smule.

Pas på linjelængder

På en computerskærm bør der ikke være mere end 60 karakterer pr. linje (tæl mellemrum med)
På en smartphone bør der ikke være mere end 35 karakterer pr. linje (inkl. mellemrum)

Ind imellem ser jeg sider, hvor teksten strækker sig i hele skærmens bredde - fra venstre til højre. Nogle gange med 90-100 karakterer pr. linje og en alt for lille skriftstørrelse.

Som om alle de detaljer ikke er mere end rigeligt at forholde sig til, er farven på skriften og baggrunden også helt afgørende. Det handler igen om kontrast.

Det vigtigste er, synes jeg, at tekst er nem at læse, skimme og skanne.
Kontrast - størrelse og farve - bidrager derudover ofte til at skabe et visuelt spændende udtryk.

En ensformig tekst i samme størrelse bliver nemt en kedelig grød på skærmen.
For mange forskellige skriftstørrelser skaber et rodet og uoverskueligt indtryk.

Fire forskellige størrelser (på samme side) er ofte rigeligt - fordelt på:

Først og fremmest - typografien skal gerne forkæle både teksten, budskabet og læseren.

Har du valgt det rigtige

Det er en god øvelse konstant at øve sig i ikke kun at tage udgangspunkt i “Jeg synes det er pænt at…..”

Design må gerne være pænt. Men prøv Hver gang du beslutter dig for en skrifttype, en skriftstørrelse eller en anden designmæssig detalje, så spørg dig selv:

• Vil det her gøre websitet bedre for besøgende?
• Vil det her gøre indholdet mere brugbart for besøgende?
• Vil det her gøre noget nemmere for besøgende?

Kan du ikke svare ja tre gange i træk, bør du nok overveje, om der er et bedre valg.