Text styles
Vi arbejder med et fast sæt af konkrete text styles, som skaber struktur og sammenhæng i vores typografi. Det gør det lettere at opbygge indhold med et konsekvent udtryk, der er let at navigere i.
Kategorier
Vores text styles er organiseret i kategorier efter deres rolle i vores layouts. Her skelner vi mellem type styles og decoration styles.
Type styles
Type styles er de overordnede text styles, vi bruger til alt tekstindhold. De definerer tekstens grundlæggende udtryk og er opdelt i fire kategorier baseret på deres brug.
Display styles er til største tekst på skærmen, forbeholdt korte og vigtige budskaber eller tal.
Heading styles bruges til korte overskrifter i fx sektioner, annoncer, meddelelser og navigation.
Label styles bruges til korte tekststykker i fx navigation, buttons, filtre, tags, badges, inputfelter og eyebrows.
Paragraph styles bruges til længere tekstblokke som fx brødtekst og indledende manchetter under overskrifter.
Decoration styles
Decoration styles er et ekstra formateringslag, vi kan bruge oven på udvalgte type styles for fx at indikere funktionelle, interaktive eller vigtige elementer.
Link tilføjes oven på paragraph styles på inline links uden for navigation og buttons – fx i brødtekst – for tydeligt at markere for brugeren, at de er klikbare.
Emphasis tilføjes oven på label styles i badges og buttons samt i aktive menu- og listepunkter. Den bruges også på paragraph styles til manchetter og nøgleord i brødtekst.
Oversigt
Herunder findes en oversigt over vores text styles og deres konkrete værdier.
Display
Display styles er den største tekst på skærmen, forbeholdt korte og vigtige budskaber.
Heading
Heading bruges til overskrifter i sektioner, navigation og andre elementer, hvor indhold skal introduceres eller opdeles.
Label
Label bruges til korte tekststykker, der skaber struktur og gør brugergrænsefladen let at aflæse – fx ved navigation, inputfelter, filtre, badges, tags og eyebrows.
Paragraph
Paragraph bruges til længere tekstblokke som fx brødtekst.