Typografi

Bruk av typografi

Beskrivelse av SpareBank 1-skriftypene og eksempel på skriftstørrelser er beskrevet under Profil. Denne siden handler om de ulike typografi-komponentene som utviklere kan ta i bruk.

Heading

Heading levels er først og fremst skapt for organisering av innhold, ikke visualisering. Dette betyr at overskriftshierarkiet må opprettholdes som første prioritet. Headingene i seg selv kan styles for å følge den visuelle designmalen, men rekkefølgen på overskriftene er av absolutt største viktighet.

Heading 1 er kapitteloverskriften, om du vil, mens de påfølgende under-headingene er oppdeling av budskapet slik det relaterer til foregående heading levels.

En Heading 2 kan ikke komme uten at en heading 1 kommer først, siden Heading 2 betyr at avsnittet er relevant for Heading 1, men fordrer presisering visuelt og strukturelt. På samme måte er Heading 3 underlagt Heading 2. Heading 3 i dette tilfellet vil da være en under-kategori for Heading 2, og kan ikke implementeres uten å «innlemmes» under en relevant heading 2.

Man kan ha flere headingnivåer av samme nivå etter hverandre. Det eneste dette betyr er at de presenterer en ny paragraf eller innhold som er relevant for den overordnede headingen, men ikke passer som en underparagraf for den tidligere headingen av samme nivå.

Merk: For å sikre at SpareBank1-fonten settes som default på tekst også utenom disse komponentene må du passe på å ha klassen .ffe-body på eller nær body-elementet.

EmphasizedText

Kursiv tekst som brukes der vi vil utheve et ord eller en setning i en lengre tekst.

StrongText

Bold tekst som brukes når vi vil utheve noe i en lengre tekst.

LinkText

Lenker vises vanligvis med en understrek, siden dette er en standard i nettlesere, og gjør det ekstra tydelig for brukerne at teksten er klikkbar.

Dersom det er tydelig ut fra sammenhengen at en tekst er en lenke eller lenken består av et ikon uten synlig tekst kan man vurdere å skru av understreken. Husk at farge alene ikke er nok til å indikere at en tekst er klikkbar. Ikke alle våre brukere kan skille mellom fargen på lenkene og fargen på brødteksten.

LinkIcon

For lenker som kun består av et ikon uten synlig tekst.

Paragraph

Et vanlig tekstavsnitt

SmallText

En tekst som skal være mindre enn den vanlige skriftstørrelsen.

MicroText

Den minste skriftstørrelsen vi har.

PreformattedText

Kan brukes hvis du har tekst som allerede er formattert og du vil vise teksten sånn.