Typografi

I Origo har vi ulike behov, noen team jobber med lÞsninger knyttet opp mot oslo.kommune.no og trenger derfor de samme tekststilene som de bruker der. Andre jobber med mer frittstÄende lÞsninger og Þnsker Ä ha stÞrre kontroll pÄ f.eks responsivitet og hvilke stiler de bruker hvor. For Ä stÞtte begge deler har vi et sett med ulike tekst-stÞrrelser du kan ta i bruk etter ditt behov.

Ting Ä huske pÄ nÄr du jobber med typografien vÄr

  • Du bĂžr unngĂ„ Ă„ bruke bare store bokstaver i tekst. Det gir dĂ„rligere lesbarhet. Det samme gjelder kursiv som ikke bĂžr brukes i overskrifter eller store tekstmengder
  • Ulike vekter kan brukes for Ă„ skape kontrast i teksten
  • Alle basekomponentene i Punkt kommer med Oslo sans 18px
  • Det skal ikke brukes stĂžrre tekst enn 54px

Regular

StilnavnVektStĂžrrelseLinjehĂžydeKniping

Text 54 - regular

regular54px82px-0.4px

Text 40 - regular

regular40px60px-0.2px

Text 36 - regular

regular36px54px-0.2px

Text 30 - regular

regular30px44px-0.2px

Text 28 - regular

regular28px42px-0.2px

Text 26 - regular

regular26px40px-0.2px

Text 24 - regular

regular24px36px-0.2px

Text 22 - regular

regular22px34px-0.2px

Text 20 - regular

regular20px32px-0.2px

Text 18 - regular

regular18px28px-0.2px

Text 16 - regular

regular16px24px-0.2px

Text 14 - regular

regular14px22px-0.2px

Text 12 - regular

regular12px20px-0.2px

Light

StilnavnVektStĂžrrelseLinjehĂžydeKniping

Text 54 - light

light54px82px-0.4px

Text 40 - light

light40px60px-0.2px

Text 36 - light

light36px54px-0.2px

Text 30 - light

light30px44px-0.2px

Text 28 - light

light28px42px-0.2px

Text 26 - light

light26px40px-0.2px

Text 24 - light

light24px36px-0.2px

Text 22 - light

light22px34px-0.2px

Text 20 - light

light20px32px-0.2px

Text 18 - light

light18px28px-0.2px

Text 16 - light

light16px24px-0.2px

Text 14 - light

light14px22px-0.2px

Text 12 - light

light12px20px-0.2px

Medium

StilnavnVektStĂžrrelseLinjehĂžydeKniping

Text 54 - medium

medium54px82px-0.4px

Text 40 - medium

medium40px60px-0.2px

Text 36 - medium

medium36px54px-0.2px

Text 30 - medium

medium30px44px-0.2px

Text 28 - medium

medium28px42px-0.2px

Text 26 - medium

medium26px40px-0.2px

Text 24 - medium

medium24px36px-0.2px

Text 22 - medium

medium22px34px-0.2px

Text 20 - medium

medium20px32px-0.2px

Text 18 - medium

medium18px28px-0.2px

Text 16 - medium

medium16px24px-0.2px

Text 14 - medium

medium14px22px-0.2px

Text 12 - medium

medium12px20px-0.2px

Bold

StilnavnVektStĂžrrelseLinjehĂžydeKniping

Text 54 - bold

bold54px82px-0.4px

Text 40 - bold

bold40px60px-0.2px

Text 36 - bold

bold36px54px-0.2px

Text 30 - bold

bold30px44px-0.2px

Text 28 - bold

bold28px42px-0.2px

Text 26 - bold

bold26px40px-0.2px

Text 24 - bold

bold24px36px-0.2px

Text 22 - bold

bold22px34px-0.2px

Text 20 - bold

bold20px32px-0.2px

Text 18 - bold

bold18px28px-0.2px

Text 16 - bold

bold16px24px-0.2px

Text 14 - bold

bold14px22px-0.2px

Text 12 - bold

bold12px20px-0.2px

Eksempel pÄ bruk

Her vil du se noen anbefalinger pÄ bruk av heading, ingress og body bÄde pÄ mobil og desktop:

Desktop


TypeStilnavn
Heading 1

Text 54 - regular

Heading 2

Text 36 - regular

Heading 3

Text 30 - regular

Heading 4

Text 24 - medium

Heading 5

Text 22 - medium

Ingress

Text 24 - light

Body

Text 16 - light

Mobil


TypeStilnavn
Heading 1

Text 36 - regular

Heading 2

Text 26 - regular

Heading 3

Text 22 - regular

Heading 4

Text 18 - medium

Ingress

Text 20 - light

Body

Text 16 - light