Typography

Bruk Typography når

• du skriver tekst i et grensesnitt: titler, avsnitt, ledetekster, bildetekster og lister.
• du setter opp løpende tekst, som artikler, hjelpesider, vilkår eller innhold fra et CMS. Legg den i TextContainer, så får overskrifter, avsnitt og lister riktig avstand.
• du trenger en lenke i en setning eller en liste, bruk Link.

Unngå Typography når

• teksten hører til en annen komponent, som en knapp, et skjemafelt eller en tag. Komponenten setter teksten selv, så ikke pakk den inn i Text for å endre utseendet.
• en handling skal se ut som en knapp, bruk heller Button.
• du lager et skjemafelt som finnes fra før, bruk heller feltet fra @entur/form, som har ledeteksten innebygd. Label er for felt du lager selv.

Retningslinjer

Velg variant etter rollen teksten har

Varianten sier hva teksten er – en tittel, en ingress, en bildetekst – ikke bare hvor stor den er. Bruk samme variant for samme type innhold i hele løsningen, så blir hierarkiet gjenkjennelig. size er for de få stedene der en variant ikke passer.

Bygg et tydelig hierarki

Elementer som hører sammen bør stå nær hverandre, og ulike seksjoner bør ha tydelig luft mellom seg. TextContainer i koden og avstandsbryterne i Figma gir denne rytmen. Trenger du tydeligere skille mellom seksjoner på lange sider, ta kontakt med designsystemteamet i stedet for å overstyre avstandene lokalt.

Unngå like avstander mellom alle elementer. Det bryter hierarkiet og gjør det vanskelig å se hva som hører sammen.

Bruk rytmen fra designsystemet for å skape logiske grupper. Innholdet blir lettere å skanne og lese.

Bruk overskriftsnivåene i rekkefølge

Sidetittelen er h1, og nivåene under følger hverandre uten hopp: h2, så h3. Skjermleserbrukere navigerer etter overskriftsnivåene, så nivået bør følge strukturen, ikke utseendet. Trenger en h3 å se annerledes ut, endre variant, ikke nivået.

Hold linjene lesbare

Lange linjer gjør det vanskelig å finne starten på neste linje, og svært korte linjer gir mange linjeskift.

TextContainer holder avsnitt, lister og sitater på rundt 70 tegn per linje. Bilder, tabeller og komponenter får hele bredden.

Norske ord er ofte lengre enn engelske. 80–85 tegn per linje fungerer godt for løpende tekst på store skjermer.

På mobil fungerer 35–50 tegn per linje godt. Under 20 tegn gir for mange linjeskift.

Si hvor lenken går

Lenketeksten bør gi mening alene, for eksempel «Se billettpriser» i stedet for «Les mer». Lenker åpnes i samme fane. Må en lenke åpne en ny fane, skriv «(åpnes i ny fane)» i lenketeksten.

Demp bare sekundær tekst

Dempet tekst er for informasjon som støtter innholdet rundt, som datoer, metadata, hjelpetekst og beskrivelser. Ikke demp noe brukeren trenger for å handle, som feil, priser, frister og instruksjoner, og ikke bruk dempet tekst for å vise at noe er deaktivert. Bruk den sammen med størrelse og plassering, ikke som eneste tegn på hva som er viktigst.

Kutt tekst bare når den finnes et annet sted

Lange navn og titler kan kuttes etter et antall linjer og slutte med «…». Hele teksten må da kunne leses et annet sted, for eksempel på siden kortet lenker til. Ikke kutt tekst brukeren trenger for å forstå eller velge, som feilmeldinger og instruksjoner.

Bruk samme visningsmodus i hele løsningen

Typografien blir mindre i compact og større i display. Velg én modus for hele grensesnittet, og begrunn eventuelle unntak. Se visningsmodus for når du bruker hvilken.

Eksempler

import { Heading, TextContainer } from '@entur/typography/beta';

