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

Overskrifter

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

Oversigt over overskriftshierarki

Overskrift 1

Overskrift 2

Overskrift 3

Overskrift 4

Overskrift 5
Overskrift 6

Sådan bruges overskrifter

Overskriftstyperne har to formål:

  • De skaber et visuelt hierarki på siden.
  • De fungerer som sidens indholdsfortegnelse for skærmlæsere.

En god struktur i sidens overskrifter er altafgørende for, at brugere af skærmlæser kan forstå og navigere i indholdet på siden. 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, brug lister til at fremhæve særlige punkter med punktopstilling eller anvend stor tekst til at markere udvalgte dele af teksten.

Hvis du vil vide mere

Designværdier

Designværdierne nedenfor er angivet i px for læsbarhedens skyld. Vær opmærksom på, at det anbefales i ens stylesheet at bruge relative værdier til skriftstørrelse og en “unitless” talværdi for linjehøjden. I designsystemets stylesheet er overskrifternes skriftstørrelse defineret med “rem”.

Tekst Skrifttype Skriftstørrelse Linjehøjde Teksttykkelse Tekstfarve
Overskrift 1 IBM Plex Sans 48px 56px Bold (700) #1a1a1a
Overskrift 2 IBM Plex Sans 32px 40px Semi-bold (600) #1a1a1a
Overskrift 3 IBM Plex Sans 24px 32px Semi-bold (600) #1a1a1a
Overskrift 4 IBM Plex Sans 20px 28px Semi-bold (600) #1a1a1a
Overskrift 5 IBM Plex Sans 16px 24px Semi-bold (600) #1a1a1a
Overskrift 6 IBM Plex Sans 14px 20px Medium (500) #1a1a1a

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.

HTML Struktur

Kodeeksempel
<h1>Overskrift 1</h1>
<h2>Overskrift 2</h2>
<h3>Overskrift 3</h3>
<h4>Overskrift 4</h4>
<h5>Overskrift 5</h5>
<h6>Overskrift 6</h6>

Hold en stram overskriftsstruktur i koden. En <h3> altid er under en <h2>, en <h4> under en <h3> osv. <h1> er altid øverst i hierarkiet.

Lad være med at springe overskriftsled over. Hvis du visuelt vil have et andet udtryk, så brug en klasse til at style overskriften.

Eksempel på en overskrift, der ligner et andet niveau

Kodeeksempel
<h2 class="h3">Dette er en h2 overskrift, som ligner en h3</h2>

Subheading

Eksempel på subheading
Dette er en subheading

Læs retningslinjer for subheadings.

HTML Struktur

Kodeeksempel
<div class="subheading">Dette er en subheading</div>