Typografi
Typografitokens beskriver all typografi i Jøkul — fra fontstørrelser og linjehøyder til semantiske tekststiler som heading-1 eller body.
Prinsipper
- Gir klare teksthierarkier
- Typografien er skalerbar på tvers av flater
- Gjør baseline og linjehøyde konsistent
Stiler
Vi har mange ferdige tekststiler som har en funksjon i UI-et. Disse skal alltid brukes. Tekststørrelsen endres etter størrelsesmodus.
Navn | Størrelse (medium/large) | Størrelse (small) | Vekt | Linjehøyde |
|---|---|---|---|---|
Title | 56px | 48px | 400 | 1.3 |
Title Small | 48px | 40px | 400 | 1.3 |
Heading 1 | 40px | 32px | 400 | 1.3 |
Heading 2 | 32px | 28px | 400 | 1.3 |
Heading 3 | 28px | 24px | 600 | 1.3 |
Heading 4 | 24px | 20px | 600 | 1.3 |
Heading 5 | 20px | 18px | 600 | 1.3 |
Paragraph Large | 24px | 20px | 400 | 1.6 |
Paragraph Medium | 18px | 16px | 400 | 1.6 |
Paragraph Small | 16px | 14px | 400 | 1.6 |
Text Large | 24px | 20px | 400 | 1.3 |
Text Medium | 18px | 16px | 400 | 1.3 |
Text Small | 16px | 14px | 400 | 1.3 |
Text Micro | 14px | 12px | 400 | 1.3 |
Bruksområder
Nytt stilnavn | Brukes til | Tilsvarende stil i gammelt system |
|---|---|---|
title | Tittel på siden | title |
title-small | Tittel på siden | title-small |
heading-1 | Tittel på siden | heading-1 |
heading-2 | Overskrift på innhold | heading-2 |
heading-3 | Overskrift på innhold | heading-3 |
heading-4 | Overskrift på innhold | heading-4 |
heading-5 | Overskrift på innhold | heading-5 |
paragraph-large | Avsnitt og løpende tekst | |
paragraph-medium | Avsnitt og løpende tekst | body |
paragraph-small | Avsnitt og løpende tekst | body-small |
text-large | Korte tekster som går over en til to linjer, typisk en label eller en liste. Lik paragraph, med mindre linjehøyde | |
text-medium | Korte tekster som går over en til to linjer, typisk en label eller en liste. Lik paragraph, med mindre linjehøyde | |
text-small | Korte tekster som går over en til to linjer, typisk en label eller en liste. Lik paragraph, med mindre linjehøyde | |
text-micro | Metadata |
Byggeklosser for semantisk tokens
Stilene våre bygger på et sett tokens du kan bruke dersom du har behov for det.
Husk at du ikke skal overskrive eksisterende tekststiler.
Fontfamilie
Navn på token | Verdi | Brukes på |
|---|---|---|
--jkl-typography-font-family-regular | Fremtind Grotesk, Adjusted Arial Fallback, Arial, sans-serif | Løpende tekst |
--jkl-typography-font-family-display | Fremtind Grotesk Display, Adjusted Arial Display Fallback, Arial, sans-serif | Kun Title og Title Small |
--jkl-typography-font-family-mono | Fremtind Grotesk Mono, Adjusted Courier New Fallback, -apple-system, BlinkMacSystemFont, monospace | Kode og snarveier |
Fontstørrelse
Navn på token | Medium/Large | Small |
|---|---|---|
--jkl-font-size-1 | 56px | 48px |
--jkl-font-size-2 | 48px | 40px |
--jkl-font-size-3 | 40px | 32px |
--jkl-font-size-4 | 32px | 28px |
--jkl-font-size-5 | 28px | 24px |
--jkl-font-size-6 | 24px | 20px |
--jkl-font-size-7 | 20px | 18px |
--jkl-font-size-8 | 18px | 16px |
--jkl-font-size-9 | 16px | 14px |
--jkl-font-size-10 | 14px | 12px |
Fontvekt
Navn på token | Verdi |
|---|---|
--jkl-typography-weight-bold | 600 |
--jkl-typography-weight-normal | 400 |
Linjehøyde
Navn på token | Verdi | Brukes på |
|---|---|---|
--jkl-line-height-relaxed | 1.6 | Løpende tekst |
--jkl-line-height-tight | 1.3 | Overskrifter og korte tekster |
--jkl-line-height-flush | 1 | Tekst som aldri overskrider 1 linje |