Typografi (Typography)
Typografiverktøyene er rene CSS-klasser som gir konsekvent skriftstørrelse, vekt og linjehøyde på tvers av alle konsumeapplikasjoner. Klassene bruker designsystemets størrelsestokens, slik at de automatisk skalerer riktig på tvers av kompakt, komfortabel og romslig tetthet.
Overskrifter
Syv størrelser fra 2xsm til 2xl. Alle bruker Chivo 700 med line-height: 1.2 (1.155 for 2xl). Ingen bunn-margin som standard — legg til .adb-heading--margin for responsiv avstand.
2xl — font-size-12 (40–56px)
Norsk artskunnskap
xl — font-size-10 (32–40px)
Rødlista 2021
lg — font-size-8 (24–30px)
Pattedyr i Norge
md — font-size-7 (21–24px)
Truede arter
sm — font-size-6 (18–21px)
Kritisk truet (CR)
xsm — font-size-4 (14–16px)
Ulv (Canis lupus)
2xsm — font-size-4 (14–16px)
Ulv (Canis lupus)
<h1 class="adb-heading-2xl">Norsk artskunnskap</h1><h2 class="adb-heading-xl">Rødlista 2021</h2><h3 class="adb-heading-lg">Pattedyr i Norge</h3><h4 class="adb-heading-md">Truede arter</h4><h5 class="adb-heading-sm">Kritisk truet (CR)</h5><h6 class="adb-heading-xsm">Ulv (Canis lupus)</h6>Bunn-margin — .adb-heading--margin
Klassene har ingen margin som standard for å gi best mulig fleksibilitet i layout. Legg til .adb-heading--margin når du vil ha automatisk responsiv bunn-avstand:
| Størrelse | Bunn-margin token | Compact | Comfortable | Spacious |
|---|---|---|---|---|
2xsm–md | --adb-spacing-xsm | 8px | 8px | 8px |
lg–2xl | --adb-spacing-sm | 12px | 16px | 16px |
Med margin — overskriftene puster
Rødlista 2021
Pattedyr
Kritisk truet (CR)
Tekst som følger etter en overskrift med bunn-margin.
<h1 class="adb-heading-2xl adb-heading--margin">Norsk artskunnskap</h1><p>Artsdatabanken samler, forvalter og formidler kunnskap om naturmangfold.</p>
<h2 class="adb-heading-lg adb-heading--margin">Rødlista</h2><p>Rødlista viser hvilke arter som er truet.</p>Introduksjonstekst
Brukes til ingresser og innledende avsnitt. Chivo 500 (medium) med line-height: 1.5 for god leselighet. To størrelser: lg og md.
lg — font-size-7 (21–24px)
Artsdatabanken samler, forvalter og formidler kunnskap om naturmangfold i Norge. Vi er nasjonal leverandør av data om arter og naturtyper.
md — font-size-6 (18–21px)
Artsdatabanken samler, forvalter og formidler kunnskap om naturmangfold i Norge. Vi er nasjonal leverandør av data om arter og naturtyper.
<p class="adb-introduction-lg">Artsdatabanken samler, forvalter og formidler kunnskap om naturmangfold i Norge.</p><p class="adb-introduction-md">Vi er nasjonal leverandør av data om arter og naturtyper.</p>Med bunn-margin
Legg til .adb-introduction--margin for avstand etter ingressen. lg får spacing-sm, md får spacing-xsm.
Ingress med margin under
Rødlista 2021
Rødlista viser hvilke arter som er truet av utryddelse i Norge. Den oppdateres hvert femte år.
Her begynner brødteksten etter ingressen.
<h1 class="adb-heading-2xl adb-heading--margin">Rødlista 2021</h1><p class="adb-introduction-lg adb-introduction--margin"> Rødlista viser hvilke arter som er truet av utryddelse i Norge.</p><p>Her begynner brødteksten etter ingressen.</p>Avsnitt (Paragraph)
Brødtekst i løpende prosa. Chivo 400 (regular) med rommelig linjehøyde for god leselighet. Tre størrelser: lg, md og sm.
lg — font-size-6 (18–21px), line-height 1.72
Artsdatabanken samler, forvalter og formidler kunnskap om naturmangfold i Norge. Vi er nasjonal leverandør av data om arter og naturtyper, og vår kunnskap brukes av forvaltning, forskning og allmenheten.
md — font-size-5 (16–18px), line-height 1.72
Artsdatabanken samler, forvalter og formidler kunnskap om naturmangfold i Norge. Vi er nasjonal leverandør av data om arter og naturtyper, og vår kunnskap brukes av forvaltning, forskning og allmenheten.
sm — font-size-3 (13–14px), line-height 1.6
Artsdatabanken samler, forvalter og formidler kunnskap om naturmangfold i Norge. Vi er nasjonal leverandør av data om arter og naturtyper, og vår kunnskap brukes av forvaltning, forskning og allmenheten.
<p class="adb-paragraph-lg">Stor brødtekst for viktig innhold.</p><p class="adb-paragraph-md">Standard brødtekst — vanligste valg.</p><p class="adb-paragraph-sm">Liten brødtekst for støttetekst og hjelpetekst.</p>Med bunn-margin
lg og md får spacing-sm, sm får spacing-xsm.
Sammenhengende avsnitt med margin
Første avsnitt. Artsdatabanken samler og formidler kunnskap om naturmangfold i Norge.
Andre avsnitt. Rødlista oppdateres hvert femte år og viser hvilke arter som er truet.
<p class="adb-paragraph-md adb-paragraph--margin">Første avsnitt.</p><p class="adb-paragraph-md adb-paragraph--margin">Andre avsnitt.</p>Etikett (Label)
Brukes til skjemafelt-etiketter, metadata og støttetekst. To størrelser: md (tokenbasert størrelse) og sm (fast 12 px). Begge bruker Chivo.
md — font-size-3 (13–14px), Chivo 400, line-height 1.6
Artsnavn (latinsk)
sm — 12px fast, Chivo 400, line-height normal
Artsnavn (latinsk)
<label class="adb-label-md" for="artsnavn">Artsnavn (latinsk)</label><input id="artsnavn" type="text" />
<label class="adb-label-sm" for="kode">Artskode</label><input id="kode" type="text" />Med bunn-margin
Begge størrelser bruker spacing-sm som bunn-margin.
<label class="adb-label-md adb-label--margin">Felt</label><label class="adb-label-sm adb-label--margin">Felt</label>Byline og metainfo
Brukes til forfatternavn, datoer, taksonomi og annen sekundær metadata. Bruker Space Mono (sekundærfonten) for å skille seg visuelt fra brødtekst. To størrelser: md og sm.
md — font-size-3 (13–14px), Space Mono 400, line-height 1.6
sm — 12px fast, Space Mono 400, line-height normal
<p class="adb-byline-md">Publisert av Artsdatabanken · 12. januar 2024</p><p class="adb-byline-sm">Canis lupus · Pattedyr · Rovdyr</p>Med bunn-margin
Begge størrelser bruker spacing-sm som bunn-margin.
<p class="adb-byline-md adb-byline--margin">Publisert av Artsdatabanken · 12. januar 2024</p><p class="adb-byline-sm adb-byline--margin">Canis lupus · Pattedyr</p>Bildetekst (Caption)
Brukes under bilder og figurer. Chivo 400 med kompakt linjehøyde (1.635). Kun én størrelse: md.
md — font-size-1 (11–12px), Chivo 400, line-height 1.635
Ulv (Canis lupus) fotografert i Østmarka, januar 2023. Foto: Artsdatabanken / CC BY 4.0
<figure> <img src="ulv.jpg" alt="Ulv i snødekket skog" /> <figcaption class="adb-caption-md"> Ulv (<em>Canis lupus</em>) fotografert i Østmarka, januar 2023. Foto: Artsdatabanken / CC BY 4.0 </figcaption></figure>Med bunn-margin
<figcaption class="adb-caption-md adb-caption--margin"> Ulv (<em>Canis lupus</em>) fotografert i Østmarka.</figcaption>Installasjon
Klassene inkluderes automatisk når du importerer @artsdatabanken/tokens:
@import '@artsdatabanken/tokens';For individuell import:
@import '@artsdatabanken/tokens/typography';API — CSS-klasser
Overskrifter
| Klasse | Font-størrelse token | Fallback (komfortabel) | Linjehøyde |
|---|---|---|---|
.adb-heading-2xsm | --adb-font-size-4 | 16px | 1.2 |
.adb-heading-xsm | --adb-font-size-4 | 16px | 1.2 |
.adb-heading-sm | --adb-font-size-6 | 20px | 1.2 |
.adb-heading-md | --adb-font-size-7 | 22px | 1.2 |
.adb-heading-lg | --adb-font-size-8 | 26px | 1.2 |
.adb-heading-xl | --adb-font-size-10 | 36px | 1.2 |
.adb-heading-2xl | --adb-font-size-12 | 48px | 1.155 |
.adb-heading--margin | — | — | Modifier: legger til bunn-margin |
Alle overskriftsklasser bruker font-family: var(--adb-font-family-primary) og font-weight: 700.
Introduksjonstekst
| Klasse | Font-størrelse token | Fallback (komfortabel) | Linjehøyde |
|---|---|---|---|
.adb-introduction-lg | --adb-font-size-7 | 22px | 1.5 |
.adb-introduction-md | --adb-font-size-6 | 20px | 1.5 |
.adb-introduction--margin | — | — | Modifier: legger til bunn-margin |
Begge introduksjonsklasser bruker font-weight: 500 (medium).
Avsnitt (Paragraph)
| Klasse | Font-størrelse token | Fallback (komfortabel) | Linjehøyde |
|---|---|---|---|
.adb-paragraph-lg | --adb-font-size-6 | 20px | 1.72 |
.adb-paragraph-md | --adb-font-size-5 | 18px | 1.72 |
.adb-paragraph-sm | --adb-font-size-3 | 14px | 1.6 |
.adb-paragraph--margin | — | — | Modifier: legger til bunn-margin |
Alle avsnittklasser bruker font-weight: 400 (regular).
Etikett (Label)
| Klasse | Font-størrelse token | Fallback (komfortabel) | Linjehøyde |
|---|---|---|---|
.adb-label-md | --adb-font-size-3 | 14px | 1.6 |
.adb-label-sm | 12px (fast) | 12px | normal |
.adb-label--margin | — | — | Modifier: legger til bunn-margin (spacing-sm) |
Begge etikettklasser bruker Chivo og font-weight: 400 (regular).
Byline og metainfo
| Klasse | Font-størrelse token | Fallback (komfortabel) | Linjehøyde |
|---|---|---|---|
.adb-byline-md | --adb-font-size-3 | 14px | 1.6 |
.adb-byline-sm | 12px (fast) | 12px | normal |
.adb-byline--margin | — | — | Modifier: legger til bunn-margin (spacing-sm) |
Begge byline-klasser bruker Space Mono og font-weight: 400 (regular).
Bildetekst (Caption)
| Klasse | Font-størrelse token | Fallback (komfortabel) | Linjehøyde |
|---|---|---|---|
.adb-caption-md | --adb-font-size-1 | 12px | 1.635 |
.adb-caption--margin | — | — | Modifier: legger til bunn-margin (spacing-sm) |
Bruker Chivo og font-weight: 400 (regular).
Design-tokens brukt
| Token | Bruk |
|---|---|
--adb-font-family-primary | Chivo — overskrifter, introduksjon, avsnitt, etikett |
--adb-font-family-secondary | Space Mono — byline og metainfo |
--adb-font-weight-bold | 700 — overskrifter |
--adb-font-weight-medium | 500 — introduksjonstekst |
--adb-font-weight-regular | 400 — avsnitt, etikett, byline |
--adb-font-size-3 – --adb-font-size-12 | Responsive skriftstørrelser |
--adb-spacing-xsm | Bunn-margin for heading 2xsm–md, introduction-md og paragraph-sm |
--adb-spacing-sm | Bunn-margin for heading lg–2xl, introduction-lg, paragraph lg/md, label, byline og caption |
Universell utforming (WCAG 2.1 AA)
Klassene legger ikke til semantikk — velg riktig HTML-element (h1–h6) uavhengig av visuell størrelse.
| Kriterium | Nivå | Oppfylt | Merknad |
|---|---|---|---|
| 1.3.1 Informasjon og relasjoner | A | ✅ | Semantikk styres av HTML-element, ikke klasse |
| 1.4.4 Endring av tekststørrelse | AA | ✅ | rem-baserte størrelser respekterer nettleserinnstillinger |
| 1.4.12 Tekstmellomrom | AA | ✅ | Ingen line-height under 1.2 for overskrifter |