Zeilenabstände und Absatzgestaltung überdenken

[springers54]

https://reiki-lernen.de/mein-weg-zum-schamanismus Beim Vergleich der alten und neuen Seite fällt folgendes auf: links alte Seite, rechts neue

• [x] die Schriftart des normalen Absatzes ist größer geworden
• [x] der Zeilenabstand ist größer geworden
• [x] Abstände vor und nach den Überschriften passen nicht

Ich hätte schon gerne vor einer Überschrift etwas mehr Abstand als nach einer überschrift, so dass die Überschrift zu dem Absatz gehört und nicht genau in der Mitte hängt, wie es momentan der Fall ist. Die Lesebarkeit der alten Seite fühlt sich im Absatz für mich stimmiger an als auf der neuen Seite.

[joergsteinhauer]

Habe es soweit angepasst, aber es ist etwas ungünstig, dass das erst jetzt auffällt. Denn der Zeilenabstand ist global gesetzt, für alle Elemente. D.h., ich habe den Zeilenabstand angepasst, das hat sich aber dabei auf alle Elemente widergespiegelt. Es kann also vorkommen, dass hier und da der Durchschuss nicht groß genug ist - wenn was auffällt, bitte Bescheid geben, ich muss es dann für jedes Element einzeln anpassen. Sollte sich aber in Grenzen halten.

Zudem war die Schriftgröße die gleiche, wie im alten System - 1em = 16px. Es war wohl einfach visuell wahrnehmbar, geschuldet dem Zeilenabstand und der Schriftfarbe.

[springers54]

Also es ist nicht die gleiche Schriftgröße, denn im alten System ist die nicht 1 em, sondern 1 rem. Das sieht man auch, wenn man lange Texte hat, sie brauchen auf der neuen Seite einfach mehr Platz.

Wenn du mit dem Inspektor schaust, ist es im alten System:

Im neuen System:

Auf der neuen Seite sind alle Überschriften in Kapitälchen, wirken damit noch wuchtiger. Können wir uns so verständigen:

• [x] H1 in Kapitälchen
• [x] alle anderen H-Überschriften normal
• [x] Schriftfarbe und Absatzgröße des alten Systems erscheinen uns immer noch angenehmer als jetzt im neuen und sollten doch als Vorlage dienen

[joergsteinhauer]

Naja, nicht ganz korrekt.

Die Schriftgröße ist die selbe:

• 1rem = 16px. REM bezieht sich auf das ROOT Element, also HTML. Genau da kommen die 16px her.
• 1em sind in diesem Fall ebenfalls 16px, da im body 1em definiert ist und die Schriftgröße in keinem weiteren Kindelement überschrieben wird.

Wenn du nachschauen willst, wie die Elemente wirklich gerendert sind, schaue bitte im "Computed" bzw. "Berechnet" Tab:

zusätzlich hier noch ein direkter Overlay-Vergleich. Das Einzige, was sich unterscheidet, sind ein paar Abstände und der Gedankenstrich:

Weiterhin ist die Breite des Content-Bereichs im alten System 770px, im neuen: 780px: Daher wird der Text manchmal auch anders umgebrochen.