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.
- Du kan lese mer om typografien i Oslo kommunes designmanual
- Du kan laste ned og lese mer om Oslo kommunes font her
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
Stilnavn | Vekt | StĂžrrelse | LinjehĂžyde | Kniping |
---|---|---|---|---|
Text 54 - regular | regular | 54px | 82px | -0.4px |
Text 40 - regular | regular | 40px | 60px | -0.2px |
Text 36 - regular | regular | 36px | 54px | -0.2px |
Text 30 - regular | regular | 30px | 44px | -0.2px |
Text 28 - regular | regular | 28px | 42px | -0.2px |
Text 26 - regular | regular | 26px | 40px | -0.2px |
Text 24 - regular | regular | 24px | 36px | -0.2px |
Text 22 - regular | regular | 22px | 34px | -0.2px |
Text 20 - regular | regular | 20px | 32px | -0.2px |
Text 18 - regular | regular | 18px | 28px | -0.2px |
Text 16 - regular | regular | 16px | 24px | -0.2px |
Text 14 - regular | regular | 14px | 22px | -0.2px |
Text 12 - regular | regular | 12px | 20px | -0.2px |
Light
Stilnavn | Vekt | StĂžrrelse | LinjehĂžyde | Kniping |
---|---|---|---|---|
Text 54 - light | light | 54px | 82px | -0.4px |
Text 40 - light | light | 40px | 60px | -0.2px |
Text 36 - light | light | 36px | 54px | -0.2px |
Text 30 - light | light | 30px | 44px | -0.2px |
Text 28 - light | light | 28px | 42px | -0.2px |
Text 26 - light | light | 26px | 40px | -0.2px |
Text 24 - light | light | 24px | 36px | -0.2px |
Text 22 - light | light | 22px | 34px | -0.2px |
Text 20 - light | light | 20px | 32px | -0.2px |
Text 18 - light | light | 18px | 28px | -0.2px |
Text 16 - light | light | 16px | 24px | -0.2px |
Text 14 - light | light | 14px | 22px | -0.2px |
Text 12 - light | light | 12px | 20px | -0.2px |
Medium
Stilnavn | Vekt | StĂžrrelse | LinjehĂžyde | Kniping |
---|---|---|---|---|
Text 54 - medium | medium | 54px | 82px | -0.4px |
Text 40 - medium | medium | 40px | 60px | -0.2px |
Text 36 - medium | medium | 36px | 54px | -0.2px |
Text 30 - medium | medium | 30px | 44px | -0.2px |
Text 28 - medium | medium | 28px | 42px | -0.2px |
Text 26 - medium | medium | 26px | 40px | -0.2px |
Text 24 - medium | medium | 24px | 36px | -0.2px |
Text 22 - medium | medium | 22px | 34px | -0.2px |
Text 20 - medium | medium | 20px | 32px | -0.2px |
Text 18 - medium | medium | 18px | 28px | -0.2px |
Text 16 - medium | medium | 16px | 24px | -0.2px |
Text 14 - medium | medium | 14px | 22px | -0.2px |
Text 12 - medium | medium | 12px | 20px | -0.2px |
Bold
Stilnavn | Vekt | StĂžrrelse | LinjehĂžyde | Kniping |
---|---|---|---|---|
Text 54 - bold | bold | 54px | 82px | -0.4px |
Text 40 - bold | bold | 40px | 60px | -0.2px |
Text 36 - bold | bold | 36px | 54px | -0.2px |
Text 30 - bold | bold | 30px | 44px | -0.2px |
Text 28 - bold | bold | 28px | 42px | -0.2px |
Text 26 - bold | bold | 26px | 40px | -0.2px |
Text 24 - bold | bold | 24px | 36px | -0.2px |
Text 22 - bold | bold | 22px | 34px | -0.2px |
Text 20 - bold | bold | 20px | 32px | -0.2px |
Text 18 - bold | bold | 18px | 28px | -0.2px |
Text 16 - bold | bold | 16px | 24px | -0.2px |
Text 14 - bold | bold | 14px | 22px | -0.2px |
Text 12 - bold | bold | 12px | 20px | -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
Type | Stilnavn |
---|---|
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
Type | Stilnavn |
---|---|
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 |