Zunächst alle Schriftstyle direkt untereinander:

H1 für Webseiten-Untertitel

H2 Erste Überschrift-Ebene für den Webseiten-Inhalt

H3 Zweite Überschrift-Ebene für den Webseiten-Inhalt

H4 Dritte und letzte Überschrift-Ebene für den Webseiten-Inhalt

H5 sollte nicht genutzt werden

H6 ebenfalls möglichst nicht nutzen

Standard-Text – also wie ein normaler Absatz aussieht

Überschrift über kleinem Text = Standard-Schriftgröße+FETT-Druck

Kleiner Text = Schriftgröße „klein“

Kleinster Text – „Kleingedrucktes“ = Schriftgröße „sehr klein“

Jetzt Fließtext nach Überschrift – zunächst für H2

Hier kommt ein Beispieltext über mehrere Zeilen, um die Abstände und Größenunterschieden bei verschiedenen Bildschirmeinstellungen betrachten zu können …

dann für H3

Hier kommt ein Beispieltext über mehrere Zeilen, um die Abstände und Größenunterschieden bei verschiedenen Bildschirmeinstellungen betrachten zu können …

und zuletzt für H4

Hier kommt ein Beispieltext über mehrere Zeilen, um die Abstände und Größenunterschieden bei verschiedenen Bildschirmeinstellungen betrachten zu können …

Konzept zu den Überschriften

Website/Homepage-Titel nutze ich seltenst, erscheint i.d.R. nur auf der Startseite und dort in der Regel als Bild – so auch beim Friedensvogel. Falls es Website/Homepage-Titel u./o. -Untertitel als HTML-Text (statt Bild) geben soll, dann wird dieser nicht als H1- oder H2-Tag kodiert! => Webseiten-Titel kann oberste Überschriften-Ebene H1 haben – so auch im Theme kodiert 🙂 Habe ich im selben Schriftstil wie H1 festgelegt.

Default für Überschriften im Content ist in Gutenberg-Editor auch H2 – das passt wunderbar 🙂

Meine vordefinierten Farben

orange = #f7920e (Überschrift „Aktuelles“)

rot = ff0000 – T in ZukunftsTRäume

dunkelrot = #c9211e – meine Lieblingsfarbe

grün = 259d0d = rgb(37, 157, 13)

hellblau = #0b6bbf

blau = #0000ff – nur bei ZukunftsTRäume genutzt!

dunkelblau = #000080

hellviolett = #ab3fba

dunkelviolett = #091599

weiß = #ffffff

hellgrau = #919191

dunkelgrau = #737373

schwarz = #242424

Test Hintergrundfarbe rot bei Standard-Textfarbe dunkelgrau
schlecht lesbar, da schlechter Farbkontrast
WordPress warnt automatisch davor mit Info „Dies Farbkombinattion ist unter Umständen für manche Menschen schwer lesbar. …“
Beispielsweise weiß auf weiß würde WordPress gar nicht zulassen