Typography

npm install @entur/typography

@import '@entur/typography/dist/styles.css';

Kom i gang

Retningslinjer for bruk av typografi står beskrevet under Visuell identitet.

Det er definert en typografisk skala, hvor vi bruker ulike fontstørrelser for å skape typografisk hierarki i teksten. Dette er den typografiske skalaen for løpende brødtekst og titler, navngitt etter “heading” nummerering i synkende skala der øverste nivå er H1, deretter H2, H3 osv.

Tabellen viser hvilke størrelser og linjeavstander vi skal bruke når vi designer for web. Ved å kombinere ulike fontstørrelser på en god måte kan vi skape et tydelig hierarki og en struktur som gjør det enklere for leseren å forstå og navigere seg gjennom tekstene våre.

Tekstavstand:

Tekstavstanden skal kunne overstyres for å gjøre teksten lettere å lese. Suksesskriterium for tekstavstand er følgende:

• Linjehøyde (linjeavstand) angis til minst 1,5 ganger skriftstørrelsen.
• Avstand etter avsnitt angis til minst 2 ganger skriftstørrelsen.
• Avstanden mellom bokstaver i blokker av tekst (sperring) angis til minst 0,12 ganger skriftstørrelsen.
• Avstanden mellom ord angis til minst 0,16 ganger skriftstørrelsen.

Varianter

Overskrifter

Vi har egne komponenter for hver overskriftstype - en for hvert av de 6 nivåene vi støtter.

Ingress

Ingressen er et kort avsnitt som normalt kommer etter tittelen på en side.

Vanlig tekst

Vi har tre nivåer med tekst - "paragraph", "sub paragraph" og "small text".

Label-tekst

Vi har to nivåer med "label"-tekst - "label" og "sub label".

Lister

Du har to forskjellige listetyper - usortert og nummerert.

Blockquote

Link

CSS properties

Vi eksponerer noen CSS-properties fra denne pakken, som kan brukes på tvers av andre komponenter. Disse er:

--primary-background-color;
--primary-text-color;
--primary-label-color;

De vil bli dokumentert bedre etterhvert, men vil være de aktuelle hovedfargene for gitt tema og modus.

Props

Heading1-6

import { Heading1, Heading2, Heading3, Heading4, Heading5, Heading6 } from '@entur/typography';

Denne komponenten har ingen props

LeadParagraph

import { LeadParagraph } from '@entur/typography';

Denne komponenten har ingen props

Paragraph

import { Paragraph } from '@entur/typography';

Denne komponenten har ingen props

SubParagraph

import { SubParagraph } from '@entur/typography';

Denne komponenten har ingen props

SmallText

import { SmallText } from '@entur/typography';

Denne komponenten har ingen props

Label

import { Label } from '@entur/typography';

Denne komponenten har ingen props

SubLabel

import { SubLabel } from '@entur/typography';

Denne komponenten har ingen props

StrongText

import { StrongText } from '@entur/typography';

Denne komponenten har ingen props

EmphasizedText

import { EmphasizedText } from '@entur/typography';

Denne komponenten har ingen props

Link

import { Link } from '@entur/typography';

Denne komponenten har ingen props

PreformattedText

import { PreformattedText } from '@entur/typography';

Denne komponenten har ingen props

CodeText

import { CodeText } from '@entur/typography';

Denne komponenten har ingen props

UnorderedList

import { UnorderedList } from '@entur/typography';

Denne komponenten har ingen props

NumberedList

import { NumberedList } from '@entur/typography';

Denne komponenten har ingen props

ListItem

import { ListItem } from '@entur/typography';

Denne komponenten har ingen props