Typografin ska lyfta och stärka våra budskap. Här presenteras hur vi arbetar med typografi för varumärkena 1177 och Inera.
Innehållsförteckning
Komponentkällor
1177
Inera
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 tjänster riktade mot invånare respektive profession och för 1177 på andra språk.
Att tänka på
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.
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 1177
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 |
Inera
På webben och digitala tjänster använder vi Open Sans som det identitetsbärande typsnittet i rubriker, ingress och brödtext. H1 och H2-rubriker är turkosa, medan H3 och H4-rubriker är grå. Länkar och länkade rubriker är turkosa.
Rubriker
Typsnitt: Open Sans
H1 och H2: färg secondary-dark #00706e
H3 och H4: färg muted-dark #5f5f5f
Ingress
Typsnitt: Open Sans
Färg: black #1b1b1b
Brödtext
Typsnitt: Open Sans
Färg: muted-dark #5f5f5f
Länkar
Färg: secondary-dark #00706e
Navigering
Färg: secondary-dark #00706e
Generellt används understrukna länkar i text, listor, länklistor etc, samt även i footer. I ramverk och navigation 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 | Mobil |
---|---|---|---|---|
H1 | Open Sans, Bold | #00706E | 40/50 (-1) | 34/40 |
H2 | Open Sans, Bold | #00706E | 28/36 (-0,5) | 28/28 (-0,5) |
H3 | Open Sans, Bold | #5F5F5F | 22/28 | 22/28 |
H4 | Open Sans, Bold | #5F5F5F | 18/26 | 18/26 |
Ingress | Open Sans, Light | #1B1B1B | 21/32 | 21/32 |
Paragraf | Open Sans, Regular | #5F5F5F | 16/26 | 16/26 |
Paragraf, länk | Open Sans, Regular | #00706E + underline | 16/26 | 16/26 |
Paragraf, länk hover | Open Sans, Regular | #00706E + underline | 16/26 | 16/26 |
Paragraf, länk besökt | Open Sans, Regular | #00706E + underline | 16/26 | 16/26 |
P Liten text | Open sans, Regular | #5F5F5F | 14/20 | 14/20 |
H Underrubrik Stor Versal | Open Sans, Regular, Versaler | #5F5F5F | 24/33 (1,5) | 24/33 (1,5) |
H Underrubrik, Liten Versal | Open Sans, Regular, Versaler | #5F5F5F | 17/23 (1) | 15/20 (0,94) |
Lokal navigering | Open sans, Regular | #00706E | 16/24 | |
Lokal navigering, vald | Open sans, Regular | #00706E | 16/24 | |
Lokal navigering hover | Open sans, Regular | #00706E | 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:
Open Sans: https://fonts.google.com/specimen/Open+Sans
Inter: https://rsms.me/inter/
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 | |
Senast uppdaterad |