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
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.
Designværdier
Skriftstørrelse | Linjehøjde | Teksttykkelse | |
---|---|---|---|
Manchet | 20px | 32px | Regular (400) |
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
Designværdier
Skriftstørrelse | Linjehøjde | Teksttykkelse | |
---|---|---|---|
Brødtekst | 16px | 24px | Regular (400) |
Lille brødtekst | 14px | 20px | Regular (400) |
Fed brødtekst | 16px | 24px | Bold (700) |
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
Skriftstørrelse | Linjehøjde | Teksttykkelse | Tekstfarve | |
---|---|---|---|---|
Hjælpetekst | 16px | 24px | Regular (400) | #747474 |
Retningslinjer
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
Fejlmeddelelser
Skriftstørrelse | Linjehøjde | Teksttykkelse | Tekstfarve | |
---|---|---|---|---|
16px | 24px | Semi-bold (600) | #CC0000 |
Retningslinjer
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.
- Se retningslinjer for fejlmeddelelser
- Ti gode råd vedrørende fejlmeddelelser i formularer
Billedtekst
Forklarende eller beskrivende tekst tilhørende et billede.
Designværdier
Skriftstørrelse | Linjehøjde | Teksttykkelse | Letter-spacing | |
---|---|---|---|---|
Billedtekst | 14px | 24px | Regular (400) | 0.4px |
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.
Designværdier
Skriftstørrelse | Linjehøjde | Teksttykkelse | Tekstfarve | |
---|---|---|---|---|
Stor tekst nr. 1 | 24px | 36px | Medium (500) | #1A1A1A |
Stor tekst nr. 2 | 21px | 32px | Medium (500) | #1A1A1A |
Stor positiv tekst | 24px | 36px | Medium (500) | #358000 |
Stor negativ tekst | 24px | 36px | Medium (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.
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.
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
Dette er en manchet
Læs retningslinjerne for manchet
HTML Struktur
<p class="font-lead">Dette er en manchet</p>
Brødtekst
Brødtekst
Dette er lille brødtekst
Dette er fed brødtekst
Læs retningslinjerne for brødtekst
HTML Struktur
<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
Hjælpetekst, der forklarer, hvad du skal gøre
Læs retningslinjer for hjælpetekst
Fejlmeddelelser
Læs retningslinjer for fejlmeddelelser
HTML Struktur
<p class="form-hint">Hjælpetekst, der forklarer, hvad du skal gøre</p>
Billedtekst
Læs retningslinjer for billedtekst
HTML Struktur
<div class="figcaption">Dette er en billedtekst</div>
Stor tekst
Stor tekst nr. 1
Stor tekst nr. 2
Stor positiv tekst
Stor negativ tekst
Læs retningslinjerne for stor tekst
HTML Struktur
<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>