Typografi: generella riktlinjer

Typografin ska lyfta och stärka våra budskap. Här presenteras hur vi arbetar med typografi för varumärkena 1177 och Inera.

 

1177 - invånare

 

1177 - profession/admin

 

 

 

Innehållsförteckning


Komponentkällor


1177

 

 

Inera

 

 

Generellt om rubriknivåer


När du använder rubrikstilar i Figma och IDS kommer du märka att vi valt att skilja på stil och semantik. Detta är för att ge dig som designer eller utvecklare mer flexibilitet när du skapar layouter och möjlighet att styra den visuella hierarkin efter tjänstens behov.

  • Stil utgår från egenskaper som typsnitt, storlek och färg.

  • Semantik syftar på den programmatiska semantiken och rubriknivåernas hierarki, från H1-H6.

Observera att det fortfarande finns typografiska regler kring användning av stil och semantik tillsammans. Exempelvis är H1 och H2 alltid primär färg, medan övriga rubriknivåer använder neutral färg.

Designspecifikation: 1177


Läs mer om riktlinjer för typografi på 1177:s varumärkesmanual.

Typografin ska lyfta och stärka våra budskap. Inter är det identitetsbärande typsnittet som används i rubriker och identitetsbärande budskap. För ingresser och brödtext använder vi primärt Open Sans.

För tjänster som riktar sig till invånare används röd färg i H1 och H2 rubriker, medan tjänster som riktar sig till professionen har mörkgrå färg i H1 och H2 rubriker.

Se även detaljerade exempel för 1177 på andra språk.

Fonter som används för varumärket 1177 i Ineras UX-ramverk:

Inter, regular (400)
Inter, bold (700)
Open Sans, light (300)
Open Sans, regular (400)
Open Sans, regular italic (400)
Open Sans, bold (700)

Tjänster riktade mot invånare

För 1177.se och tjänster under varumärket 1177 som är riktade mot invånare är H1 och H2-rubriker röda, medan H3 och H4-rubriker är mörkgrå.

Rubriker

