Allgemein
Es gibt diverse Ansätze für das CSS, die geändert werden sollten, um vor allem die Lesbarkeit zu verbessern. Ich stelle z.B. meistens fest, dass Titel und Absätze ineinander gepresst sind. Das heisst, kaum Abstand zwischen den Titeln und den Absätzen.
Ein Grafiker hat mir mal an Hand einer Visitenkarte erklärt, weniger ist mehr. Die Karte nicht mit möglichst viel Farbe voll kleckern, sondern auch Freiräume lassen. Name und Adresse nicht möglichst Platzfüllend auf die Karte pressen. Das Wichtigste bei einer Visitenkarte ist der Name, der soll ins Auge stechen. Alle anderen Angaben dürfen ruhig so klein sein, dass sie erst beim 2. Hinsehen auffallen.
Überschriften und Absätze
Auch Webseiten sind einfacher lesbar, wenn nicht alles so ineinander gepresst ist. Der Abstand zwischen einem Absatz und der nächsten Überschrift sollte grösser sein als zwischen zwei Absätzen.
Ich bevorzuge für Titel eine Schrift die sich deutlich von der Schrift für den Absatz unterscheidet. Man soll eine Überschrift nicht nur durch ihre Grösse erkennen, sondern auch an der Schriftart.
Wie gross sollen die Titel sein? In Beiträgen und Seiten stehen die Überschriften H1 bis H6 zur Verfügung. Dazu kommt die Überschrift der Beiträge und Seiten. Diese sollten immer die grösste Schriftgrösse haben. H1 sollte also kleiner sein.
Für Beiträge und Seiten reichen in der Regel H1 bis H3, wobei H3 immer noch grösser als der Textabsatz sein sollte.
Einzüge
Im Block-Editor habe ich keine Möglichkeit für Texteinzüge gefunden, so wie man es aus dem Classic-Editor und Word/Pages kennt. Diese Funktion scheint es nicht zu geben. Da man jedoch den Blöcken zusätzliche CSS-Klassen zuweisen kann, habe ich dafür im Customizer 3 Klassen erstellt, mit Einzug 15, 30 und 45 Pixel. Ein Vorteil hat das Ganze gegenüber der klassischen Vorgehensweise, ich kann die Einzüge frei definieren.
Beispiele
Im Folgenden ein paar Beispiele für mögliche Anpassungen. Die Klassennamen können je nach Theme varieren.
/* Text Absätze in Beiträgen und Seiten vergrössern */
.entry-content.clearfix {
font-size: 1.2em;}
/* allgemeiner Text */
body,input,textarea,article {
color: #1d1d1d;
font: 0.95em 'Montserrat', sans-serif;
font-weight: 400;
line-height: 24px;
word-wrap: break-word;
-ms-word-wrap: break-word;}
/* Schriftname für Titelüberschriften */
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-family: 'Titan One', sans-serif;
color: #555;
text-transform: none;}
/* Seitentitel / Beitragstitel */
.entry-title {
font-size: 3em;
font-weight: normal;
font-family: 'Titan One', sans-serif;
color: #555;
padding-left: 2.5%;}
/* Titel Kategorie */
h3.page-title{
font-size: 3em;
font-family: 'Titan One', sans-serif;}
/* Titelüberschriften */
h1 {
margin-top: 20px;
font-size: 2.2em;
font-family: 'Candal', sans-serif;}
h2 {
margin-top: 20px;
font-size: 2em;
font-family: 'Candal', sans-serif;}
h3 {
margin-top: 20px;
font-size: 1.5em;
font-family: 'Candal', sans-serif;}
h4 {
margin-top: 20px;
font-size: 1em;
font-family: 'Candal', sans-serif;}
h5 {
margin-top: 20px;
font-size: 0.8em;
font-family: 'Candal', sans-serif;}
h6 {
margin-top: 20px;
font-size: 0.5em;
font-family: 'Candal', sans-serif;}
/* Titelüberschrift Widget */
.widget h3 {
margin-top: 0px;
font-family: 'Candal', sans-serif;
font-weight: bold;}
/* Text mit fester Weite */
pre,code,kbd {
font-family: "Courier 10 Pitch",Courier,monospace;
font-size: 14px;
line-height: 19px;
background-color: #F9F9F9;
}
/* Zitat */
blockquote {
font-family: Noto Serif TC, serif;
font-style: italic;
font-weight: normal;
padding: 20px;
background: #fff;
border-left: 4px solid #bd2a2b;
margin-bottom: 20px;
background-color: #F9F9F9;
}
/* Initialbuchstabe Absatz */
#container .has-drop-cap:first-letter {
font-size: 2em;
color: red;
font-family: Times;
}
/* Gutenberg, Einzüge von links */
.einzug-1{
margin-left: 15px;
}
.einzug-2{
margin-left: 30px;
}
.einzug-3{
margin-left: 45px;
}