Typographie/Schriften



H1 - Hauptüberschrift

Schriftgröße:

Zeilenhöhe:

Schriftart:

Farbe:

​45 px

42 px

Open Sans (600)

#​454545

Schriftgröße:

Zeilenhöhe:

Schriftart:

Farbe:

36 px

42 px

Open Sans (600)

#000000

Schriftgröße: 36 px

Zeilenhöhe: 42 px

Schriftart: Open Sans (600)

Farbe: #000000


H2 - Unterüberschrift

Schriftgröße:

Zeilenhöhe:

Schriftart:

Farbe:

​34 px

36 px

Open Sans (700)

#​454545

Schriftgröße:

Zeilenhöhe:

Schriftart:

Farbe:

30 px

36 px

Open Sans (700)

#000000

Schriftgröße: 30 px

Zeilenhöhe: 36 px

Schriftart: Open Sans (600)

Farbe: #000000


H3 - Zwischenüberschrift

Schriftgröße:

Zeilenhöhe:

Schriftart:

Farbe:

​30 px

30 px

Open Sans (700)

#​454545

Schriftgröße:

Zeilenhöhe:

Schriftart:

Farbe:

24 px

30 px

Open Sans (600)

#000000

Schriftgröße: 24 px

Zeilenhöhe: 30 px

Schriftart: Open Sans (600)

Farbe: #000000


H4 - Kleine Überschrift

Schriftgröße:

Zeilenhöhe:

Schriftart:

Farbe:

24 px

30 px

Open Sans

#​454545

Schriftgröße:

Zeilenhöhe:

Schriftart:

Farbe:

24 px

30 px

Open Sans

#000000

Schriftgröße: 24 px

Zeilenhöhe: 30 px

Schriftart: Open Sans

Farbe: #000000


Paragraph/Lauftext

Schriftgröße:

Zeilenhöhe:

Schriftart:

Farbe:

20 px

30 px

Open Sans

#​454545

Schriftgröße:

Zeilenhöhe:

Schriftart:

Farbe:

20 px

30 px

Open Sans

#606060

Schriftgröße: 20 px

Zeilenhöhe: 30 px

Schriftart: Open Sans

Farbe: #606060


Textdekoration:

Farbe:

Unterstrichen

#c8493e

Textdekoration:

Farbe:

Unterstrichen

#c8493e

Textdekoration: Unterstrichen

Farbe: #c8493e


Farben und Größen


Farbakzente:

Hintergrundfarbe (Inhalte):

Hintergrundfarbe (Boxed-Layout):

Topbar (Farbe):

Topbar (Größe):

Fußzeile (Farbe Hintergrund):

Fußzeile (Farbe Schrift):

#c8493e

#e9e9e9

#f7f7f7

-

-

#4f5b69

#ffffff

Bildergrößen und Formate


Gilt für die Seitengröße von 1200 px und 16/9-Format

Bildgröße volle Spalte - 1/1

Bildgröße halbe Spalte - 1/2

Bildgröße drittel Spalte - 1/3

Bildgröße viertel Spalte - 1/4

Bildgröße sechstel Spalte - 1/6

Bildgröße Full-Width

​Abstände (Standard)


Erster Inhalt auf Seite:

​Padding Oben: 15 px
​Padding Unten: 15 px​​​​

Margin Oben: -50 px
Margin Unten: 10 px

​Letzter Inhalt auf Seite:

​Padding Oben: 15 px
​Padding Unten: 15 px​​​​

Margin Oben: 10 px
Margin Unten: -50 px

Überschrift Groß:

​Padding Oben: 1 px
​Padding Unten: 1 px​​​​

Margin Oben: 20 px
Margin Unten: 50 px

​Oberste Colum:

​Padding Oben: 15 px
​Padding Unten: 15 px​​​​

Margin Oben: 10 px
Margin Unten: 10 px

​​Alle Inhalte in Columns:

​Padding Oben: 0 px
​Padding Unten: 0 px​​​​

Margin Oben: 0 px
Margin Unten: 0 px

​​​1/1-Content der keine Colum ist:

​Padding Oben: 15 px
​Padding Unten: 15 px​​​​

Margin Oben: 10 px
Margin Unten: 10 px

Beispiel der Textgestaltung


H1 - Überschrift

Paragraph/Lauftext - sit amet, consetetur sadipscing elitr, sed diam Ich bin ein Link eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

H2 - Unterüberschrift


H3 - Zwischenüberschrift

Paragraph/Lauftext - consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

H4 - Kleine Überschrift

Ich bin auch ein Link sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

H2 - Unterüberschrift


Scham, schlechtes Gewissen & Co.
Scham, schlechtes Gewissen & Co. ist der Titel des heutigen Blogbeitrages.Das hat den Grund, dass diese Themen gerade sowas von[...]
Bestellung ans Universum
Wann hast Du das letzte Mal eine Bestellung ans Universum geschickt?Und denkst Du, dass die Bestellungen nur raus gehen, wenn[...]
„Ich will dir doch nur helfen“
Wie findest Du es, wenn plötzlich jemand in Deinem Wohnzimmer steht, ohne vorher geklinkelt zu haben und ​Du die Tür[...]
Wann brennt ein Mensch aus?
>> MEINE GEDANKEN ZU BURN OUT <<Was heißt es denn eigentlich, auszubrennen? Wann kann denn überhaupt jemand ausbrennen?Wir alle haben[...]
Das machst Du doch mit links!
Hast Du diesen Satz oder ähnliche früher auch gehört? Oder begegnet er Dir heute noch?Was macht das mit Dir?Fühl mal[...]
Wie nimmst Du Deine Welt wahr?
Wie nimmst Du Deine Welt wahr? Hast Du Dir schon einmal ganz bewusst Zeit genommen, um Situationen in Deinen Zellen[...]