Typsnitt: Inter
H1 och H2: färg Primary/40 (#C12143)
H3 och H4: färg Neutral/20 (#353535)

Ingress och brödtext

Typsnitt: Open Sans
Färg: Neutral/20 (#353535)

Länkar

Färg: Accent/40 (#396291) + underline

Tjänster riktade mot profession

För tjänster under varumärket 1177 som är riktade mot profession är samtliga rubriker mörkgrå.

Rubriker

Typsnitt: Inter
Färg: Neutral/20 (#353535)

Ingress och brödtext

Typsnitt: Open Sans
Färg: Neutral/20 (#353535)

Länkar

Färg: Accent/40 (#396291) + underline

Navigering

Färg: nav

 

Tvåfärgade rubriker i kärnbudskap

Vissa identitetsbärande rubriker som t.ex. i huvudpuffen på startsidan, i sajtfoten eller i korta budskap används tvåfärgad rubrik. Denna typ av rubriker används mycket sparsamt .

Regler:

  • Inled med röd (Primary/40), fortsätt med mörkröd (Primary/30).

  • 50% eller mindre färgas in i rött (Primary/40).

  • Hitta en naturlig brytpunkt.

  • Använd inte tvåfärgade rubriker i brödtext, rubriker på artikelsidor eller vid textning av rörligt material.

Att tänka på

  • Använd enfärgade rubriker generellt (i puffar, sektionssidor, samlingssidor och artikelsidor).

  • Använd tvåfärgade rubriker till varumärkesspecifika rubriker på webben, t.ex. huvudpuff samt i sidfoten.

 

Fontspecifikation 1177

Använd följande specifikation för fonter, färger, storlekar och kerning:

Benämning

Typsnitt

Färg (inv/prof)

Desktop
Storlek/linjehöjd (kearning)

Tablet
Storlek/linjehöjd (kearning)

Mobil
Storlek/linjehöjd (kearning)

Benämning

Typsnitt

Färg (inv/prof)

Desktop
Storlek/linjehöjd (kearning)

Tablet
Storlek/linjehöjd (kearning)

Mobil
Storlek/linjehöjd (kearning)

Heading XXL (citizen/profession)

Inter, Bold

Primary/40 (#C12143) / Neutral/20 (#353535)

48/52 (-1,25)

32/40 (-0,83)

32/40 (-0,83)

Heading XL (citizen/profession)

Inter, Bold

Primary/40 (#C12143) / Neutral/20 (#353535)

36/42 (-1)

26/34 (-0,5)

26/34 (-0,5)

Heading L (citizen/profession

Inter, Bold

Primary/40 (#C12143) / Neutral/20 (#353535)

28/36 (-0,7)

24/30 (-0,4)

24/30 (-0,4)

Heading M (citizen/profession)

Inter, Bold

Primary/40 (#C12143) / Neutral/20 (#353535)

24/30 (-0,5)

22/28 (-0,3)

22/28 (-0,3)

Heading S

Inter, Bold

Neutral/20 (#353535)

20/24 (-0,4)

20/24 (-0,2)

20/24 (-0,2)

Heading XS

Inter, Bold

Neutral/20 (#353535)

16/20

16/20

16/20

Preamble (Ingress)

Open sans, Light

Neutral/20 (#353535)

22/36

18/28

18/28

Body text

Open sans, Regular

Neutral/20 (#353535)

16/24

16/24

16/24

Body text, link

Open sans, Regular

Accent/40 (#396291) + underline

16/24

16/24

16/24

Body text, link hover

Open sans, Regular

Accent/30 (#3B4266) + underline

16/24

16/24

16/24

Body text, link visited

Open sans, Regular

Accent/40 (#396291) + underline

16/24

16/24

16/24

Small text

Open sans, Regular

Neutral/20 (#353535)

14/20

14/20

14/20

Page list (Sidlistning)

Inter, Bold

Primary/35 (#A00B36)

20/24 (-0,4)

20/24 (-0,4)

20/24 (-0,4)

Local navigation links

Open sans, Regular

Primary/35 (#A00B36)

16/22

 

 

Local navigation links, active + hover

Open sans, Regular

Primary/30 (#6A0032)

16/22

 

 

 

Designspecifikation: Inera


På webben och digitala tjänster använder vi Poppins som det identitetsbärande typsnittet i rubriker. Övrig text använder Open Sans, exempelvis i ingress och brödtext. H1 och H2-rubriker är röda, medan H3 och H4-rubriker är svartgrå. Länkar och länkade rubriker är gröna.

Fonter som används för varumärket Inera i Ineras UX-ramverk:

Poppins, semibold (600)
Open Sans, light (300)
Open Sans, regular (400)
Open Sans, regular italic (400)
Open Sans, bold (700)


Rubriker

Typsnitt: Poppins
H1 och H2: färg Primary/40 (#A33662)
H3 och H4: färg Neutral/20 (#353636)

Ingress

Typsnitt: Open Sans
Färg: Neutral/20 (#353636)

Brödtext

Typsnitt: Open Sans
Färg: Neutral/20 (#353636)

Länkar

Färg: Accent/40 (#40775E) + underline

Generellt används understrukna länkar i text samt även i footer. I ramverk, navigation, listor och puffar används länkar utan understeck.


Fontspecifikation Inera

Använd följande specifikation för fonter, färger, storlekar och kerning:

Benämning

Typsnitt

Färg

Desktop
Storlek/linjehöjd (kearning)

Mobil
Storlek/linjehöjd (kearning)

Benämning

Typsnitt

Färg

Desktop
Storlek/linjehöjd (kearning)

Mobil
Storlek/linjehöjd (kearning)

Heading 1
(Large)

Poppins, Semibold

Primary/40 (#A33662)

40/50

34/40

Heading 1 Small
(Large alternative)

Poppins, Semibold

Primary/40 (#A33662)

32/42

30/36

Heading 2
(Medium)

Poppins, Semibold

Primary/40 (#A33662)

28/36

28/28

Heading 3
(Small)

Poppins, Semibold

Neutral/20 (#353636)

22/28

22/28

Heading 4
(Extra small)

Poppins, Semibold

Neutral/20 (#353636)

18/26

18/26

utgått

Heading 5 (Underrubrik)

Open Sans, Regular, Versaler

Neutral/20 (#353636)

24/33 (1,5)

24/33 (1,5)

utgått

Heading 6 (Underrubrik, small)

Open Sans, Regular, Versaler

Neutral/20 (#353636)

17/23 (1)

15/20 (0,94)

Preamble (Ingress)

Open Sans, Light

Neutral/20 (#353636)

20/32

21/32

Body text

Open Sans, Regular

Neutral/20 (#353636)

16/26

16/26

Body text, link

Open Sans, Regular

Accent/40 (#40775E) + underline

16/26

16/26

Body text, link hover

Open Sans, Regular

Accent/30 (#305A47) + underline

16/26

16/26

Body text, link visited

Open Sans, Regular

Accent/40 (#40775E) + underline

16/26

16/26

Small text

Open sans, Regular

Neutral/20 (#353636)

14/20

14/20

Local navigation links

Open sans, Regular

Accent/40 (#40775E)

16/24

 

Local navigation links, active + hover

Open sans, Regular

Accent/40 (#40775E)

16/24

 

 

Tillgänglighet


Samtliga färger i varumärkesmanualen är framtagna för att passa både tryck och digitalt bruk. Kontrastvärdena ska uppfylla kraven för WCAG 2.1, AA.

  • Textfärg ska ha tillräckligt hög kontrast mot bakgrunden. Liten text ska ha minst 4.5 i kontrast, stor text och icke text-objekt ska ha minst 3.0 i kontrast.

  • Text som används som länkar ska inte enbart skilja sig från annan text via färg, de ska även understrykas. När text är understruken signalerar det till användarna att den är klickbar.

Rubriker:

  • Märk upp rubriker korrekt, med rätt hierarkisk ordning (H1-H6).

  • Välj inte rubriknivå efter textstorleken i webbläsarna. Utgå från semantiken och använd CSS för att styra hur designen ska se ut.

1.4.4 Förändring av textstorlek

Förutom för textbeskrivningar och text i form av bild, så kan text förstoras utan hjälpmedel upp till 200 procent utan att användaren förlorar innehåll eller funktionalitet. (Nivå AA)

 

WCAG-kriteriet 1.4.12 - Se till att det går att öka avstånd mellan tecken, rader, stycken och ord - Vägledning för webbutveckling

Användaren ska ha möjlighet att öka avstånd åtminstone upp till följande relativa gränsvärden:

  • Radavstånd ska kunna ökas minst 1,5 gånger teckensnittets storlek.

  • Teckenavstånd ska kunna ökas minst 0,12 gånger teckensnittets storlek.

  • Avståndet mellan ord ska kunna ökas minst 0,16 gånger teckensnittets storlek.

  • Avståndet mellan stycken ska kunna ökas minst 2 gånger teckensnittets storlek.

 

Ge webbplatsen god läsbarhet - Vägledning för webbutveckling

  • Välj ett läsvänligt typsnitt och ange det i stilmallen.

  • Undvik helt versala rubriker och texter.

  • Anpassa radavståndet.

  • Vänsterjustera löptext och menyer.

  • Ange maximal spaltbredd och anpassa radlängden.

Relaterade resurser


Här hittar du våra typsnitt:

Typsnitten med aktuella skärningar finns också installerade i Figma som organisationstypsnitt.

Feedback


Hjälp oss att förbättra den här informationen genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.

Publicerad

Jan 18, 2020

Senast uppdaterad

Jul 16, 2024