Gå til sidens indhold

Design

Fonte og typografi

Fonte og typografi omhandler de valgte fonte, samt formatering og brug af tekst og overskrifter.

Fonte

Hvis din selvbetjeningsløsning skal integreres på borger.dk og Virk, skal du benytte fonten “IBM Plex Sans”. Fonten er valgt, fordi alle browsere præsenterer den flot og den er nem at arbejde med. Samtidig bygger den visuelt bro mellem de fonte, der for tiden bliver anvendt på borger.dk og Virk.

IBM Plex Sans

Det Fælles Designsystem benytter fonten "IBM Plex Sans" til al tekst. Fonten er “open source” og kan derfor frit benyttes af alle løsninger under "Open Font License" betingelser.

IBM Plex Sans er valgt som font, da det er en æstetisk og læsbar open source font, der kan anvendes gratis under SIL Open Font License. Det er en alsidig sans serif font, der egner sig godt til brugergrænseflader. Fonten har de karakteristika, som designsystemet promoverer. Den er simpel og neutral i sit udtryk og yderst skalerbar grundet de mange variationer (typer, vægte, sprog, m.m.), som fonten understøtter.

Fallback font "system"

En fallback font, er den font som vises, når browseren ikke kan indlæse den angivne font.

Det Fælles Designsystem gør brug af "system", hvilket vil sige at fallback fonten er op til styresystemet på den enhed der benyttes. Dette gør ydeevnen (performance) bedre, da browseren ikke skal hente andre fonte, men i stedet bruger en den har i forvejen.

Overskrifter

Overskrifter strukturerer siden, giver overblik og hjælper brugeren og skærmlæseren til at kunne overskue sidens logik og opbygning.

Overskriftstyperne h1-h6 har to formål:

  • De er sidens indholdsfortegnelse for skærmlæsere.
  • De skaber et visuelt hierarki og gør siden overskuelig ved at inddele den i afsnit og underafsnit.

Brug den overskrift som ser bedst ud uden at ødelægge oplevelsen for brugere, der anvender skærmlæsere

Alle HTML-overskrifter h1 til h6 er stylet; dvs. de er tildelt en størrelse, farve og vægt. Du kan overskrive stylingen, så den bliver visuelt ændret, og samtidig holde en semantisk korrekt opbygning til skærmlæseren. Det kan fx være relevant, hvis det ser bedre ud, at en overskrift h3 ligner en overskrift h5. Du kan ændre styling på en heading ved at bruge denne struktur: <h3 class="h5">. Det vil fortsat være brugervenligt for brugere, der anvender skærmlæsere.

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6">
            <h1>Overskrift 1</h1>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system";<br>font-weight:700;<br>font-size:4rem;<br>color:#1a1a1a;<br>line-height:4.8rem;<br>margin:0 0 1.6rem 0;</pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <h2>Overskrift 2</h2>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system";<br>font-weight:600;<br>font-size:3rem;<br>color:#1a1a1a;<br>line-height:4rem;<br>margin:4rem 0 1.6rem 0;</pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <h3>Overskrift 3</h3>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system";<br>font-weight:600;<br>font-size:2.4rem;<br>color:#1a1a1a;<br>line-height:3.2rem;<br>margin:4rem 0 1.6rem 0;</pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <h4>Overskrift 4</h4>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system";<br>font-weight:600;<br>font-size:2rem;<br>color:#1a1a1a;<br>line-height:3.2rem;<br>margin:2.4rem 0 1.6rem 0;</pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <h5>Overskrift 5</h5>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system";<br>font-weight:600;<br>font-size:1.6rem;<br>color:#1a1a1a;<br>line-height:2.4rem;<br>margin:2.4rem 0 0 0;</pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <h6>Overskrift 6</h6>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system";<br>font-weight:600;<br>font-size:1.3rem;<br>text-transform: uppercase;<br>color:#1a1a1a;<br>line-height:2.4rem;<br>margin:2.4rem 0 0 0;</pre>
        </div>
    </div>
