So präsentieren Sie Ihr Schreiben so, dass es glänzt: 3 CSS-Styling-Tricks

Veröffentlicht: 2022-03-22

Ihr Schreiben ist das Herzstück Ihres Blogs.

Inhalt ist König, oder?

Das zieht die Leute an und hält sie dazu, Ihren Blog zu lesen.

Aber ebenso wichtig ist, wie Sie Ihr Schreiben tatsächlich präsentieren. Optisch, das ist.

Ihr Inhalt mag großartig sein, aber wenn er für jemanden schwierig zu lesen ist, verlieren Sie möglicherweise mehr Leser, als Sie denken.

Schauen Sie, ich bin kein ausgebildeter Autor, aber ich bin Webdesigner und ich weiß, was gut aussieht. Und was normalerweise gut aussieht, ist nicht so sehr Dekoration und Geschmack, sondern eher, was funktioniert und was die Dinge leicht lesbar und verständlich macht.

Ich habe jahrelang die verschiedenen Möglichkeiten untersucht, Inhalte in digitaler Form anzuzeigen, daher möchte ich Ihnen einige schnelle und einfache Möglichkeiten zeigen, wie Sie aus der Sicht eines Webdesigners sicherstellen können, dass Ihre Inhalte in Ihren Blog-Beiträgen gut angezeigt werden.

Es gibt einige Möglichkeiten, wie Sie mit ein wenig CSS (Cascading Style Sheets) schnelle Styling-Anpassungen an Ihrem Blog vornehmen können, damit Sie als Autor Ihre Inhalte präsentieren und es Ihren Lesern so einfach wie möglich machen können, sie zu genießen.

Ich gebe Ihnen ein paar CSS-Swipe-Codes, die Sie zu Ihrem benutzerdefinierten Stylesheet hinzufügen und nach Ihren Wünschen bearbeiten können. Befolgen Sie die Anweisungen zum Bearbeiten des CSS in Ihrem Blog, wenn Sie nicht sicher sind, wie Sie auf das benutzerdefinierte Stylesheet Ihres Blogs zugreifen können.

Drei Tricks, um Ihre Inhalte zu gestalten, um Ihr Schreiben zu präsentieren

  1. Verschönern Sie Ihre Absätze

Um sicherzustellen, dass Ihre Absätze gut lesbar sind, hier ein paar Tipps, die Sie beachten sollten. Wir werden hier gemeinsam das Tag p (Absatz) gestalten.

  • Wählen Sie eine Schriftart, die angenehm für die Augen ist. Streben Sie eine Serifen- oder Sans-Serif-Schriftart an, keine handschriftliche.

Wählen Sie ein Gewicht, das nicht zu dünn ist. Einige sehr dünne Schriftarten sehen in bestimmten Browsern und Betriebssystemen (z. B. Mac oder PC) nicht sehr gut aus. Bitten Sie also die Leute, sie für Sie zu überprüfen, und geben Sie einen Daumen nach oben.

Wählen Sie gleichzeitig eine Schriftart, die nicht zu dick ist. Sie möchten, dass es genügend Kontrast zu fettgedrucktem Text hat.

Stellen Sie bei der Auswahl einer Schriftart sicher, dass Sie entweder eine Systemschriftart, eine Schriftart, die Sie in Ihre Blogdateien hochgeladen haben, oder eine Google-Schriftart verwenden. Ich schlage vor, eine Google-Schriftart zu verwenden, da sie kostenlos ist, die größte Vielfalt bietet und am einfachsten zu verwenden ist. Weitere Informationen finden Sie unter So verwenden Sie coole Schriftarten in Ihrem Blog.

Wenn Sie Ihre Schriftart ausgewählt haben, gehen Sie zu Ihrem benutzerdefinierten Stylesheet und fügen diesen Code hinzu:

<vor>
P {
Schriftfamilie: SCHRIFTARTNAMEN EINFÜGEN;
}
</pre>

  • Verwenden Sie eine Schriftgröße, die auf Bildschirmen jeder Größe gut lesbar ist. Überprüfen Sie Ihren Blog auf einem Telefon und stellen Sie sicher, dass der Text für müde oder ältere Augen nicht zu klein ist.

