Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Styleguide

Tekst

Manchet

Du kan bruge en manchet 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.

Eksempel

Dette er en manchet

Designværdier

Skrifttype Skriftstørrelse Tekst tykkelse (font-weight) Tekstfarve
IBM Plex Sans 20px 400 #1a1a1a

Retningslinjer

Hold manchetten kort og præcis, gerne max tre linjer.

Manchet er kun til korte introduktionstekster og ikke til lange informationstekster. Brug brødtekst og lister til yderligere informationstekster.

Brug kun manchet, når og hvor det er nødvendigt. Brug fx ikke manchet, hvis brugeren selv kan afkode siden og begynde at indtaste med det samme.

Typisk starter indtastningsflowet eller en sektion lige under manchet. Hvis det understøtter brugerens gennemførelse af løsningen, kan du godt indsætte brødtekst, lister, links, o.l. efter manchet.

Brødtekst

Eksempel

Brødtekst

Dette er lille brødtekst

Dette er fed brødtekst

Designværdier

Tekst Skrifttype Skriftstørrelse Tekst tykkelse (font-weight) Tekstfarve
Brødtekst IBM Plex Sans 16px 400 #1a1a1a
Lille brødtekst IBM Plex Sans 14px 400 #1a1a1a
Fed brødtekst IBM Plex Sans 16px 700 #1a1a1a

Retningslinjer

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.

Hjælpetekst og fejlmeddelelser

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

Eksempel

Hjælpetekst, der forklarer, hvad du skal gøre

Fejlmeddelelse, der hjælper brugeren videre

Designværdier

Tekst Skrifttype Skriftstørrelse Tekst tykkelse (font-weight) Tekstfarve
Hjælpetekst IBM Plex Sans 16px 400 #747474
Fejlmeddelelse IBM Plex Sans 16px 600 #CC0000

Retningslinjer

Hjælpetekst og fejltekst knytter sig i udpræget grad til formularer. Du kan også anvende dem, hvor der er behov for at hjælpe brugeren med forklaring af et element eller at give feedback på et element.

Hjælpetekst

Nogle gange er det nødvendigt at forklare eller eksemplificere en feltoverskrift. Her kan du anvende hjælpetekst. Du kan også bruge hjælpetekst til at forklare, hvorfor du efterspørger særligt følsomme oplysninger. Fx hvis det kan være en barriere for at få et svar fra brugeren.

Brug hjælpetekst til at give uddybende forklaring (fx til at understøtte feltoverskrifter).

Se eksempel på brug af hjælpetekst

Fejlmeddelelse

Det er vigtigt for brugerne, at de får feedback på deres handling. Det gælder særligt, når noget fejler og fejltekst er et helt centralt element for formularer. Sørg derfor for, at de er knivskarpe og præcist kommunikerer, hvad fejlen består i, og hvad brugeren skal gøre for at komme videre. Skriv så vidt muligt fejlmeddelelse og vejledning i én og samme sætning.

  • Skriv klar og præcis fejltekst i et sprog, som brugeren forstår.
  • Vær høflig (“Indtast venligst din adresse”) og vær ikke anklagende (“Du mangler at indtaste din adresse”). Hjælp brugeren med at løse fejlen.
  • Skriv ikke tekniske eller fagligt tunge fejltekster og brug ikke “jargon”.
  • Placer fejlteksten dér, hvor fejlen forekommer.
  • Fejltekst er som udgangspunkt rød. I formularer skal du indikere fejltekst med en rød streg. Andre steder end i formularer skal du indikere fejltekst med et fejlikon.

Billedtekst

Forklarende eller beskrivende tekst tilhørende et billede.

Eksempel
Dette er en billedtekst

Designværdier

Skrifttype Skriftstørrelse Tekst tykkelse (font-weight) Tekstfarve Afstand mellem bogstaver
IBM Plex Sans 14px 400 #1A1A1A 0.4 px

Retningslinjer

Billedtekst vises under et billede, således at det synligt bemærkes at teksten og billedet hører sammen, samt at teksten ikke nødvendigvis er en del af den øvrige brødtekst.

Stor tekst

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

Eksempel

Stor tekst nr. 1

Stor tekst nr. 2

Stor positiv tekst

Stor negativ tekst

Designværdier

Tekst Skrifttype Skriftstørrelse Tekst tykkelse (font-weight) Tekstfarve
Stor tekst nr. 1 IBM Plex Sans 25px 500 #1a1a1a
Stor tekst nr. 2 IBM Plex Sans 21px 500 #1a1a1a
Stor positiv tekst IBM Plex Sans 21px 500 #358000
Stor negativ tekst IBM Plex Sans 21px 500 #CC0000

Retningslinjer

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.

Linjelængde

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

Eksempel

Linjelængde for brødtekst (p) - Desktop

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.

Svarer til ca 75 tegn på desktop.

Linjelængde for manchet (font-lead)- Desktop

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.

Svarer til ca 75 tegn på desktop.

Linjeafstand

Linjeafstanden er baseret på teksttypernes linjehøjde.

Eksempel

Sidetitel

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

Sektionsoverskrift

Underoverskrift

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.

Underoverskrift

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.

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.

Under-underoverskrift

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

Manchet

Eksempel på manchet

Dette er en manchet

Læs retningslinjerne for manchet

HTML Struktur

Kodeeksempel
<p class="font-lead">Dette er en manchet</p>

Brødtekst

Eksempel på brødtekst

Brødtekst

Dette er lille brødtekst

Dette er fed brødtekst

Læs retningslinjerne for brødtekst

HTML Struktur

Kodeeksempel
<p>Brødtekst</p>
<p class="small-text">Dette er lille brødtekst</p>
<p class="bold">Dette er fed brødtekst</p>

Hjælpetekst og fejlmeddelelser

Eksempel på hjælpetekst og fejlmeddelelse

Hjælpetekst, der forklarer, hvad du skal gøre

Fejlmeddelelse, der hjælper brugeren videre

Læs retningslinjer for hjælpetekst og fejlmeddelelser

HTML Struktur

Kodeeksempel
<p class="form-hint">Hjælpetekst, der forklarer, hvad du skal gøre</p>
<p class="form-error-message">Fejlmeddelelse, der hjælper brugeren videre</p>

Billedtekst

Eksempel på billedtekst
Dette er en billedtekst

Læs retningslinjer for billedtekst

HTML Struktur

Kodeeksempel
<div class="figcaption">Dette er en billedtekst</div>

Stor tekst

Eksempel på stor tekst

Stor tekst nr. 1

Stor tekst nr. 2

Stor positiv tekst

Stor negativ tekst

Læs retningslinjerne for stor tekst

HTML Struktur

Kodeeksempel
<p class="displayheading-1">Stor tekst nr. 1</p>
<p class="displayheading-2">Stor tekst nr. 2</p>
<p class="displayheading-2 text-positive">Stor positiv tekst</p>
<p class="displayheading-2 text-negative">Stor negativ tekst</p>