Das Webwork-Portal

Textformatierung mit CSS


Gute Textformatierung ist für einen Artikel sehr wichtig.
Denn ein wenig formatierter Text ist schlecht zu lesen und wird folgedessen auch einfach nicht gelesen.
 
Wie lassen sich also Texte attraktiv gestalten?
 
Dafür gibt es eine Reihe an CSS Befehlen. Man kann die Schriftfarbe, die Schriftgröße, den Zeilenabstand und noch einiges mehr beeinflussen.
 

Befehlsübersicht

Hier eine Liste der Befehle, die ich am häufigsten bei meiner Textformatierung benutze.

color: #666666;
font-size: 12px;
font-weight: normal;
font-style: italic;
font-family: Arial, Tahoma, Verdana, sans-serif;
text-decoration: none;

 

Textfarbe

Die Farbe eines Textes wird mit dem Befehl color definiert. Der Farbwert wird als Hexadezimalcode (#000000 -> schwarz) angegeben. Alternativ kann man auch den Farbnamen angeben (black – wird so nicht mehr benutzt).
 

Schriftgröße

In Texten ist die Schriftgröße ein wichtiger Aspekt bei der Textformatierung. Als Minimum bei einem Fließtext sollte eine Schriftgröße von 12px gewählt werden. Alles darunter ist deutlich zu klein zum entspannten Lesen.

Als Angabe der Schriftgröße können zwei verschiedene Einheiten angegeben werden:
 
Pixel (px)
Ein Pixel ist die kleinste Einheit an dem Bildschirm. Pixel ist eine statische Einheit.
 
em
Die Einheit em hingegen ist flexibel und immer relativ zu dem im Stylesheet definierten Schriftgröße.
Du hast z.B.: in deiner Stylesheet Datei im Body Tag die Schriftgröße auf 12px gesetzt. Wenn deine Überschrift aber 24px groß sein soll, sind das 2em!
12px = 1em = 100%
24px = 2em = 200%
 
Um das nicht im Kopf umzurechnen, gibt es eine tolle Internetseite.
Auf PXtoEM werden die Größen umgerechnet.
 

Screenshot PXtoEM

Screenshot PXtoEM


 

Schriftstärke

Die Schriftstärke lässt sich mit dem Befehl font-weight verändern. Typische Werte hierfür sind bold, bolder, lighter und normal.
 

Schriftstil

Mit font-style kann der Schriftstil einer Schrift bestimmt werden. Folgende Angaben sind dabei möglich:

font-style: italic;
font-style: normal;

 

Schriftart

Zu den Schriftarten gehören z.B.: Arial, Tahoma, Verdana usw. Schriftfamilien wie sans-serif usw. gehören ebenfalls dazu.
Mit font-family lässt sich also die Schriftart und Schriftfamilie festlegen.

font-family: Arial, Tahoma, Verdana, sans-serif

Mit diesem Befehl wird nun primär die Schriftart Arial bevorzugt. Ist diese auf dem Computer nicht vorhanden wird Tahoma ausgewählt. Ist diese ebenfalls nicht vorhanden wird auf Verdana zurückgegriffen. Die Schriftfamilie ist sans-serif (ohne Serifen), welche für Text auf dem Bildschirm übrigens besser zu lesen ist.
 

Textdekoration

Mit dem Befehl text-decoration kann man den Text lediglich unter, -über oder durchstreichen.

text-decoration: underline;
text-decoration: overline;
text-decoration: line-trough;
text-decoration: none;

 

CSS-Eigenschaften in der Referenz von W3Schools

Screenshot CSS Referenz von W3Schools

Screenshot CSS Referenz von W3Schools


 
Um die Übersetzungsfunktion auf W3Schools einzusetzen, auf “TRANSLATE” klicken und die entsprechende Sprache auswählen:
 
Screenshot TRANSLATE W3Schools

Screenshot TRANSLATE W3Schools

Screenshot Sprachauswahl

Screenshot Sprachauswahl


 

Dieser Artikel ist in Zusammenarbeit mit Achim Rolle entstanden.

Webschau RSS-Feed Webschau bei Twitter Webschau bei Google Plus

Lesetipps:

  1. Optimieren mit dem CSS-Compressor
  2. Farbverlauf mit dem CSS-Gradient Generator erstellen
  3. Texte mit CSStxt gestalten
  4. CSS-Menü per Generator erstellen
Twittern
Sitemap