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.


Design

Overskrifter

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

Overskriftstyperne 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.
Oversigt over overskriftshierarki

Overskrift 1

Overskrift 2

Overskrift 3

Overskrift 4

Overskrift 5
Overskrift 6

Designværdier

Tekst Skrifttype Skriftstørrelse Tekst tykkelse Tekstfarve
Overskrift 1 IBM Plex Sans 39px 700 #1a1a1a
Overskrift 2 IBM Plex Sans 31px 600 #1a1a1a
Overskrift 3 IBM Plex Sans 25px 600 #1a1a1a
Overskrift 4 IBM Plex Sans 20px 600 #1a1a1a
Overskrift 5 IBM Plex Sans 16px 600 #1a1a1a
Overskrift 6 IBM Plex Sans 13px 500 #1a1a1a

Retningslinjer

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.

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 beskeder til information, fremhæv særlige punkter med punktopstilling eller anvend stor tekst til at markere udvalgte dele af teksten.

Hvis du vil vide mere

Anvendes til

Overblikslinks kan anvendes på overblikssider, hvor brugeren kan navigere til forskellige indberetninger i samme selvbetjeningsløsning. Overblikslinks kan også anvendes til at navigere til forskellige sektioner i en løsning.

Anvendes ikke til

Må ikke bruges til at fremhæve links eller som erstatning for standard links i selvbetjeningsløsninger.

Vejledning

Et godt eksempel på brugen af overblikslinks er fx forsiden af gov.uk, hvor de anvendes sammen med tekst til at give brugeren en generel ide om omfanget af indholdet i løsningen.

Overskrift i søgeresultat

Anvendes til

Søgeresultatlinks bruges til at skabe en overskuelig struktur i søgeresultater.

Anvendes ikke til

Må ikke anvendes til at fremhæve links i tekst eller som erstatning for standard links.

Vejledning

Et godt eksempel på brugen af søgeresultatlinks er googles søgeresultatside.

Løsningstitel i header

Anvendes til

Anvendes i header som titel på hele løsningen. Titlen bør derved være den samme på hver side.

Anvendes ikke til

Anvendes ikke andre steder end i headeren.

Subheading

Eksempel
Dette er en subheading

Anvendes til

Anvendes til at tilføje sekundær tekst til en overskrift.

Anvendes ikke til

Må ikke anvendes som en enkeltstående overskrift.