• Start
  • Blogg
  • Kom igång
  • Riktlinjer
  • Komponenter
  • Changelog
  • Tillgänglighet
  • Inställningar

Riktlinjer

Riktlinjer

​
​

Inga resultat hittade, prova med andra sökvillkor.

Personlighet

Designfilosofi
Designprinciper
Värdeord

Identitet

Bildmanér
Dotterbolag
Färger
Ikonografi
Logotyp
Tonläge
Typografi
UX-writing

Layout

Angränsande ytor
Brytpunkter
Grid
Layoutregioner
Mellanrum
Säkert område

Mönster

Destruktiva val
Hjälp
Inloggning
Inställningar
Interaktionstillstånd
Landningssidor
Navigering
Obligatoriska fält
Offline
Onboarding
Progress
Startskärm
Textinmatning
Tomma tillstånd
Validering

Produkter och tjänster

Bodies för bebisar
Chattbot och chatt
Desktop web apps för professionella användare
Digitala skärmar
Html-mejl

Typografi

Typografi

Uppdaterad 2026-06-16

En enhetlig och god typografi är ovärderlig i all skriven kommunikation. Vår typografi behöver vara tydlig, sympatisk och stämma överens med identiteten i övrigt. Därför har vi vår egen identitetstypografi att använda vid trycksaksproduktion och i digitala medier.

Identitetstypografi

Till SJs identitetstypografi räknas SJs egna, speciellt framtagna, typsnitt SJ Sans. Typsnittets x-höjd gör den vänlig och folklig. De mjuka och rundade formerna ger den en egen mänsklig och inkluderande karaktär. Att den är bredare gör den mer generös. Ett mänskligt, enkelt och pålitligt typsnitt.

SJ Sans finns både för tryck och webb i fyra vikter med olika användningsområden.

Identitetstypografi

Rubrik

SJ Sans Bold används i rubriker, gärna stort och stolt när man vill öka tonläget.

Rubrik

Underrubrik och ingress

SJ Sans Medium används i kombination med Bold i rubriker eller ensamt i underrubriker, ingresser, bildtexter eller kortare faktatexter.

Underrubrik och ingress

Brödtext

För kortare och längre brödtexter används SJ Sans Regular. För kursiv text i brödtexter används SJ Sans Regular Italic.

Brödtext

Specialtecken & ligaturer

SJ Sans är ett typsnitt i formatet OpenType och innehåller många tecken förutom de som visas på tangentbordet, såsom kapitäler, gemena siffror och tabellsiffror. Dessa kan användas vid typografering av längre texter och tabeller för att skapa god läsbarhet.

Kapitäler

Kapitäler

Gemena siffror

Gemena siffror

Tabellsiffror

Tabellsiffror

Vissa specialtecken har tagits fram och finns som ligaturer i SJ Sans. Du kan infoga ligaturer automatiskt, för att dessa skall fungera krävs att ligaturer aktiveras i programvaran. Standardligaturer (Common Ligatures) skall alltid användas, medans mjuka ligaturer (Discretionary Ligatures) kan användas i brödtext och underrubriker.

Standardligaturer

Standardligaturer

Mjuka ligaturer

Mjuka ligaturer

Fallback-typsnitt

I kontorsprogram som PowerPoint eller när SJ Sans inte finns tillgängligt använder vi Arial, ett typsnitt som redan finns installerad i datorn.

Fallback-typsnitt

Tillåtna färgkombinationer

Då vi strävar efter hög läsbarhet i allt vi gör är det viktigt att välja förgrundsfärger som skapar god kontrast mot bakgrunden.

  • Meningsbärande grafik såsom ikoner och diagram måste ha ett kontrastvärde på minst 3:1.
  • Stor text måste ha ett kontrastvärde på minst 3:1. Stor text är 18 punkter (24 pixlar) och större, eller 14 punkter (19 pixlar) och större om den är i fetstil.
  • Vanlig text måste ha ett kontrastvärde på minst 4,5:1. Vanlig text är mindre än 18 punkter (24 pixlar), och mindre än 14 punkter (19 pixlar) om den är i fetstil.
Löv 2 + Vitt

Löv 2 + Vitt

Löv 1 + Vitt

Löv 1 + Vitt

Gräs + Svart

Gräs + Svart

Himmel 2 + Vitt

Himmel 2 + Vitt

Himmel 1 + Svart

Himmel 1 + Svart

Raps + Svart

Raps + Svart

Sjö + Vitt

Sjö + Vitt

Äng + Svart

Äng + Svart

Mossa + Svart

Mossa + Svart

Sand + Svart

Sand + Svart

Snö + Svart

Snö + Svart

Snö + Granit

Snö + Granit

Snö + Löv 2

Snö + Löv 2

Snö + Himmel 2

Snö + Himmel 2

Snö + Höstlöv 2

Snö + Höstlöv 2

Vitt + Svart

Vitt + Svart

Vitt + Granit

Vitt + Granit

Vitt + Löv 1

Vitt + Löv 1

Vitt + Himmel 1

Vitt + Himmel 1

Vitt + Höstlöv 1

Vitt + Höstlöv 1

Vitt + Varning

Vitt + Varning

Varning + Vitt

Varning + Vitt

Smultron + Svart

Smultron + Svart

Assets

SJ Sans (otf, ttf, woff, woff2)

design.sj.se

Tokens

bit.cloud

Har du frågor?

Margareta Lindén

Varumärkesupplevelse

Relaterade riktlinjer

  • Identitetsmanual 2.2 (pdf)