Styleguide
Ein einheitlicher Stil im Sinne des Corporate Designs ist für den Unternehmensauftritt unerlässlich. Nicht nur schafft er ein „aufgeräumtes“ und ausgewogenes Bild, er erhöht auch den Wiedererkennungswert.
Ein Styleguide ermöglicht es einem Unternehmen, sich konstant zu präsentieren. Er enthält verbindliche Vorgaben für die Verwendung von Schriftarten, Farben, Ikonen und anderen Gestaltungselementen.
Headlines
Headlines sind Überschriften, die sich in Headlines des Typs H1 (Titel) und Headlines des Typs H2-H6 (Untertitel) gliedern. Es existieren jeweils unterschiedliche Größen und Formate für Desktop und Tablet sowie für die mobile Ansicht.
H1 Large - Desktop
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 45px
font-family: 'Eczar', serif
line-height: 51px
font-size: 36px
line-height: 40px
font-size: 24px
line-height: 30px
H1 Large - Tablet
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 45px
font-family: 'Eczar', serif
line-height: 51px
font-size: 36px
line-height: 40px
font-size: 24px
line-height: 30px
H1 Large - Mobile
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 45px
font-family: 'Eczar', serif
line-height: 51px
font-size: 36px
line-height: 40px
font-size: 24px
line-height: 30px
H1 - Desktop
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 45px
line-height: 51px
font-family: 'Eczar', serif
font-size: 36px
line-height: 40px
font-size: 24px
line-height: 30px
H1 - Tablet
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 45px
line-height: 51px
font-family: 'Eczar', serif
font-size: 36px
line-height: 40px
font-size: 24px
line-height: 30px
H1 - Mobile
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 45px
line-height: 51px
font-family: 'Eczar', serif
font-size: 36px
line-height: 40px
font-size: 24px
line-height: 30px
H2 - Desktop
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 400
font-size: 26px
line-height: 38px
font-family: 'Open Sans', sans-serif
font-size: 22px
line-height: 30px
font-size: 16px
line-height: 22px
H2 - Tablet
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 400
font-size: 26px
line-height: 38px
font-family: 'Open Sans', sans-serif
font-size: 22px
line-height: 30px
font-size: 16px
line-height: 22px
H2 - Mobile
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 400
font-size: 26px
line-height: 38px
font-family: 'Open Sans', sans-serif
font-size: 22px
line-height: 30px
font-size: 16px
line-height: 22px
H3 - Desktop
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 32px
line-height: 38px
font-family: 'Eczar', serif
font-size: 26px
line-height: 32px
font-size: 20px
line-height: 26px
H3 - Tablet
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 32px
line-height: 38px
font-family: 'Eczar', serif
font-size: 26px
line-height: 32px
font-size: 20px
line-height: 26px
H3 - Mobile
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 32px
line-height: 38px
font-family: 'Eczar', serif
font-size: 26px
line-height: 32px
font-size: 20px
line-height: 26px
H4 - Desktop
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 25px
line-height: 33px
font-family: 'Eczar', serif
font-size: 22px
line-height: 28px
font-size: 18px
line-height: 26px
H4 - Tablet
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 25px
line-height: 33px
font-family: 'Eczar', serif
font-size: 22px
line-height: 28px
font-size: 18px
line-height: 26px
H4 - Mobile
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 25px
line-height: 33px
font-family: 'Eczar', serif
font-size: 22px
line-height: 28px
font-size: 18px
line-height: 26px
H5 - Desktop
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 400
font-size: 24px
line-height: 34px
font-family: 'Open Sans', sans-serif
font-size: 20px
line-height: 28px
font-size: 17px
line-height: 23px
H5 - Tablet
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 400
font-size: 24px
line-height: 34px
font-family: 'Open Sans', sans-serif
font-size: 20px
line-height: 28px
font-size: 17px
line-height: 23px
H5 - Mobile
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 400
font-size: 24px
line-height: 34px
font-family: 'Open Sans', sans-serif
font-size: 20px
line-height: 28px
font-size: 17px
line-height: 23px
H6 - Desktop
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 16px
line-height: 22px
font-family: 'Eczar', serif
font-size: 14px
line-height: 20px
font-size: 15px
line-height: 21px
H6 - Tablet
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 16px
line-height: 22px
font-family: 'Eczar', serif
font-size: 14px
line-height: 20px
font-size: 15px
line-height: 21px
H6 - Mobile
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-weight: 700
font-size: 16px
line-height: 22px
font-family: 'Eczar', serif
font-size: 14px
line-height: 20px
font-size: 15px
line-height: 21px
Text
Die Schriftmerkmale für Kurz- und Langtexte – etwa Schriftart, Schriftgröße, Farbe oder Ähnliches – werden jenen der Headlines angepasst. Bei richtiger Anwendung ergibt sich in der Folge ein harmonisches Gesamtbild, das optisch ansprechend ist und den Leser optimal führt.
Default Text - Desktop
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-size: 18px
line-height: 28px
font-weight: 400
font-style: normal
color: #666666
font-family: 'Open Sans', sans-serif
font-size: 16px
line-height: 26px
font-size: 14px
line-height: 22px
Default Text - Tablet
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-size: 18px
line-height: 28px
font-weight: 400
font-style: normal
color: #666666
font-family: 'Open Sans', sans-serif
font-size: 16px
line-height: 26px
font-size: 14px
line-height: 22px
Default Text - Mobile
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-size: 18px
line-height: 28px
font-weight: 400
font-style: normal
color: #666666
font-family: 'Open Sans', sans-serif
font-size: 16px
line-height: 26px
font-size: 14px
line-height: 22px
Large Text - Desktop
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-size: 22px
line-height: 30px
font-size: 20px
line-height: 28px
font-size: 17px
line-height: 27px
Large Text - Tablet
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-size: 22px
line-height: 30px
font-size: 20px
line-height: 28px
font-size: 17px
line-height: 27px
Large Text - Mobile
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-size: 22px
line-height: 30px
font-size: 20px
line-height: 28px
font-size: 17px
line-height: 27px
Medium Text - Desktop
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-size: 20px
line-height: 28px
font-size: 17px
line-height: 25px
font-size: 16px
line-height: 24px
Medium Text - Tablet
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-size: 20px
line-height: 28px
font-size: 17px
line-height: 25px
font-size: 16px
line-height: 24px
Medium Text - Mobile
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-size: 20px
line-height: 28px
font-size: 17px
line-height: 25px
font-size: 16px
line-height: 24px
Small Text - Desktop
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-size: 14px
line-height: 20px
font-size: 13px
line-height: 19px
font-size: 13px
line-height: 19px
Small Text - Tablet
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-size: 14px
line-height: 20px
font-size: 13px
line-height: 19px
font-size: 13px
line-height: 19px
Small Text - Mobile
AÄÀÁBCDEÈÉFGHIÌÍJKLMNOÖÒÓPQRSTUÜÙÚVWXYZaäàábcćdeèéfghiìíjklmnoöòópqrstuüùúvwxyz123456789"'?!(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
font-size: 14px
line-height: 20px
font-size: 13px
line-height: 19px
font-size: 13px
line-height: 19px
Links
Links
BgWeb -
opacity: 1
Hover: opacity: 0.7