Typografi

Høyres budskap skal oppfattes raskt og korrekt på alle flater. Gode tekster i kombinasjon med lettleselig typografi i en ryddig layout og hierarki skal sørge for å budskapet kommer tydelig frem.

Typografi

Skrifttyper

Høyre bruker to skrifttyper som komplimenterer hverandre godt. Zalando Sans Expanded som tittel-type og Roboto til mengdetekst og UI (user interface/ brukergrensesnitt). Disse to skrifttypene er fritt tilgjengelig fra Google Fonts og leveres med en lisens (Open Font License) som gjør at fontene kan benyttes fritt uten vederlag. Les mer om Open Font Licence (OFS) på fontenes egne nettsider på fonts.google.com og på sil.org. Fontene kan lastes ned fra Google fonts.

Google fonts

Faguttrykk

  • TYPOGRAFI: Den overordnede begrepet for utforming av tekst på ulike flater. Valg og sammensetning av skrifttyper , størrelse, bokstavavstand, linjeavstand og hierarki, slik at teksten blir lettleselig, forståelig og visuelt strukturert.
  • SKRIFTTYPE/FONT: En spesifikk teksttype, for eksempel, Helvetica. Opprinnelig var en font støpeformen til et typesett (støpning av alle bokstaver, tall og tegn i en spesifkikk sktiftype og vekt) men i digitale flater brukes ordet font til å beskrive skriftens dataformat – datafilen som ligger lagret på datamaskinen, og som lastes ned fra nettet. Skrifttype og font brukes om hverandre.
  • VEKT: Tykkelsen på skrifttypen (For eksempel Light/Regular/Bold)
  • VERSALER: Store bokstaver. MINUSKLER: Små bokstaver
  • HORUNGE: Når et avsnitt slutter med bare ett ord på en linje
Titler/korte budskap
Mengetekst og UI

Logotype

Høyre bruker Roboto regular som logotype (navntrekket i logoen: Høyre). Dette gjør det lett å sette opp lokale logoer – så lenge man følger retningslinjene. Logoen er en av Høyres viktigste merkevarer og skal alltid komme tydelig frem i designet. Det skal ikke være noen tvil hvem avsenderen er. Her er noen eksempler på korrekt plassering av logoen. Les mer om Høyres logo her.

Logotype regler
Gi plass til litt luft rundt logoen. Følg disse retningslinjer som viser minimum mellomrom fra logo til andre elementer i designet. H-en i logoen brukes som retningslinjer for dette. «e» i Høyre brukes sammen med H-en for å definere høyden på vimpelen. Unntak: Når logoen brukes kun med vimpel-symbolet (nederst til høyre).

Typografiske bestanddeler og hierarki

Om brødtekst og mengdetekst er 100% (1em) sktiftstørrelse er de andre bestanddelene prosentvis endring i skriftstørrelse i forhold til denne. Fargene gjelder for hvit bakgrunn. Avvik forekommer på andre farge-bakgrunner. Hvit brukes på bilder og mørke bakgrunner (som H500).

Typografiske bestanddeler og hierarki

Brødtekst (b)

  • Font: Roboto regular
  • Vekt: Regular
  • Farge: H900 (#212121)
  • Størrelse: Utgangspunkt (1em)
  • Linjeavstand: Standard (1em)

Tittel (h1)

  • Font: Zalando Sans Expanded
  • Vekt: Black
  • Farge: H900 (#212121)
  • Størrelse: 250%/2.5em av nivå 3 (p)
  • Linjeavstand: 95% / 0.95em

Mellomtittel (h2)

  • Font: Zalando Sans Expanded
  • Vekt: Bold
  • Farge: H900 (#212121)
  • Størrelse: 120%/1.2em av nivå 3 (p)
  • Linjeavstand: 95% / 0.95em

Ingress

  • Font: Roboto
  • Vekt: Regular
  • Farge: H600 (#757575)
  • Størrelse: 140%/1.4em av nivå 3 (p)
  • Linjeavstand: Standard (1em)

Stikktittel

  • Font: Roboto regular
  • Vekt: Regular
  • Farge: H900 (#212121)
  • Størrelse: 80% (0.8em) av nivå 3 (p)
  • Linjeavstand: Standard (1 em)

CTA/knapp

  • Font: Roboto
  • Vekt: Medium i versaler
  • Farge: Hvit (#ffffff) på H500 (#0065f1)
  • Størrelse: 100%/1em av nivå 3 (p)
  • Linjeavstand: Standard (1 em)

Bildetekst

  • Font: Roboto
  • Vekt: Regular
  • Farge: H600 (#757575)
  • Størrelse: 80%/0.8em av nivå 3 (p)
  • Linjeavstand: Standard (1em)

Kolofon

  • Font: Roboto
  • Vekt: Regular
  • Farge: H900 (#212121)
  • Størrelse: 80%/0.8em av nivå 3 (p)
  • Linjeavstand: Standard (1em)

Videoteksting/caption

  • Font: Zalando Sans Expanded
  • Vekt: Bold
  • Farge: Hvit (#ffffff) på mørk bakgrunn eller rektangel med 30% sort synlighet (70% gjennomsiktig). Se eksempel
  • Størrelse: 70 pt (for 1080x1920px)
  • Linjeavstand: Standard