Typografi

Typografin är en av grundpelarna i vår grafiska profil. Med hjälp av ett skräddarsytt typsnitt för KPA Pension, där vi jobbar med stora kontraster i hanteringen, bidrar vi till dynamik i innehållet och skapar igenkänning över tid.  

Vi har ett eget typsnitt som heter KPA Serif. Det är specifikt framtaget för extern kommunikation. De olika vikterna har olika användningsområden beroende på vad syftet med kommunikationen är.

Typsnittet är inspirerat av tidigt 1900-tal, när KPA Pension grundades. Jugenderan karatäriseras bland annat av kopplingen mellan människa och natur liksom ett organiskt uttryck och förhållningssätt. Något som också ligger nära vårt DNA på KPA Pension.

KPA Serif har starka typsnittskurvor och en organisk känsla. Med sin låga x-höjd, öppna former, ett urval kantiga detaljer och raka linjer har typsnittet en mycket mjuk och modern stil.

KPA Pensions typsnitt:

  • Ett seriftypsnitt

  • Organisk känsla

  • Låg x-höjd för stor påverkan och mer modernt utseende

  • Mjukt med en modern känsla

  • Kantiga detaljer och raka linjer 

  • Anpassat för basic latin


Övergripande riktlinjer för användning:

KPA Display Black

Varumärkeskommunikation (kampanjer, stora format etc).
Använd stora storlekar för att få en dynamisk kontrast. 

KPA Bold

Överskrifter digitalt och löptext (consession, små annonser, app etc). Kan även användas vid längre texter i digital varumärkeskommunikation. Versalgement. 

KPA Regular

Löptext och stödjande till Black, Bold och Book. Fungerar även bra digitalt som brödtext samt i punktlistor eller annan information som ska tydliggöras.

KPA Regular Italic

Stödjande till Regular i löptext, Italic används främst för att skilja vissa ord från andra och inte i hela stycken.  

KPA Book

Löptext och stödjande funktions-typsnitt till Black, Bold och Regular. KPA Book är designat för att vara läsbart på alla ytor, och speciellt i små format.

KPA Book Italic

Stödjande till Book i löptext, Italic används främst för att skilja vissa ord från andra och inte i hela stycken.  


Typsnitt

KPA Pensions typsnitt består av fyra basvikter och två kursiva.


Förhållningssätt

Vid sättning av textstycken följ detta förhållningssätt i så hög utsträckning som möjligt. Då maximerar vi kontrasten och skapa en dynamik i typograferingen.

Det viktigaste att tänka på när du använder vårt typsnitt:

  • Radavstånd 100–120 %. Vid längre texter är 120–130 % ett alternativ. 

  • Spärrning (metrics): 0 alternativt 20 för löptext

  • Versalgement i normala fall
  • Tydliga kontraster

  • Vänsterställt

  • Max 70 tecken per rad

  • Sträva efter en jämn högerkant

Vid sättning av textstycken följ detta förhållningssätt i så hög utsträckning som möjligt. Då maximerar vi kontrasten och skapa en dynamik i typograferingen.


Ersättningstypsnitt

I all kommunikation ska KPA Pensions egna typsnitt användas. I vissa fall där filer ska skickas externt eller mallarna är öppna så kan Georgia användas som ersättningstypsnitt.


Nummerhantering

Linear nummer (standard)

Standardsiffrorna då inga andra inställningar görs. Används bland annat i rubriker, mellanrubriker, sidfot och mottagaradress.

I svensk version av InDesign heter de "Standardnummerformat".

Old-style nummer

Dessa nummer ska användas i löptext och i artikelformat.

I svensk version av InDesign heter de "Proportionella gemensiffror".

Tabular nummer

Dessa nummer ska användas i tabeller och numeriska uppställningar. Siffrorna har en fast bredd och är versala.

I svensk version av InDesign heter de "Fasta versalsiffror".

Opentype funktionalitet i program

Aktivera linear nummer i Adobe illustrator

