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.

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”.

Skriftstørrelse Linjehøjde Teksttykkelse
Overskrift 1
  • 48px (desktop)
  • 40px (tablet)
  • 32px (mobil)
  • 56px (desktop)
  • 48px (tablet)
  • 40px (mobil)
Bold (700)
Overskrift 2
  • 32px (desktop)
  • 28px (tablet)
  • 24px (mobil)
  • 40px (desktop)
  • 36px (tablet)
  • 32px (mobil)
Semi-bold (600)
Overskrift 3
  • 24px (desktop)
  • 24px (tablet)
  • 22px (mobil)
  • 32px (desktop)
  • 32px (tablet)
  • 28px (mobil)
Semi-bold (600)
Overskrift 4
  • 20px (desktop)
  • 20px (tablet)
  • 18px (mobil)
  • 28px (desktop)
  • 28px (tablet)
  • 24px (mobil)
Semi-bold (600)
Overskrift 5 16px 24px Semi-bold (600)
Overskrift 6 14px 20px Medium (500)
Tekstdekoration Tekstfarve
Overskrift, som er et link Understreget
  • #004D99
  • #000040 (hover)
  • #800080 (besøgt)

Anvendes til

Overskrift som links kan anvendes på sider, hvor brugeren kan navigere til andre sider i samme selvbetjeningsløsning. Overskrift som links anvendes også til overskrifter på søgeresultatsider.

Anvendes ikke til

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

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

Skriftstørrelse Linjehøjde Teksttykkelse Farve Letter-spacing
Subheading 14px 16px Regular (400) #747474 1px

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>