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

#2196f3

Textdekoration:

Farbe:

Unterstrichen

#2196f3

Textdekoration: Unterstrichen

Farbe: #2196f3


Farben und Größen


Farbakzente:

Hintergrundfarbe (Inhalte):

Hintergrundfarbe (Boxed-Layout):

Topbar (Farbe):

Topbar (Größe):

Fußzeile (Farbe Hintergrund):

Fußzeile (Farbe Schrift):

#2196f3

#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


YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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


Follow-Up Titel
Überschrift Follow-Up-Inhalt im BlogUnterüberschrift - Follow-Up-ContentWillkommen zur deutschen Version von WordPress. Dies ist der erste Beitrag. Du kannst ihn bearbeiten[...]
Beispiel – Blog-Beitrag
Überschrift 1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, Sed diam nonumy eirmod tempor invidunt ut labore et dolore[...]