Typografi för rubriker

På sca.com finns det sex stycken format på text-element. Dessa listas och förklaras nedan. Varje format är framtaget för att vara responsivt och anpassar sig efter aktuell skärmstorlek, därav kommer endast storlekar i max-läget att redovisas gällande typografin på sca.com.

Sidrubrik

Sidrubrik är den högsta rubriknivån på sca.com och används för att presentera sidors rubriker.

 


Textfärg: Vit
Hex: FFFFFF
Typsnitt: SCA Sans Bold
Typsnittsvikt: 700

Teckenstorlek: 70px
Radavstånd: 80px
Placering: Centrerad

 


Textfärg: G5
Hex: 204440

 

Blockrubrik

Blockrubriker används på alla webbplatsens block. Dessa rubrikers formatering är beroende av om de publiceras i ett fullbreddsblock eller halvbreddsblock.


Blockrubrik i fullbreddsblock.

 

I fullbredd är rubriker formaterade på följande sätt:


Textfärg: Vit
Hex: FFFFFF
Typsnitt: SCA Sans Bold
Typsnittsvikt: 700

Teckenstorlek: 70px
Radavstånd: 80px
Placering: Centrerad

 


Textfärg: G5
Hex: 204440

 


Blockrubrik i halvbreddsblock.

 

I halvbredd är rubriker formaterade på följande sätt:


Textfärg: G5
Hex: 204440
Typsnitt: SCA Sans Bold
Typsnittsvikt: 700

Teckenstorlek: 72px
Radavstånd: 79.2px
Placering: Centrerad

 


Textfärg: Vit
Hex: FFFFFF

 

Headline

Headline används ovanför rubriker i flertalet block på sca.com och ger mer information om det aktuella blocket.

 


Textfärg: G5.1
Hex: 10211F
Typsnitt: Helvetica Neue
Typsnittsvikt: 200

Teckenstorlek: 17,75px
Radavstånd: 28px
Text-transformering: Versaler
Placering: Centrerad

 


Textfärg: Vit
Hex: FFFFFF

 

Vertikal rubrik

Vertikala rubriker förekommer i block och är som ett dna för att få hela hemsidan att hänga ihop.

 


Textfärg: B1
Hex: 00205b
Typsnitt: Helvetica Neue
Typsnittsvikt: 200
Teckenstorlek: 14px
Text-transformering: Versaler

Placering: Vertikalt centrerad

 


Textfärg: Vit
Hex: FFFFFF

 

Typografi i brödtextfält

 

H2 – den högsta rubriksnivån för brödtext

H2 är den högsta rubriknivån som kan förekomma i ett brödtextfält och används för nya kapitel eller fokusområde i innehållet.

 


Textfärg: G5
Hex: 204440
Typsnitt: SCA Sans Bold
Typsnittsvikt: 700
Teckenstorlek: 45px
Radavstånd: 55px
Max-bredd: 975px
Placering: Vänsterställd

 

H3 – den minsta storleken för rubriker i brödtexteditorn

H3 är mellanstorleken för rubriker i brödtexteditorn och används för att dela upp innehållet i olika sektioner/kapitel.

 


Textfärg: G5
Hex: 204440
Typsnitt: Helvetica Neue
Typsnittsvikt: 700
Teckenstorlek: 18px
Radavstånd: 24px
Placering: Vänsterställd
Max-bredd: 600px

 

H4 – minsta rubriken i blockytor

H4 har samma formatering i brödtexteditorn som H3 med skillnaden att när de presenteras i en blockyta antar H4 en mindre typsnittsstorlek.

 


Textfärg: G5

Hex: 204440
Typsnitt: Helvetica Neue
Typsnittsvikt: 700

Teckenstorlek:18px
Radavstånd: 24px
Placering: Vänsterställd
Max-bredd: 600px

 

Topptext – text som gör länkar i H2-rubriker gröna

Topptext är ett format på rubriker är speciellt framtaget för att göra länkar mer framträdande. H4-element används i samband med rubriker som sätt i brödtextfält.

 


Textfärg: G5
Hex: 204440
Länkfärg: G3
Hex: 44986B
Typsnitt: SCA Sans Bold
Typsnittsvikt: 200

Teckenstorlek: 69px
Radavstånd: 76px
Placering: Centrerad

 

Ingress

Ingress används på sca.com som en inledning på sidan och är alltid placerad i början av innehållet.

 


Textfärg: G5
Hex: 204440
Typsnitt: Helvetica Neue
Typsnittsvikt: 200

Teckenstorlek: 1.5625rem
Radavstånd: 1.875rem
Placering: Centrerad
Max-bredd: 975px

 

Stycke

Innehåll i brödtextfälten på sca.com är till största delen uppbyggt av stycke- eller paragraf-element. Det är dessa text-element som förmedlar den huvudsakliga informationen på webbplatsen.

 


Textfärg: G5
Hex: 204440
Typsnitt: Helvetica Neue
Typsnittsvikt: 200
Teckenstorlek: 1.125rem
Radavstånd: 1.4375rem
Placering: Vänsterställd