Eine gute Größe für Absätze ist normalerweise 14 bis 16 Pixel. Nicht alle Schriftarten werden in derselben Größe gleich angezeigt, also spielen Sie mit ihnen, um zu sehen, was am besten aussieht.

<vor>
P {
Schriftfamilie: SCHRIFTARTNAMEN EINFÜGEN;
Schriftgröße: 16px;
}
</pre>

  • Verwenden Sie die richtige Zeilenhöhe (Durchschuss). Die richtige Zeilenhöhe trägt auch zur Lesbarkeit bei, da sie Ihren Absätzen Raum zum Atmen gibt. Eine gute Zeilenhöhe ist 1,5, also das 1,5-fache der Textgröße (eine Zeilenhöhe von 2 wäre doppelter Zeilenabstand).

<vor>
P {
Schriftfamilie: SCHRIFTARTNAMEN EINFÜGEN;
Schriftgröße: 16px;
Zeilenhöhe: 1,5;
}
</pre>

  • Vermeiden Sie reinen schwarzen Text auf Weiß. Es ist hart für die Augen. Entscheiden Sie sich stattdessen für ein dunkles Grau (ich mag #333333) für Ihre Kopie, um den Kontrast ein wenig zu verringern.

<vor>
P {
Schriftfamilie: SCHRIFTARTNAMEN EINFÜGEN;
Schriftgröße: 16px;
Zeilenhöhe: 1,5;
Farbe: #333333;
}
</pre>

  • Vermeiden Sie zentrierte Absätze. Das Zentrieren Ihres Fließtextes sieht laienhaft aus und erschwert das Lesen. Warum? Jedes Mal, wenn sich Ihr Auge zu einer neuen Zeile bewegt, muss es sich bemühen, den Anfang der nächsten Zeile zu finden, da es sich nie an derselben Stelle befindet. Reservieren Sie die zentrierte Ausrichtung für Gedichte, Bildunterschriften oder kurze, aufmerksamkeitsstarke Texte und entscheiden Sie sich für links Ausrichtung oder Rechtfertigung Ihrer regelmäßigen Absätze. Blocksatz wird so angeordnet, dass sowohl die linke als auch die rechte Seite des Absatzes eine gerade Kante haben.

<vor>
P {
Schriftfamilie: SCHRIFTARTNAMEN EINFÜGEN;
Schriftgröße: 16px;
Zeilenhöhe: 1,5;
Farbe: #333333;
Textausrichtung: rechtfertigen;
}
</pre>

<pre>Textausrichtung: links; </pre> ist das Standardverhalten und muss nicht angegeben werden, es sei denn, Sie müssen einen vorherigen Stil überschreiben.

  • Zuletzt fügen Sie Leerzeichen hinzu. Für eine optimale Lesbarkeit sollten Sie zwischen Ihren Absätzen ausreichend Leerraum lassen. Eine gute Faustregel ist, unter jedem Absatz einen Rand hinzuzufügen, der etwa der doppelten Schriftgröße entspricht.

<vor>
P {
Schriftfamilie: SCHRIFTARTNAMEN EINFÜGEN;
Schriftgröße: 16px;
Zeilenhöhe: 1,5;
Farbe: #333333;
Textausrichtung: rechtfertigen;
Rand unten: 32px;
}
</pre>

  1. Hierarchie verwenden

Sie verwenden Hierarchie, wenn Sie Ihre Posts mit Überschriften und Unterüberschriften gliedern.

Um eine visuelle Hierarchie in Ihren Beiträgen zu erstellen, gestalten Sie Ihre Überschriften und Unterüberschriften so, dass sie leicht voneinander unterschieden werden können. Hier sind ein paar Tipps:

  • Verwenden Sie für alle Ihre Überschriften dieselbe Schriftart in unterschiedlichen Größen.
  • Verwenden Sie eine Schriftart, die leicht zu lesen ist, wie eine Serifen- oder Sans-Serif-Schrift. Sie können sich dafür entscheiden, dieselbe Schriftart wie für Ihren Fließtext in einem dickeren Gewicht zu verwenden, oder Sie können eine andere Schriftart wählen, die einen schönen Kontrast zu Ihrem Fließtext bildet.
  • Stellen Sie die Überschriften und Unterüberschriften fett oder dicker ein.
  • Verwenden Sie Typecast, um mit unterschiedlichen Schriftarten, Größen und Gewichten für Ihre Überschriften zu spielen und sie mit Ihrem Absatztext zu vergleichen.

Hier ist ein Beispiel dafür, was Sie sich für die Größenanpassung einfallen lassen können, wenn Ihre Absätze auf eine Schriftgröße von 16 Pixel eingestellt sind. Von dort würdest du dann nach oben gehen:

  • h6-Überschriften = 16px (normalerweise die gleiche Größe wie Absatztext, aber fett und in einer eigenen Zeile)
  • h5 Überschriften = 18px
  • h4 Überschriften = 22px
  • h3 Überschriften = 26px
  • h2 Überschriften = 30px
  • h1-Überschriften (Ihre Blog-Post-Titel) = 36px

Spielen Sie erneut mit Typecast, um zu sehen, was für Ihre Augen am besten aussieht. Sobald Sie sich für die Schriftarten und -größen entschieden haben, die Sie für Ihre Überschriften verwenden möchten, sollten Sie zu Ihrem benutzerdefinierten Stylesheet gehen und dieses CSS für alle Ihre Überschriften hinzufügen:

<vor>
h1, h2, h3, h4, h5, h6 {
Schriftfamilie: SCHRIFTARTNAMEN EINFÜGEN;
Schriftgröße: 36px;
Schriftdicke: fett;
}
</pre>

Als Nächstes fügen Sie einige CSS-Überschreibungen hinzu, nur um die Größe für jede Überschriftenebene zu ändern:

<vor>
h2 {
Schriftgröße: 30px;
}

h3 {
Schriftgröße: 26px;
}

h4 {
Schriftgröße: 22px;
}

h5 {
Schriftgröße: 18px;
}

h6 {
Schriftgröße: 16px;
}
</pre>

  1. Links verwenden

Bringen Sie Ihre Leser nicht zum Nachdenken! Ihre Links sollten wie Links aussehen, d. h. sie sollten völlig offensichtlich sein, dass sie angeklickt werden müssen. Hier sind einige Möglichkeiten, dies zu tun:

  • Wählen Sie eine Farbe für Ihre Links, die sich von Ihrem normalen Text abhebt.
  • Reservieren Sie eine Farbe nur für Ihre Links. Verwenden Sie dieselbe Farbe nicht für Überschriften, Unterüberschriften, Seitenleisten-Widget-Titel oder anderen Text.
  • Sie können diese Farbe jedoch für Schaltflächen verwenden, wenn Sie möchten, da es sich auch um anklickbare Elemente handelt.
  • Unterstreichen Sie keinen Text, der kein Link ist, das ist verwirrend, weil die Leute normalerweise annehmen, dass unterstrichener Text ein Link ist.

<vor>
ein {
Farbe Pink;
Textdekoration: unterstreichen;
}
</pre>

Gestalten Sie die verschiedenen Linkstatus, um Ihren Lesern zu helfen, sie als Links zu unterscheiden. Wenn sie ihr Aussehen ändern, wenn ein Benutzer mit der Maus darüber fährt, gibt dies einen zusätzlichen Hinweis darauf, dass es sich um einen aktiven Link handelt.

<vor>
a:schweben {
Farbe blau;
Textdekoration: keine;
}
</pre>

Sie können Ihre besuchten Links auch anders gestalten, um Benutzern anzuzeigen, dass sie einen bestimmten Link bereits besucht haben.

<vor>
a:besucht {
Farbe blau;
}
</pre>

Um Ihr Schreiben so zu präsentieren, dass es glänzt, sind nur ein paar einfache Änderungen erforderlich

Dies sind nur ein paar Tricks, um Ihr Schreiben zu präsentieren, um es leicht lesbar zu machen und damit Ihren Inhalten zu helfen, sich abzuheben!

Auf welche anderen Arten gestalten Sie Ihre Blog-Beiträge, damit sie für Ihre Benutzer leicht lesbar sind?

Möchten Sie mehr darüber erfahren, wie Sie CSS nutzen können, um Ihren Blog ansprechender für Ihre Leser zu gestalten und Ihr Schreiben wirklich zu präsentieren? Fantastisch! Dann würde ich mich freuen, wenn Sie an einem kostenlosen Video-Training zum Thema CSS teilnehmen würden. Bald geht es los, also melde dich jetzt an.

Bild mit freundlicher Genehmigung von Pixabay