<TextContainer>
  <Heading as="h1" variant="title-1">Title-1</Heading>
  <Heading as="h2" variant="title-2">Title-2</Heading>
  <Heading as="h3" variant="subtitle-1">Subtitle-1</Heading>
  <Heading as="h4" variant="subtitle-2">Subtitle-2</Heading>
  <Heading as="h5" variant="section-1">Section-1</Heading>
  <Heading as="h6" variant="section-2">Section-2</Heading>
</TextContainer>

import { Text, TextContainer } from '@entur/typography/beta';

<TextContainer>
  <Text variant="leading">Leading – en kort ingress rett under sidetittelen.</Text>
  <Text variant="paragraph">Paragraph – vanlig brødtekst, for det meste av teksten.</Text>
  <Text variant="subparagraph">Subparagraph – mindre brødtekst, for tilleggsinformasjon.</Text>
  <Text variant="caption">Caption – bildetekster og små merknader.</Text>
</TextContainer>

import { Text, TextContainer } from '@entur/typography/beta';

<TextContainer>
  <Text variant="overline">Overline</Text>
  <Text variant="label">Label</Text>
  <Text variant="sublabel">Sublabel</Text>
</TextContainer>

import { Heading, Text, TextContainer } from '@entur/typography/beta';

<TextContainer>
  <Heading as="h3" variant="subtitle-1">Endringer i rutetabellen</Heading>
  <Text variant="caption" tone="subdued">Oppdatert 21. oktober</Text>
  <Text>Fra 1. desember går linje 31 hvert tiende minutt på hverdager.</Text>
</TextContainer>

import { Heading, Text, TextContainer } from '@entur/typography/beta';

<TextContainer style={{ maxWidth: '14rem' }}>
  <Heading as="h3" variant="section-1" maxLines={1}>
    Oslo bussterminal, plattform 12
  </Heading>
  <Text variant="subparagraph" maxLines={2}>
    Avgang hvert tiende minutt mellom Oslo bussterminal og Lillestrøm stasjon
  </Text>
</TextContainer>

import { Text, TextContainer } from '@entur/typography/beta';

<TextContainer>
  <figure>
    <Text variant="quote">Entur gjør det enklere å reise kollektivt.</Text>
    <Text as="figcaption" variant="caption">Kari Nordmann, Entur</Text>
  </figure>
</TextContainer>

import { Text, Link, TextContainer } from '@entur/typography/beta';

<TextContainer>
  <Text>
    Se <Link href="https://entur.no">avganger og billettpriser på entur.no</Link> før du reiser.
  </Text>
  <Text>
    Bruk <Text variant="code">variant</Text> for å velge tekststil.
  </Text>
</TextContainer>

import { NumberedList, UnorderedList, ListItem, TextContainer } from '@entur/typography/beta';

<TextContainer>
  <UnorderedList>
    <ListItem>Gyldig billett</ListItem>
    <ListItem>Rabattbevis</ListItem>
  </UnorderedList>
  <NumberedList>
    <ListItem>Oslo S</ListItem>
    <ListItem>Lillestrøm</ListItem>
    <ListItem>Gardermoen</ListItem>
  </NumberedList>
</TextContainer>

import { NumberedList, ListItem } from '@entur/typography/beta';

<NumberedList variant="steps">
  <ListItem>Velg reise</ListItem>
  <ListItem>Velg billett</ListItem>
  <ListItem>Betal</ListItem>
</NumberedList>

Bruk i Figma

I Figma finnes typografien som tre komponenter i biblioteket: Heading Beta for overskrifter, Body text Beta for brødtekst, ingress, sitat og bildetekst, og Label text Beta for label, sublabel og overline. Velg stil med Type, og slå på Contrast på mørk bakgrunn.

Typografikomponentene har ingen luft rundt seg. Avstanden slår du på med bryterne på komponenten, slik TextContainer gjør automatisk i koden:

• Paragraph spacing og Spacing gir luften etter teksten.
• Extra spacing på teksten før en overskrift gir den ekstra luften over overskriften.