Bredde af tekstlinier

Tekstlinier og læsevenlighed

I denne artikel har jeg undersøgt hvilken bredde tekstlinier der fungerer bedst i forhold til læsevenlighed - layoutet tager udgangspunkt i desktop-størrelse og ikke mobile enheder (mabile first). Tekstlinierne bør altså have en maksimal bredde angivet i en statisk værdi som pixel med mulighed for at at blive smallere i forbindelse med et Responsivt Layout.

Responsive skærmbredder

At bestemme bredden af min nye hjemmeside, er med introduktionen af mobile enheder som smartphones og tablets blevet en kompliceret affære. For bare et par år tilbage var anbefalingen, at sidens bredde var cirka 960 pixels - dette ville passe fint på både laptops og stationære computere.

Siden er de mindste skærme blevet så små som 320 pixels brede, så for at tilgodese de mobile enheder, er det nu smartest at bruge Responsive Layout, hvilket blandt andet involverer skalering af tekst, Media Queries og valget mellem udvikling af hjemmesidens layout med udgangspunkt i desktop eller mobile enheder (Moble First).

Typografi kontra tekstens budskab

Medmindre teksten bruges som et decideret kunstnerisk element i layoutet, bør læsevenligheden altid prioriteres højest - tekstens primære opgave er at formidle et budskab til læseren, og skal derfor være så let at læse som muligt.

Når dette er sagt, er der jo mange måder layoute tekst på som harmonerer med sidens øvrige grafiske udtryk uden at teksten af den grund bliver kedeligere eller sværere at læse. Først og fremmest må jeg bruge mit ”grafiske øje”, når jeg vurderer typografien for en tekst i forhold til sidens øvrige layout.

Maksimum bredde

Minimum-værdien for tekstlinier er derfor allerede bestemt - spørgsmålet er imidlertid, hvor bred en tekstlinie kan blive uden at det forringer læsevenligheden?

Svaret afhænger i nogen grad af læseren, men samtidigt har en række faktorer indflydelse på læsevenligheden:

I. Antal tegn i en tekstlinie

Antallet af tegn og størrelsen af bogstaverne (font-size) er de vigtigste parametre når det gælder læsevenlighed - cirka 84 tegn per linie med en font-size på 14px giver en læsevenlig tekstlinie. Dette vil give en bredde på omkring 730px.

Antallet af tegn i en 730px bredt HTML-element

Antallet af tegn i en 730px bredt HTML-element

Er HTML-elementet som indeholder teksten af layoutmæssige årsager nødt til at være meget bredere end 730px, kan læsevenligeheden tilpasses ved at øge størrelsen af bogstaverne (font-size).

II. Størrelsen af bogstaverne

Mens 80 til 100 tegn vil fungere godt med en font-size på 14px til 16px, bliver læsevenligheden mindre når font-size øges til for eksempel 18px – antallet af tegn per linie bør øges tilsvarende, hvilket samtidig vil betyde, at tekstlinien bliver bredere.

Bruger jeg rem som værdi for fonten (for eksempel 1.4rem med en font-size i html på 62.5%), kan dette have indflydelse på tekstliniens bredde målt i pixel

III. Skrifttype

Selve fontens udssende kan også have betydning for antallet af tegn i tekstlinien – er det en ”kunstnerisk” font kan hvert bogstav være bredere eller højere end normalt, og man må regne med færre tegn per linie samt justering i line-height (linie-afstand).

Selv almindelige websafe fonte varierer en smule i størrelse i forhold til hinanden – for eksempel er Verdana en smule større end Arial, selvom jeg giver begge fonte samme font-size

IV. Tekstens betydning

Bredden af tekstlinier kan afhænge af indholdet – for eksempel vil en artikel med afsnit og overskrifter bruge omkring 80 til 100 anslag i bredden, mens et HTML-element som 'aside' indeholdende fakta og årstal ofte vil være en del smallere. Bruges ser der spalter - altså kolonner af tekst placeret ved siden af hinanden - bliver bredden af tekstlinierne selvfølgelig også smallere.