</div>

Overskrifter er både et visuelt virkemiddel og en struktur i koden, som har betydning for brugere, der anvender skærmlæser. Det er muligt at følge en stringent struktur i overskrifter for skærmlæsere og samtidig tilpasse overskrifternes visuelle udtryk til brugere, der orienterer sig visuelt.

Tilgængelighed

Du kan bruge H-tagget i koden til at strukturere sidens logik for skærmlæsere: H-tags tegner indholdsfortegnelsen op som vist nedenfor.

  Sidetitel (h1)                1
    Afsnit (h2)                 1.1
      Underafsnit (h3)          1.1.1
    Afsnit (h2)                 1.2
      Underafsnit (h3)          1.2.1
    Afsnit (h2)                 1.3
      Underafsnit (h3)          1.3.1
        Under-underafsnit (h4)  1.3.1.1
        Under-underafsnit (h4)  1.3.1.2
    Afsnit (h2)                 1.4
    Afsnit (h2)                 1.5

Skærmlæseren læser dette op for brugere, der orienterer sig via skærmlæser. Det er derfor vigtigt, at du anvender strukturen, så brugere med skærmlæsere nemt kan hoppe imellem afsnit og underafsnit.

Det er muligt at følge en stringent struktur i overskrifter for skærmlæsere og samtidig ændre på overskrifternes visuelle udtryk til brugere, der orienterer sig visuelt.

Hvornår skal du bruge overskrifter?
  • Du skal bruge overskrifter til at skabe struktur på din side og gruppere dit indhold i logiske og overskuelige bidder, både for skærmlæsere og visuelt orienterede brugere.
Hvornår skal du overveje anden formatering end overskrifter?
  • Du skal bruge anden formatering end overskrifter, hvis du vil fremhæve eller ændre styling af tekst, som ikke har betydning for strukturen på siden. Brug fx beskedboksen til information, fremhæv særlige punkter med punktopstilling eller anvend stor tekst (display) til at markere udvalgte dele af teksten.
Vejledning
  • Hold en stram overskriftsstruktur i koden. En h3 altid er under en h2, en h4 under en h3 osv. h1 er altid øverst i hierarkiet.
  • Du bør ikke springe overskriftsled over og fx gå direkte fra en h2 til en h4.
  • Hvis du visuelt vil have et andet udtryk, så brug en class="hX" til at style overskriften om. Dermed bryder du ikke logikken for skærmlæsere, men får et andet visuelt udtryk på dine overskrifter.
Hvis du vil vide mere

Felt- og tabeloverskrifter (label og th)

I eksemplet nedenfor viser vi, hvordan overskrifter til felter og overskrifter i tabeller ser ud. Overskrifter til felter og tabeller er ens, men der er forskel i koden.

<div class="container">

    <div class="row">
        <div class="col-12 col-md-6">
            <label class="form-label">Dette er en feltoverskrift</label>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system"<br>font-weight:600<br>font-size:1.6rem<br>line-height:2.4rem</pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <table class="table table--borderless">
                <thead>
                    <tr style="border-bottom:0;">
                        <th style="border-bottom:0;">Dette er en
                            kolonneoverskrift i en tabel</th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system"<br>font-weight:600<br>font-size:1.6rem<br>line-height:2.4rem</pre>
        </div>
    </div>
</div>

Feltoverskrift (label)

Du kan betragte formularer som en dialog med brugerne, hvor feltoverskriften er dit spørgsmål til brugeren og feltet, som brugerne kan skrive i, er svaret de giver dig.

  • Feltoverskrifter er dine spørgsmål til brugeren.
  • Sørg for at brugeren kan forstå, hvad du beder om svar på.
  • Undgå lange og komplekse feltoverskrifter.
  • Stil kun ét spørgsmål i en feltoverskrift.
  • Feltoverskrifter placeres altid over feltet, som anvist under formularelementer.
  • Alle felter eller sammenhængende gruppe af felter (fx datovalg) skal have en feltoverskrift.

