Schriftarten (Schriftfamilien): font-family
(Online-Link: CSS 4 You: Eigenschaften > Schrift > font-family)

Hintergrundinformationen, warum es Schriftfamilien heißt, warum man Listen angibt, was Generische Schriften sind und warum Anführungszeichen verwendet.

Typische CSS-Deklarationen sind:

font-family: Arial, Helvetica, sans-serif;
oder
font-family: "Times New Roman", Times, serif;
oder
font-family: "Courier New", Courier, monospace;
oder
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
oder
font-family: Georgia, "Times New Roman", Times, serif;

Jeder Browser probiert von links beginnend, ob eine Schrift mit diesem Namen auf dem Computer installiert ist. Falls sie es ist, wird der Text in dieser Schrift dargestellt, falls nicht wird die nächste Schrift rechts davon probiert, und so weiter.

Die letzte Schrift in der Liste (typischerweise sans-serif, serif oder monospace) ist eine Generische Schrift, die kann jeder Browser richtig darstellen.

Besteht der Name der Schrift aus mehr als einem Wort, muss er unter Anführungszeichen gesetzt werden.

Wenn Du eine ausgefallene Schrift verwenden möchtest, schreib ihren Namen als erste in die Liste. Da die Wahrscheinlichkeit hoch ist, dass diese Schrift nicht am Computer des Benutzers installiert ist, schreib danach den Namen einer sehr ähnlichen Schrift die üblicher ist, in die Liste. Dabei kannst du mehrere Alternativen eintragen. Als letzte trage eine Generischen Schriften ein. Wenn du Glück hast, wird deine Website mit der gewünschten Schrift dargestellt, oder aber mit einer der ähnlichen Schriften. Stell aber sicher, dass deine Website auch noch mit der letzten Schrift gut aussieht.

Schriftgröße: font-size
(Online-Link: CSS 4 You: Eigenschaften > Schrift > font-size)

Schriftgrößen werden meistens in Pixel (z.B. 12px) angegeben. Wie groß ein Pixel wirklich ist, hängt von Computer des Benutzers ab. Wie groß ist sein Bildschirm und welche Auflösung verwendet er. Wenn man die Website für den Benutzer flexibel gestalten möchte, verwendet man nur die Werte: xx-small, x-small, small, medium, large, x-large, xx-large. Wie groß dann die Schrift ist, kann der Benutzer dann im Browser einstellen (falls er weiß wo!).
Möchtest du die Größe einer Überschrift relativ zum Text definieren, dann machst du es entweder mit Prozenten oder "em"s (z.B. um die Hälfte größer: 150% oder 1.5em ).

Schriftgewicht: font-weight
(Online-Link: CSS 4 You: Eigenschaften > Schrift > font-weight)

Sicher funktionieren nur die Werte "bold" und "normal". Alle anderen werden von manchen Browsern ignoriert.

Schriftstil: font-style
(Online-Link: CSS 4 You: Eigenschaften > Schrift > font-style)

Die Schrift kann entweder "kursiv (italic oder oblique)" oder "normal (normal)" sein

Kapitälchen: font-variant
(Online-Link: CSS 4 You: Eigenschaften > Schrift > font-variant)

Bei Kapitälchen (small-caps) werden nur Großbuchstaben verwendet, aber kleingeschriebenes wird nur in der Größe von Kleinbuchstaben dargestellt. Dies sieht besonders bei Überschriften gut aus:

Kapitälchen als Überschrift verwendet

Großschreibung: text-transform
(Online-Link: CSS 4 You: Eigenschaften > Text > text-transform)

"text-transform" verändert die Groß-/Kleinschreibung als Formatierung. Das heißt, man tippt die Wörter ganz normal in Groß- und Kleinbuchstaben ein. Dann kann man z.B. Überschriften mit der CSS-Regel "h2 {text-transform: uppercase ;}" als Großbuchstaben darstellen lassen:
Diese Wörter wurden als Kleinbuchstaben eingetippt.
Der Vorteil gegenüber dem Eintippen von Großbuchstaben ist, dass man die Formatierung nur durch ändern dieser einen Regel für die ganze Website ändern kann, z.B. auf "h2 {text-transform: capitalize ;}". Dann beginnen in den Überschriften alle Wörter mit einem Großbuchstaben:
Marillen und Pfirsiche zählen wie Zwetschken zum Steinobst.

Textdekoration: text-decoration
(Online-Link: CSS 4 You: Eigenschaften > Text > text-decoration)

Mit "text-decoration" kann man unter, über oder auch durch den Text Linien ziehen. man kann Text auch blinken lassen, aber bitte verwendet es nicht.
Man kann auch mit "text-decoration: none" Unterstreichungen ausschalten. Dies verwendet man z.B. bei Hyperlinks in der Navigation, wenn die einzelnen Menüpunkte nicht wie Hyperlinks aussehen und daher auch nicht unterschrichen sein sollen.

Vordergrund- / Textfarbe: color
(Online-Link: CSS 4 You: Eigenschaften > Farben > color)

Bestimmt die Vordergrundfarbe eines Elementes. Das ist bei Absätzen und Überschriften die Textfarbe. Mit dunklen Farben kann man die Überschriften gut aber auch dezent vom (normalen) Fließtext abheben.

Überschrift
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Überschrift: #006600
Text: #003300

Zeilenhöhe: line-height
(Online-Link: CSS 4 You: Eigenschaften > Text > line-height)

Texte am Bildschirm sind meist besser lesbar wenn man die Zeilenhöhe etwas erhöht: Standardwert (Initialwert):1.2em.

Je länger die Zeilen sind, desto größer sollte auch die Zeilenhöhe werden.

(ev. später: vertical-align)

Horizontale Ausrichtung: text-align
(Online-Link: CSS 4 You: Eigenschaften > Text > text-align)

Hier kann man links- und rechtsbündig einstellen aber auch Blocksatz und zentriert.

Texteinrückung: text-indent
(Online-Link: CSS 4 You: Eigenschaften > Text > text-indent)

"text-indent" bestimmt den Einzug der ersten Zeile eines Absatzes. Positive Werte verschieben den Text nach rechts, negative nach links. Möchte man ganze Absätze oder Listen einrücken (links oder auch rechts), so verwendet man dafür entweder "padding" oder "margin".

(ev. später: white-space)

Wortabstand: word-spacing
(Online-Link: CSS 4 You: Eigenschaften > Text > word-spacing)

Hier kann man den Abstand zwischen den Wörten vergrößern aber auch den Abstand zwischen den Wörten verringern.

Zeichenabstand: letter-spacing
(Online-Link: CSS 4 You: Eigenschaften > Text > letter-spacing)

Hier kann man den Abstand zwischen den Buchstaben vergrößern aber auch verringern .
In Verbindung mit Schriftfamilie, Schriftgröße und Zeilenabstand können interessante Effekte erzielt werden.