Gå til sidens indhold

Design

Tekst

Manchet tekst

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.

Dette er en manchet tekst

Design

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

Retningslinjer

  • 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

Brødtekst

Dette er lille brødtekst

Dette er fed brødtekst

Design

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 fejlbeskeder

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

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

Fejlbesked, der hjælper brugeren videre

Design

Tekst Skrifttype Skriftstørrelse Tekst tykkelse (font-weight) Tekstfarve
Hjælpetekst IBM Plex Sans 16px 400 #747474
Fejlbesked 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

Fejlbesked

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 fejlbesked 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 formulerer skal du indikere fejltekst med en rød streg. Andre steder end i formularer skal du indikere fejltekst med et fejlikon.

Stor tekst

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

Stor tekst nr. 1

Stor tekst nr. 2

Stor positiv tekst

Stor negativ tekst

Design

Tekst Skrifttype Skriftstørrelse Tekst tykkelse (font-weight) Tekstfarve
Stor tekst nr. 1 IBM Plex Sans 48px 700 #1a1a1a
Stor tekst nr. 2 IBM Plex Sans 32px 700 #1a1a1a
Stor positiv tekst IBM Plex Sans 32px 700 #358000
Stor negativ tekst IBM Plex Sans 32px 700 #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 manchettekst i koden til designsystemet.

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 manchettekst (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.

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.