Tabeloverskrift (th)

Tabeloverskrifter er visuelt ens med feltoverskrifter. Du kan bruge dem til at skabe overblik over rækker eller kolonner af data i tabeller og lister.

Tabeloverskrifter beskriver, hvad indholdet i en række eller kolonne angiver.

Manchettekst (lead paragraph)

Du kan bruge manchettekst til at introducere et trin eller en sides indhold. Typisk kan du bruge den når og hvor, det giver mening i kontekst for brugerne.

Du kan give teksten extra fokus ved at give den klassen .font-lead.

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6">
            <p class="font-lead">Manchettekst (.font-lead)</p>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system"<br>font-weight:400<br>font-size:2rem<br>line-height:3.2rem<br>margin:2.4rem 0 1.6rem 0</pre>
        </div>
    </div>
</div>
  • Hold manchetteksten kort og præcis, gerne max tre linjer.
  • Manchetteksten er kun til korte introduktionstekster og ikke til lange informationstekster. Brug brødtekst og lister til yderligere informationstekster.
  • Brug kun manchettekst, når og hvor det er nødvendigt. Brug fx ikke manchettekst, hvis brugeren selv kan afkode siden og begynde at indtaste med det samme.
  • Typisk starter indtastningsflowet eller en sektion lige under manchetteksten. Hvis det understøtter brugerens gennemførelse af løsningen, kan du godt indsætte brødtekst, lister, links, o.l. efter manchetteksten.

Brødtekst (body copy)

Brødtekst er standardformateringen for tekst i designsystemet og bliver i særdeleshed brugt til afsnit af tekst.

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6">
            <p>Brødtekst</p>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system"<br>font-weight:400<br>font-size:1.6rem<br>line-height:2.4rem<br>margin:1.6rem 0 1.6rem 0</pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <p><small>Dette er lille brødtekst (small-tag)</small></p>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system"<br>font-weight:400<br>font-size:1.4rem<br>line-height:2.4rem</pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <p class="small-text">Dette er lille brødtekst (.small-text)
            </p>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system"<br>font-weight:400<br>font-size:1.4rem<br>line-height:2.4rem</pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <p><strong>Dette er fed brødtekst</strong></p>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system"<br>font-weight:700<br>font-size:1.6rem<br>line-height:2.4rem</pre>
        </div>
    </div>
</div>
  • Undgå "mure af tekst" i din selvbetjeningsløsning: Bruge white space / mellemrum til at skabe luft mellem tekster og øge læsbarheden.
  • Brug kun fed tekst i meget begrænset omfang: Fx inde i sætninger til at fremhæve særligt centrale tal eller pointer.
  • Brug ikke fed tekst som overskrift.
  • Brug ikke understreget tekst, da det ligner links.
  • Brug ikke kursiv tekst, da det nedsætter læsbarheden.

Stor tekst (display text)

Stor tekst kan fx bruges til at fremhæve positive eller negative resultater og dermed fremhæve særlige tal eller ord.

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6">
            <p class="displayheading-1">Display, text 1</p>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system"<br>font-weight:700<br>font-size:4.8rem<br>line-height:5.6rem<br>color:#1a1a1a<br>margin-bottom:0</pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <p class="displayheading-2">Display, text 2</p>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family: "IBMPlexSans","system"<br>font-weight:700<br>font-size:3.2rem<br>line-height:4rem<br>margin:1.6rem 0 0 0</pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <p class="displayheading-1 text-positive">Display, positive</p>
        </div>
        <div class="col-12 col-md-6">
            <pre>color:#358000</pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <p class="displayheading-2 text-negative">Display, negative</p>
        </div>
        <div class="col-12 col-md-6">
            <pre>color:#CC0000</pre>
        </div>
    </div>
</div>

Anvendes til

  • At fremhæve tal eller ord i særlig grad.

Anvendes ikke til

  • Afsnit af tekst
  • Alle tal i en beregning
  • Overskrifter

