Typografi

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

Light

Medium

Bold

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

CSS-klasser

Ta i bruk våre tekst-stiler ved bruk av klasser.

<h1 class="pkt-txt-54">.pkt-txt-54</h1>
<h2 class="pkt-txt-30-medium">.pkt-txt-30-medium</h2>
<h3 class="pkt-txt-24-medium">.pkt-txt-24-medium</h3>
<p class="pkt-txt-16-light">.pkt-txt-16-light</p>

CSS-klassene vil style din tekst slik:

$pkt-styles: (
  'pkt-txt-54': (
    'size': 'size-54',
    'weight': 'regular',
    'letter-spacing': 'tighter',
    'line-height': 'lh-82',
  ),

SCSS mixin

Du kan også ta i bruk tekst-stilene med mixin get-text:

@use "@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography" as *;

.page-header {
  @include get-text("pkt-txt-40-light");
  margin-top: 0.6em;
  margin-bottom: 0.4em;

  @include bp("tablet-up") {
    @include get-text("pkt-txt-54");
  }
}

SCSS funksjon

Du kan også hente typografiverdier med SCSS map.get-funksjonen.

@use "sass:map";
@use "@oslokommune/punkt-css/dist/scss/abstracts/variables";

.wrapper {
  font-size: map.get(variables.$font-size, "size-54");
}

Se alle tilgjengelige typografi-variabler i koden på GitHub

Globale verdier

Per nå setter rammeverket noen globale verdier for luft, typografi, og lenker. Det er det eneste stedet hvor dette gjøres utenom _normalise.scss. Hva gjør de globale verdiene?

• Tar i bruk Oslo kommunes definerte font stack, som inkluderer fonten Oslo Sans.
• Setter default font-size, font-weight, line-height og letter-spacing i hht Oslo kommunes visuell-profil.
• Setter global lenkestil.

Normalise

Gjennom bruk av _normalise.scss så settes alle HTML headinger til brødtekst.

Tanken er at man skal sette headinger i henhold til applikasjonens behov. Lager du nettside er disse annerledes enn et admin-grensesnitt. Noen vil ha responsive fonter, andre ikke. Derfor er dette opp til dere å definere sammen med designerne.

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 1rem;
}

Defaultstiler

<p>Dette er vanlig brødtekst.</p>
<p><em>Dette er skrevet i kursiv</em>.</p>
<p><small>Dette er skrevet i liten tekst</small>.</p>
<p><strong>Dette er skrevet i fet tekst</strong>.</p>

Universell utforming

• Vær forsiktig ved bruk av light-fonten. Denne kan bli for tynn i noen sammenhenger.
• Kontrast mellom tekst og bakgrunn skal være 4.5:1
• Alle tekstutdrag skal ha en beskrivende overskrift eller mellomtittel.
• Rekkefølgen på header-tagger skal være i riktig rekkefølge (h1,h2 osv..)
• Overskrifter og ledetekster skal være klare og beskrivende
• Farge skal ikke være eneste meningsbærer

Les mer:

• Mer om tekststruktur