Visuell identitet

Typografi

Typografin ska lyfta och stärka våra budskap. Inter är vårt identitetsbärande typsnitt i kombination med Open Sans i ingress och brödtext.

Inter

Inter är en platseffektiv modern sanserif med hög läsbarhet så väl i tryck som digitalt. Inter är ett open source-projekt som är fritt att använda och typsnittet vidareutvecklas löpande.

Ett versalt och gement a i typsnittet Inter
Hela alfabetet i typsnittet Inter

Tvåfärgade rubriker i kärnbudskap

Inter används framför allt till rubriker och identitetsbärande budskap. Inter kan sättas i rött eller tvåfärgat röd och mörkröd.

Tänk på det här när du arbetar med tvåfärgande rubriker:

  • Inled med röd, fortsätt med mörkröd.
  • 50% eller mindre färgas in i rött.
  • Hitta en naturlig brytpunkt.
  • Används endast i rubriker eller korta budskap. Använd inte tvåfärgade rubriker i brödtext eller vid textning av rörligt material.
Exempel på rubriker i Inter, olika färger och utformningar

Kontrastrik typografi

Vi använder kontraster mellan stor och liten text för att skapa tydlighet och ordning. 

Tänk på det här:

  • Låt rubriker få ta plats, men gör dem inte för långa.
  • Hellre stor än för liten skillnad i storlek.

Se rekommendationerna i tabellen nedan.

Rubriknivå Typsnitt Färg Storlek (pt) Radavstånd Knipning
H1 Inter, Bold Röd + Mörkröd 32 34 -20
H2 Inter, Bold Röd 16 18 -20
H3 Inter, Bold Sten: Mörk 12 14 -20
H4 Inter, Bold Sten: Mörk 10 12 -20

Open Sans

Vi använder primärt Open Sans för ingresser och brödtext. Open Sans har bra läsbarhet såväl i tryck som digitalt och har en humanistisk, modern, ljus karaktär.

Open Sans lyder under creative commons-licens och kan användas och laddas ner fritt.

Vi sätter Open Sans i färgen Sten Mörk, som ingår i paletten för komplementfärger.

I tabellen nedan kan du se vilka storlekar som rekommenderas.

Versalt och gement a i Open Sans
Hela alfabetet  i Open Sans

Dessa storlekar rekommenderas för Open Sans

Typ av text Vikt Färg Storlek (pt) Radavstånd Knipning
Ingress Light Sten: Mörk 14 18 0
Brödtext Regular Sten: Mörk 10 14 0
Brödtext, liten Regular Sten: Mörk 8 12 0

Typografi för digitala gränssnitt

  • Sätt rubriknivå 1 och 2 i Röd (#C40D3C).
  • Sätt brödtext i Sten Mörk (#353535).
  • Sätt länkar i Call To Action (#396291).
Exempel på digitala gränssnitt

Använd följande i digitala gränssnitt

Typ av text Typsnitt Färg Desktop (kerning) Tablet (kerning) Mobil (kerning)
H1 Inter UI, Bold #C40D3C 48/52 (-1,25) 32/40 (-0,83) 32/40 (-0,83)
H2 Inter UI, Bold #C40D3C 24/30 (-0,5) 22/28 (-0,3) 22/28 (-0,3)
H3 Inter UI, Bold #353535 20/24 (-0,4) 20/24 (-0,4) 20/24 (-0,4)
H4 Inter UI, Bold #353535 16/20 16/20 16/20
Ingress Open Sans, Light #353535 24/36 20/32 20/32
Brödtext Open Sans, Regular #353535 16/24 16/24 16/24

Vardagstypografi

Vi använder Arial när Inter och Open sans inte finns att tillgå. Arial är ett standardtypsnitt på Mac och Windows. Arial används då till rubriker, ingresser, mellanrubriker och brödtext.

Alla tecken i Arial

Typografi på andra språk

Arabiska, persiska och soranî

Här har vi valt att använda Arial som är en standardfont med god läsbarhet. För dessa tecken behövs teckenstorlekarna ökas något, då tecknen upplevs som små och vi använder samma inställningar som för latinska tecken. 

Exempel på textelement Desktop Tablet Mobil
H1 50/54 36/40 36/40
H2 28/32 24/28 24/28
H3 24/28 20/22 20/22
H4 18/24 18/24 18/24
Ingress 28/38 24/30 24/30
Brödtext 18/24 18/24 18/24

Thailändska, kantonesiska, tigrinska med flera

Vi har valt att använda systemfonten för respektive språk, för språk som har helt egna teckenuppsättningar. Exempel på sådana språk är thailändska, kantonesiska och tigrinska.

Samma typsnittsstorlekar har använts som för latinska tecken.

Polska, romska med flera

Vissa tecken som är specifika för till exempel polska och en del romska språk, fungerar inte i Open Sans Light. Open Sans Light är typsnittet som används i ingresser, tecknen visas då i ett kraftigare snitt.

Därför har vi valt att använda oss av Open Sans Regular i ingressen för dessa språk, stället för Open Sans Light.

Se exempel på hur typografin kan användas

Till toppen av sidan