Läs mer om riktlinjer för typografi på 1177 Vårdguidens varumärkesmanual
Designspecifikation
Typografi
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 tjänster riktade mot invånare respektive profession.
Färg på H1 och H2 rubriker:
Tjänster som riktar sig till invånare = H1 och H2 har röd färg (main)
Tjänster som riktar sig till profession = H1 och H2 har mörkgrå färg (stone-dark).
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.
Regler:
Inled med röd (main), fortsätt med mörkröd (secondary-dark).
50% eller mindre färgas in i rött (main).
Hitta en naturlig brytpunkt.
Använd inte tvåfärgade rubriker i brödtext, rubriker på artikelsidor eller vid textning av rörligt material.
Fontspecifikation
Använd följande specifikation för fonter, färger, storlekar och kerning:
Benämning | Typsnitt | Färg (inv/prof) | Desktop | Tablet | Mobil |
|---|---|---|---|---|---|
H1 | Inter, Bold | #C12143 / #353535 | 48/52 (-1,25) | 32/40 (-0,83) | 32/40 (-0,83) |
H2 | Inter, Bold | #C12143 / #353535 | 24/30 (-0,5) | 22/28 (-0,3) | 22/28 (-0,3) |
H3 | Inter, Bold | #353535 | 20/24 (-0,4) | 20/24 (-0,4) | 20/24 (-0,4) |
H4 | Inter, Bold | #353535 | 16/20 | 16/20 | 16/20 |
Ingress/preamble | Open sans, Light | #353535 | 22/36 | 18/28 | 18/28 |
Paragraf | Open sans, Regular | #353535 | 16/24 | 16/24 | 16/24 |
Paragraf, länk | Open sans, Regular | #396291 + underline | 16/24 | 16/24 | 16/24 |
Paragraf, länk hover | Open sans, Regular | #3B4266 + underline | 16/24 | 16/24 | 16/24 |
Paragraf, länk besökt | Open sans, Regular | #396291 + underline | 16/24 | 16/24 | 16/24 |
Small text | Open sans, Regular | #353535 | 14/20 | 14/20 | 14/20 |
Sidlistning | Inter, Bold | #A00B36 | 20/24 (-0,4) | 20/24 (-0,4) | 20/24 (-0,4) |
Underrubrik | Inter, Regular, Versaler | #353535 | 20/24 | 20/24 | 20/24 |
Underrubrik, mini | Inter, Regular, Versaler | #353535 | 14/20 | 14/20 | 14/20 |
Lokal navigering | Open sans, Regular | #A00B36 | 16/22 | ||
Lokal navigering, vald | Open sans, Regular | #6A0032 | 16/22 | ||
Lokal navigering hover | Open sans, Regular | #6A0032 | 16/22 |
Do’s and Don’ts
Använd röd färg (main) till H1 och H2 för tjänster som riktar sig till invånare.
Använd mörkgrå färg (stone-dark) till H1 och H2 för tjänster som riktar sig till profession.
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.
Tillgänglighet
Kontrastvärdena ska uppfylla kraven för WCAG 2.1, AA.
Kontrollera alltid kontrastvärdet mellan text och bakgrund.
Research på komponenten
-
Relaterade resurser/komponenter
Här hittar du våra typsnitt:
Open Sans: https://fonts.google.com/specimen/Open+Sans
Inter: https://rsms.me/inter/
Läs mer om riktlinjer för typografi på Varumärkesmanual 1177 Vårdguiden - typografi
Status
Status | FÄRDIG |
|---|---|
Publicerad | 2020-01-18 |
Senast uppdaterad | 2020-01-20 |