Definitionen für Schriften und Text

Schriftformate

Schriftfamilien font-family

Generische Schriftarten sollten als letzte Angabe einer Zuweisung an font-family notiert werden.

font-family: Arial, Helvetica, Sans-Serif;

serif eine Schriftart mit Serifen,
sans-serif eine Schriftart ohne Serifen,
monospace eine Schriftart mit dicktengleichen Zeichen,
fantasy = eine Schriftart für ungewöhnliche Schrift.

Schriftgröße font-size

Schriftgrössen können in Pixel als fixe Werte, in EM oder % definiert werden.
1EM = 100% = Voreinstellung im Browser.

font-size:16px; 
font-size:1em;
font-size:100%; 

Schriftstärke font-weight

normal Normal
bold Fett
bolder Extra fett
lighter Extra dünn
100,200,300,400,500,600,700,800,900
Werte von extra dünn bis extra fett. Vorausgesetzt die installierte Schriftart unterstützt diese Abstufung.
Inherit erbt den Wert des Elternelementes

font-weight:bold;

Schriftstile font-style

normal Standart Wert
italic stellt die Schrift schräg dar
inherit erbt den Wert des Elternelementes

Schriftfarbe color / Hintergrundfarbe background-color

Farbnamen background-color: red;
Hexadecimal background-color: #fff;
RGB (red, green, blu)  background-color: rgb(255,255,255);

Wortlauf

Buchstabenabstand letter-spacing

Der Abstand zwischen den Buchstaben heisst letter-spacing und kann in Pixeln oder EM angegeben werden.

Normales Spacing ist hier zu sehen
ABCDEFGHIKLMNOPQRSTUVW

p{ letter-spacing: normal; }

Ein besonders luftiger Wort abstand.
ABCDEFGHIKLMNOPQRSTUVW

.luftig { letter-spacing: 15px }

Wortabstand word-spacing

Der Abstand zwischen den Wörtern heisst word-spacing. Negative Werte sind möglich.

Normales Spacing, default Einstellung.

p { word-spacing: normal }

Ein besonders riesiger Wort Abstand.

.word { word-spacing: 25px }

Textlauf

Zeilenhöhe line-height

Die Zeilenhöhe (Zeilendurchschuss) wird mit line-height angegeben. Line-height verbessert die Lesbarkeit von Texten. WICHTIG line-height wird vererbt, deshalb nie im body Tag angeben, p-Tag oder h1-Tag haben nie die selbe Zeilenhöhe.  Bei allen Angaben sind auch negative Werte möglich.

Inhaltsleer
Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit und habe doch eine Bitte: Handeln Sie Sinn stiftend für meine Existenz und lesen Sie mich.
Quelle: Christian Beckmann / Spiegel Online

p { line-height: normal; }

Inhaltsleer
Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit und habe doch eine Bitte: Handeln Sie Sinn stiftend für meine Existenz und lesen Sie mich.
Quelle: Christian Beckmann / Spiegel Online

.hoch{ line-height: 2em; }

Textauszeichnungen

Text Decoration text-decoration

text-decoration Werte: underline | overline | line-through | none

Dieses Element ist überstrichen.

.overline { text-decoration: overline; }

Das hier ist durchgestrichen.

.line-through { text-decoration: line-through; }

(*^_^*)/~~

.blink { text-decoration: blink; }

Hier ist ein Link der unterstrichen ist.

a.unterstrichen { text-decoration: underline; }

Text Transform text-transform

Mit text-transform wird festlegt, ob ein Text (unabhängig von der Notation im Quelltext) groß- oder kleingeschrieben wird. Werte: uppercase | lowercase | capitalize

egal was in der source steht, ausgegeben wird dieser Text gross

.uppercase { text-transform: uppercase; }  

EGAL was in der source steht, ausgegeben wird dieser Text klein

.lowercase { text-transform: lowercase; }

egal was in der source steht, ausgegeben wird dieser Text capitalize

.capitalize  { text-transform: capitalize ; }

Text Ausrichtung

Horizontale Ausrichtung text-align

Die horizontale Text - Ausrichtung im Absatz heisst text-align. Absätze können zentriert,  links- oder rechtsbündig ausgerichtet werden.
Werte: left | right | center | justify

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext

 p.zentriert { text-align: center; }

Vertikale Ausrichtung vertical-align

Mit der Eigenschaft vertical-align lassen sich Abschnitte auch vertikal ausrichten. Dies kann z. B. innerhalb von Tabellenzellen verwendet werden.

Werte: top (oben) | middle (mittig) | bottom (untenbündig) | baseline (an der Basislinie) | sub (tiefergestellt) | super (höhergestellt).

.menu { vertical-align:top; }

Textumbruch white-space

Der CSS white-space kann das Zeilenumbruchverhalten von Textabschnitten bestimmen. Ein Zeilenumbruch wird unterdrückt.
Werte: nowrap (kein automatischer Zeilenumbruch),

.nobr { white-space:nowrap; }

Der HTML pre Tag macht Umbrüche wie im Editor eingegeben, der pre Tag wird vor allem zur Darstellung von Code gebraucht.Dieses Beispiel ist good old Ascii-Draphic-Design gereriert bei Ascii Generator. Siehe auch FIGlet-Font.

(_)_ __ | |_ ___ _ __  ___(_)_   _____| |_ __ _| |_(_) ___  _ __  
| | '_ \| __/ _ \ '_ \/ __| \ \ / / __| __/ _` | __| |/ _ \| '_ \ 
| | | | | ||  __/ | | \__ \ |\ V /\__ \ || (_| | |_| | (_) | | | |
|_|_| |_|\__\___|_| |_|___/_| \_/ |___/\__\__,_|\__|_|\___/|_| |_|