Vejledning

Brug kun stor tekst i meget begrænset omfang og til nøje udvalgte kommunikative formål.

Lister

Lister bruges til at organisere information, så det giver brugeren overblik.

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
            <p class="h4">Unordered list</p>
            <ul>

                <li>
                    Unordered list

                </li>

                <li>
                    Unordered list

                </li>

                <li>
                    Unordered list

                </li>

                <li>
                    Unordered list

                    <ul class="sub_list">

                        <li>
                            Unordered list

                        </li>

                        <li>
                            Unordered list

                        </li>

                        <li>
                            Unordered list

                        </li>

                    </ul>

                </li>

            </ul>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
            <p class="h4">Ordered list</p>
            <ol>
                <li>Ordered list

                </li>
                <li>Ordered list

                </li>
                <li>Ordered list

                </li>
                <li>Ordered list

                    <ol class="sub_list">
                        <li>Ordered list

                        </li>
                        <li>Ordered list

                        </li>
                        <li>Ordered list

                        </li>
                    </ol>

                </li>
            </ol>
        </div>
    </div>
</div>

Anvendes til

  • Brug lister, når du skal liste ord eller sætninger op.
  • Brug lister til at give brugeren et hurtigt overblik.

Anvendes ikke til

  • Lister af lange afsnit med forklarende tekst. Brug mellemrum i stedet.

Vejledning

  • Hold listerne så korte og faktuelle som muligt.
  • Brug tal i listerne, når der er et hierarki i det, du præsenterer.
  • Ved brug af tal, hold da listen til så få niveauer som muligt - og hvis muligt under 3 niveauer.
  • Brug punkter, når der ikke er et hierarki i informationerne.

Hjælpetekst og fejlbeskeder

Kommunikér med og giv feedback til brugeren via hjælpetekster og fejlbeskeder.

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6">
            <p><span class="form-hint"
                    id="input-hint-message-form-error">Hjælpetekst, der
                    forklarer, hvad du skal gøre</span></p>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family:"IBMPlexSans","system"<br />font-weight:400<br />font-size:1.6rem<br />line-height:2.4rem<br />color:#747474</pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6">
            <p><span class="form-error-message"
                    id="form-error-message-form-error"
                    role="alert">Fejlbesked, der hjælper brugeren
                    videre</span></p>
        </div>
        <div class="col-12 col-md-6">
            <pre>font-family:"IBMPlexSans","system"<br />font-weight: 600<br />font-size: 1.6rem<br />line-height: 2.4rem<br />color: #CC0000<br />margin-top: 4px</pre>
        </div>
    </div>
</div>

Linjelængde

For at sikre optimal læsbarhed er der indsat en maksimal bredde på linjelængden for brød- og manchettekst i koden til designsystemet.

<div class="container">
    <div class="row">
        <div class="col-12">
            <p class="h5">Linjelængde for brødtekst (p) - Desktop</p>
            <p>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 commodo consequat.
            </p>
            <p class="demo-typesetting">Svarer til ca 75 tegn på desktop.
            </p>

            <p class="h5">Linjelængde for manchettekst (font-lead)-
                Desktop</p>
            <p class="font-lead">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 commodo consequat. </p>
            <p class="font-lead demo-typesetting">Svarer til ca 75 tegn på
                desktop.</p>
        </div>
    </div>
</div>

Linjeafstand

Linjeafstanden er baseret på teksttypernes linjehøjde.

<div class="container">
    <div class="row">
        <div class="col-12">
            <p class="h1">Sidetitel</p>
            <p class="font-lead">Lead tekst Lorem ipsum dolor sit
                amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>

            <h2>Sektionsoverskrift</h2>

            <h3>Underoverskrift</h3>
            <p>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 commodo consequat. </p>

            <h4>Underoverskrift</h4>
            <p>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 commodo consequat. </p>
            <p>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 commodo consequat. </p>

            <h5>Under-underoverskrift</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.</p>
        </div>
    </div>
</div>