Typografi

Typografi-pakken vår består av flere tekstkomponenter med forhåndsbestemt størrelse og styling.

Nytt typografi-oppsett (beta)

Vi har nå en ny og forbedret typografi-løsning for både react og css i beta. Vi anbefaler alle å ta en titt på dette og ta den i bruk hvis ønskelig.

For nå kan man finne dokumentasjon om hvordan man tar denne i bruk her:

Typografi storybook

Bruk av Typografi i prosjekter

For å sikre at prosjektet ditt får riktig typografi bruker typografi-komponenten vår denne CSS-klassen fra nav-frontend-typografi-style.

.app {
  .typo-normal-mixin();
  color: @navMorkGra;
  font-family: @font-family;
  line-height: @line-height-base;
}

Kopiert!

Det antas da at prosjektet er pakket inn under CSS-klassen .app å disse blir da lagt til der. Hvis dette ikke er tilfellet i prosjektet ditt, kan det være greit å legge til manuelt da man sikrer at hele prosjektet får riktig typografi. Dette kan gjøres ved å legge til

@import (reference) "~nav-frontend-typografi-style/src/index.less";

Kopiert!

i ønsket less fil og da legge til klassen app på elementet som pakker in prosjektet ditt.

Alle vekter

Sidetittel

Font size: 40px

Line height: 44px

Font weight: 600 semi bold

<Sidetittel>Sidetittel</Sidetittel>
<h1 className="typo-sidetittel">Sidetittel</h1>

Kopiert!

Innholdstittel

Font size: 32px

Line height: 36px

Font weight: 600 semi bold

<Innholdstittel>Innholdstittel</Innholdstittel>
<h1 className="typo-innholdstittel">Innholdstittel</h1>

Kopiert!

Systemtittel

Font size: 24px

Line height: 28px

Font weight: 600 semi bold

<Systemtittel>Systemtittel</Systemtittel>
<h2 className="typo-systemtittel">Systemtittel</h2>

Kopiert!

Undertittel

Font size: 20px

Line height: 25px

Font weight: 600 semi bold

<Undertittel>Undertittel</Undertittel>
<h2 className="typo-undertittel">Undertittel</h2>

Kopiert!

Ingress

Font size: 18px

Line height: 26px

Font weight: 400 regular

<Ingress>Ingress</Ingress>
<p className="typo-ingress">Ingress</p>

Kopiert!

Element

Font size: 16px

Line height: 22px

Font weight: 600 semi bold

<Element>Element</Element>
<p className="typo-element">Element</p>

Kopiert!

Feilmelding

Font size: 16px

Line height: 22px

Font weight: 600 semi bold

<Feilmelding>Feilmelding</Feilmelding>
<p className="typo-feilmelding">Feilmelding</p>

Kopiert!

Normaltekst

Font size: 16px

Line height: 22px

Font weight: 400 regular

<Normaltekst>Normaltekst</Normaltekst>
<p className="typo-normal">Normaltekst</p>

Kopiert!

Undertekst

Font size: 14px

Line height: 20px

Font weight: 400 regular

<Undertekst>Undertekst</Undertekst>
<p className="typo-undertekst">Undertekst</p>

Kopiert!

UndertekstBold

Font size: 14px

Line height: 20px

Font weight: 600 semi bold

<UndertekstBold>UndertekstBold</UndertekstBold>
<p className="typo-undertekst-bold">UndertekstBold</p>

Kopiert!

Selvbestemt HTML-tag

Du kan selv bestemme hvilken HTML-tag de forskjellige typografi-vektene skal bruke. For eksempel kan du overstyre h1-defaulten for Sidetittel med h4 slik:

Sidetittel

<Sidetittel tag="h4">Sidetittel</Sidetittel>

Kopiert!