Brødtekst 

Brødtekst bør som udgangspunkt ikke overstige ca. 100 anslag pr. linje.

En linjelængde på 70–110 anslag giver typisk den bedste læseoplevelse på større skærme. Her er teksten let at følge uden at virke hverken for kompakt eller for bred.

På mindre skærme tilpasses linjelængden naturligt via responsivt design.

Nedenfor ses antal anslag pr. linje i vores GoPublic-grid.

4 + 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

Brødtekst: 95 anslag
5 + 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Brødtekst: 103 anslag
6 + 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

Brødtekst: 119 anslag

Linjelængder i praksis

Som webdesigner er det oplagt at skæle til nyhedssites som dr.dk, tv2.dk, politiken.dk, eb.dk og journalisten.dk. Her produceres der dagligt store mængder indhold, og læseoplevelsen er gennemarbejdet – blandt andet i forhold til linjelængde.

En uformel gennemgang af den længste linje i udvalgte artikler viser følgende niveau:



7 + 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

Brødtekst: 159 anslag

På vores egen underside Legater er vi oppe på 159 anslag (inkl. mellemrum).
Det er i den lange ende – typisk for mere formel tekst, men noget tungt i forhold til optimal læsbarhed på skærm.

En anbefaling er, at vi satser på en maksimal linjelængde på ca. 100 anslag og ideelt 70–90 anslag pr. linje på større skærme.

Det sikrer en rolig læserytme, bedre overblik og en mere behagelig læseoplevelse.

8 + 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

❌ Brødtekst: 170 anslag
9 + 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis no-

❌ Brødtekst: 178 anslag
10 + 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

❌ Brødtekst: 184 anslag
11 + 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi

❌ Brødtekst: 195 anslag
12 = Fullwidth, max-width: 1600px;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 

❌ Brødtekst: 212 anslag

body {
    font-size: 1rem;
    line-height: 1.6rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Switzer,Sans-Serif;
    background-color: #ededed;
    color: #2d323c;
    font-weight: 400;
    overflow-y: auto;
    overflow-x: hidden;
}

.text p, .text a, .text ul li, .text ol li, .text blockquote, .text figcaption, .text dd, .text dt {
    hyphens: auto;
    overflow-wrap: break-word;
}

hyphens: none;
overflow-wrap: break-word;
Efterfølgende grønne spaltebredder er de absolut anbefalede når det angår læsevenlighed/ længere artikler.
MEN! GoPublics CSS er opsat så disse anbefalede spaltebredder opfører sig uhensigtsmæssigt på en tablet på højkant: Alle content-modueler tvinges til en spaltebredde på 50 %.
Let at læse, men ikke kønt.

P.t. anbefaling/ kompromis: Brug 7 + 5 til længere artikler.
Vi kan via CSS definere en max-width på brødtekst.