Läs mer om riktlinjer för typografi på 1177 Vårdguidens varumärkesmanual
Grafisk specifikation
Typografin ska lyfta och stärka våra budskap. Inter är vårt identitetsbärande typsnitt som används i rubriker och identitetsbärande budskap. För ingresser och brödtext använder vi primärt Open Sans.
För webb och tjänster som riktar sig till invånare används röd färg i H1 och H2 rubriker, medan webb och 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.
Tvåfärgade rubriker i kärnbudskap
För vissa 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, fortsätt med mörkröd.
50% eller mindre färgas in i rött.
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 | #3B4163 + 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 | 16/22 | 16/22 |
Lokal navigering, vald | Open sans, Regular | #6A0032 | 16/22 | 16/22 | 16/22 |
Lokal navigering hover | Open sans, Regular | #6A0032 | 16/22 | 16/22 | 16/22 |
Do’s and Don’ts
Använd röd färg till H1 och H2 för tjänster som riktar sig till invånare.
Använd grå färg 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 FÖR TEST / INVÄNTAR GRANSKNING |
---|---|
Publicerad | 2020-01-18 |
Senast uppdaterad | 2020-01-20 |