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.
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.
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.
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).
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.
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
Affisch eller DR
- Sätt rubriken i Inter i Röd och Mörkröd.
- Sätt undertext i Open sans i Mörkröd.
- Använd cirkeln som bildmask.
- Skapa kontrast i storlek mellan de två textblocken.
- Använd Ljusrosa som textbakgrund.
- Använd rak sidfot i Röd med logotyp.