Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Tekst
- Manchet tekst
- Brødtekst
- Hjælpetekst og fejlmeddelelser
- Billedtekst
- Stor tekst
- Linjelængde
- Linjeafstand
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.
Designværdier
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
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.
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 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
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 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.