Fonts
Wir nutzen zwei Fonts: Proxima Nova Semibold für Headlines und Inter für Fließtexte.
Proxima Nova, Semibold
The quick brown fox jumps over the lazy dog.
Inter, Regular
The quick brown fox jumps over the lazy dog.
Digital Brand Design
Typografie
Headlines
Es gibt 6 Headline-Größen mit festen Abstufungen. Halte dich an die hier gezeigten Werte.
Title Huge, Beispiel: 112px, Line-Height 100%
The quick brown fox jumps over the lazy dog.
Title Hero, 78,57% von Title Huge, Beispiel: 88px, Line-Height 100%
The quick brown fox jumps over the lazy dog.
Title Page, 64,29% von Title Huge, Beispiel: 72px, Line-Height 100%
The quick brown fox jumps over the lazy dog.
Title Module, 50% von Title Huge, Beispiel: 56px, Line-Height 100%
The quick brown fox jumps over the lazy dog.
Heading, 42,86% von Title Huge, Beispiel: 48px, Line-Height 100%
The quick brown fox jumps over the lazy dog.
Subheading, 32,15% von Title Huge, Beispiel: 36px, Line-Height 100%
The quick brown fox jumps over the lazy dog.
Body Text
Body Text hat vier Ausprägungen. Für einzeilige Textfelder wie Buttons gelten die Vorgaben der Single Line.
Body Large, Beispiel: 24px, Line-Height 150%
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Body Medium, 83,33% der Large, Beispiel: 20px, Line-Height 150%
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Body Small, 66,67% der Large, Beispiel: 16px, Line-Height 150%
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Body Tiny, 50% der Large, Beispiel: 12px, Line-Height 150%
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Single Line Medium, Beispiel: 20px, Line-Height 125%
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Single Line Small, Beispiel: 16px, Line-Height 125%
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Kombinationen
Die Schriftkombination richtet sich immer nach der Headlinegröße. Die Beispiele unten zeigen dir die passenden Kombinationen.
Single Line Medium Strong, Title Huge, Body Large
Container-Vorlagen
Mit wenigen Klicks zur laufenden Anwendung
Beschleunige dein Business mit über 50 fertigen Vorlagen wie Hermes Agent oder n8n, souverän betrieben in Deutschland.
Single Line Medium Strong, Title Hero, Body Large
Container-Vorlagen
Mit wenigen Klicks zur laufenden Anwendung
Beschleunige dein Business mit über 50 fertigen Vorlagen wie Hermes Agent oder n8n, souverän betrieben in Deutschland.
Single Line Medium Strong, Title Page, Body Large
Container-Vorlagen
Mit wenigen Klicks zur laufenden Anwendung
Beschleunige dein Business mit über 50 fertigen Vorlagen wie Hermes Agent oder n8n, souverän betrieben in Deutschland.
Single Line Small Strong, Title Module, Body Medium
Container-Vorlagen
Mit wenigen Klicks zur laufenden Anwendung
Beschleunige dein Business mit über 50 fertigen Vorlagen wie Hermes Agent oder n8n, souverän betrieben in Deutschland.
Single Line Small Strong, Heading, Body Medium
Container-Vorlagen
Mit wenigen Klicks zur laufenden Anwendung
Beschleunige dein Business mit über 50 fertigen Vorlagen wie Hermes Agent oder n8n, souverän betrieben in Deutschland.
Single Line Small Strong, Subheading, Body Small
Container-Vorlagen
Mit wenigen Klicks zur laufenden Anwendung
Beschleunige dein Business mit über 50 fertigen Vorlagen wie Hermes Agent oder n8n, souverän betrieben in Deutschland.
Farbgebrauch
Bei Schrift nutzen wir immer nur zwei Farben: Primary als Standardfarbe und Highlight, wenn wir bestimmte Aussagen hervorheben wollen. Highlight ersetzt sozusagen das Fettsetzen einzelner Wörter.
Light
Container-Vorlagen
Mit wenigen Klicks zur laufenden Anwendung
Beschleunige dein Business mit über 50 fertigen Vorlagen wie Hermes Agent oder n8n, souverän betrieben in Deutschland.
Primary
#000000 64%0, 0, 0, 64
Highlight
#1D1E1F29, 30, 31
Dark
Container-Vorlagen
Mit wenigen Klicks zur laufenden Anwendung
Beschleunige dein Business mit über 50 fertigen Vorlagen wie Hermes Agent oder n8n, souverän betrieben in Deutschland.
Primary
#FFFFFF 64%255, 255, 255, 64
Highlight
#FFFFFF255, 255, 255
Fehlgebrauch
Verändere Schriften und Kombinationen nicht, so bleibt der Look einheitlich.
Lorem ipsum dolor sit amet consectetur. Egestas sed faucibus digniss
Nutze Headlines nicht als Fließtext.
Lorem ipsum dolor sit amet consectetur. Egestas sed faucibus digniss
Verringere den Zeichenabstand nicht.
Lorem ipsum dolor sit amet consectetur. Egestas sed
Erhöhe den Zeichenabstand nicht.
Lorem ipsum
Lorem ipsumLorem ipsum
Tausche die Kombinationen nicht.
Baue keine neuen Schriften ein.
Lorem ipsum dolor sit amet consectetur. Rutrum semper integer mi vulputate pulvinar vitae. Amet pretium augue euismod luctus vitae nunc. Urna viverra dui suscipit sit nibh lectus amet. Nibh enim commodo at nullam purus ornare id cursus. Mauris massa consequat enim aliquam amet. Morbi scelerisque eget fringilla commodo mi accumsan.
Nutze keine Großbuchstaben als Text oder Headline.