Aktivera Old-style nummer i Adobe illustrator

Aktivera Tabular nummer i Adobe illustrator

Aktivera Opentype funtionalitet
i Adobe InDesign och Adobe Photoshop.

Aktivera Old-Style nummer i Microsoft Word

Aktivera Tabular nummer i Microsoft Word

Aktivera kerning och ligaturer i Microsoft Word

Opentype funktionalitet i CSS

Old Style Figures onum

0123456789

0123456789

font-variant-numeric: oldstyle-nums; /* high-level property */
-moz-font-feature-settings: 'onum'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'onum'; /* low-level (old Webkit) */
font-feature-settings: 'onum' on; /* low-level (all new browsers) */

Lining Figures lnum

0123456789

0123456789

font-variant-numeric: lining-nums; /* high-level property */
-moz-font-feature-settings: 'lnum'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'lnum'; /* low-level (old Webkit) */
font-feature-settings: 'lnum' on; /* low-level (all new browsers) */

Tabular Figures tnum

0123456789

0123456789

font-variant-numeric: tabular-nums; /* high-level property */
-moz-font-feature-settings: 'tnum'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'tnum'; /* low-level (old Webkit) */
font-feature-settings: 'tnum' on; /* low-level (all new browsers) */

Slashed Zero zero

0123456789

0123456789

font-variant-numeric: slashed-zero; /* high-level property */
-moz-font-feature-settings: 'zero'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'zero'; /* low-level (old Webkit) */
font-feature-settings: 'zero' on; /* low-level (all new browsers) */

Fractions frac

1 1/2 h 3 98/100

1 1/2 h 3 98/100

font-variant-numeric: diagonal-fractions; /* high-level property */
-moz-font-feature-settings: 'frac'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'frac'; /* low-level (old Webkit) */
font-feature-settings: 'frac' on; /* low-level (all new browsers) */

Superscript sups

HO 0123456789

HO 0123456789

font-variant-position: super; /* high-level property */
-moz-font-feature-settings: 'sups'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'sups'; /* low-level (old Webkit) */
font-feature-settings: 'sups' on; /* low-level (all new browsers) */

Subscript subs

HO 0123456789

HO 0123456789

font-variant-position: sub; /* high-level property */
-moz-font-feature-settings: 'subs'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'subs'; /* low-level (old Webkit) */
font-feature-settings: 'subs' on; /* low-level (all new browsers) */

Ordinals ordn

1a 2o

1a 2o

font-variant-numeric: ordinal; /* high-level property */
-moz-font-feature-settings: 'ordn'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'ordn'; /* low-level (old Webkit) */
font-feature-settings: 'ordn' on; /* low-level (all new browsers) */

Case-sensitive Forms case

{¿¡HO:HO-HO—HO!?}

{¿¡HO:HO-HO—HO!?}

text-transform: uppercase; /* high-level property */
-moz-font-feature-settings: 'case'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'case'; /* low-level (old Webkit) */
font-feature-settings: 'case' on; /* low-level (all new browsers) */

Standard Ligatures liga

koffie influence

koffie influence

font-variant-ligatures: common-ligatures; /* high-level property */
-moz-font-feature-settings: 'liga'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'liga'; /* low-level (old Webkit) */
font-feature-settings: 'liga' on; /* low-level (all new browsers) */

Discretionary Ligatures dlig

ffh fft fh ft tt

ffh fft fh ft tt

font-variant-ligatures: discretionary-ligatures; /* high-level property */
-moz-font-feature-settings: 'dlig'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'dlig'; /* low-level (old Webkit) */
font-feature-settings: 'dlig' on; /* low-level (all new browsers) */

Kerning kern

AVATAR LT.

AVATAR LT.

font-kerning: normal; /* high-level property */
-moz-font-feature-settings: 'kern'; /* low-level (old Firefox) */
-webkit-font-feature-settings: 'kern'; /* low-level (old Webkit) */
font-feature-settings: "kern" on; /* low-level (all new browsers) */