Schrift- und Textformatierung

Übersicht
Schriftart – font-family
Schriftgröße – font-size
Schriftstärke – font-weight
Kursiver Text – font-style
Zeichenbreite – font-stretch
Kapitälchen – font-variant-caps
Ligaturen – font-variant-ligatures
Ziffernzeichen – font-variant-numeric
Schriftvarianten – font-variant
Schrift – font
Typografische Merkmale – font-feature-settings
Groß-/Kleinschreibung – text-transform
Vertikale Ausrichtung – vertical-align
Zeichenabstand – letter-spacing
Textdekoration Linie – text-decoration-line
Textdekoration Farbe – text-decoration-color
Textdekoration Stil – text-decoration-style
Textdekoration – text-decoration
Textdekoration unterbrechen – text-decoration-skip
Absatzausrichtung – text-align
Erste Zeile einrücken – text-indent
Zeilenhöhe – line-height

Auf dieser Seite werden die wichtigsten CSS-Eigenschaften vorgestellt, mit denen Schrift und Text eines HTML-​Dokuments formatiert werden können, wie man es beispielsweise auch von einem normalen Textverarbei­tungsprogramm gewohnt ist. Schriftart, -größe und -farbe, fetter und kursiver Satz, aber auch speziellere Auszeichnungen wie Kapitälchen oder gesperrter Satz können auf einen Text angewendet werden. Weiterhin lässt sich die Ausrichtung eines Textes innerhalb eines Absatzes, das Einrücken der ersten Absatzzeile und die Zeilenhöhe festlegen. Alle Eigenschaften werden durch Beispiele demonstriert, mit denen auch mögliche Unterschiede in der Darstellung bei verschiedenen Browsern verglichen werden können.

Schriftart – font-family

Zur Verwendung serverseitiger Fonts siehe: @font-face

Um einen Text in einer bestimmten Schriftart (Font) darzustellen, wird dieser mit der CSS-Eigenschaft font-family formatiert. Diese Eigenschaft erwartet mindestens einen Schriftnamen als Wert. Praktischerweise sollte man aber immer eine Reihe alternativer Schriftarten (sog. ›Fallback-Fonts‹) angeben, die in dem Fall verwendet werden können, wenn eine davor deklarierte Schriftart auf dem Rechner des Benutzers nicht installiert ist. Ein Browser wird versuchen, die erste deklarierte Schriftart zu verwenden. Ist diese nicht installiert, wird nach der zweiten gesucht, und so weiter. Als letzte Alternative solle man dann noch einen ›generischen‹ Schriftnamen angeben, damit wenigstens eine halbwegs ähnliche Systemschriftart, die im Browser eingestellt ist, verwendet werden kann, falls keine einzige der angegebenen Alternativen möglich ist. Generische Schriftnamen sind keine eigentlichen Namen eines bestimmten Fonts, sondern bezeichnen eine Gruppe von Schriftarten, die ähnliche Eigenschaften besitzen:

serif – für Schriften mit Serifen
sans-serif – für Schriften ohne Serifen
monospace – für dicktengleiche Schriften
cursive – für besondere kursive Schriften
fantasy – für alle anderen Schriften

Font-Namen, die ein Leerzeichen enthalten (z. B. ›DejaVu Sans‹), müssen in Anführungzeichen gesetzt werden.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
<p style='font-family:"DejaVu Serif", Georgia, "Times New Roman", serif;'>Lorem ipsum dolor sit amet.</p>
<p style='font-family:"DejaVu Sans", Verdana, Arial, sans-serif;'>Consetetur sadipscing elitr.</p>
<p style='font-family:monospace;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Schriftgröße – font-size

Die Größe einer Schrift wird über die Eigenschaft font-size definiert. Als Wert eignen sich z. B. absolute Werte in Pixeln oder auch bestimmte Schlüsselworte wie z. B. small oder large. Mehr dazu siehe W3C-Spezifikation.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
<p style='font-size:20px;'>Lorem ipsum dolor sit amet.</p>
<p style='font-size:1.8em;'>Consetetur sadipscing elitr.</p>
<p style='font-size:small;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Schriftstärke – font-weight

Über die Eigenschaft font-weight kann die Strichstärke einer Schrift eingestellt werden. Üblicherweise wird man die Werte normal oder bold (für fette Schrift) verwenden. Es sind aber auch numerische Angaben möglich, die in der Regel jedoch keinen besonderen Nutzen bringen.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
<p style='font-weight:bold;'>Lorem ipsum dolor sit amet.</p>
<p style='font-weight:normal;'>Consetetur sadipscing elitr.</p>
<p style='font-weight:900;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Kursiver Text – font-style

Über die Eigenschaft font-style kann eingestellt werden, ob die Schrift normal oder kursiv dargestellt wird. Möglich sind folgende Werte:

normal – in der Regel aufrechte Darstellung
italic – kursive Darstellung
oblique – ›verschiefte‹ oder ›faux italic‹ Darstellung, wenn vorhanden

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
<p style='font-style:italic;'>Lorem ipsum dolor sit amet.</p>
<p style='font-style:normal;'>Consetetur sadipscing elitr.</p>
<p style='font-style:oblique;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Zeichenbreite – font-stretch

Über die Eigenschaft font-stretch kann die Breite einer Schrift gewählt werden, sofern ein entsprechender Schriftschnitt verfügbar ist. Möglich sind folgende Werte:

ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded

Hier ein paar Beispiele:

Quelltext auswählen
1
2
<p style='font-stretch:condensed;'>Lorem ipsum dolor sit amet.</p>
<p style='font-stretch:normal;'>Lorem ipsum dolor sit amet.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Kapitälchen – font-variant-caps

Über die Eigenschaft font-variant-caps kann eingestellt werden, wie Text als Kapitälchen dargestellt wird. Unterstützte Werte sind hier:

normal – keine Kapitälchen
small-caps – Kleinbuchstaben werden zu Kapitälchen
all-petite-caps – alle Buchstaben werden zu Kapitälchen
unicase – Großbuchstaben werden zu Kapitälchen (nur Webkit)

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
<p style='font-variant-caps:small-caps;'>Lorem ipsum dolor sit amet.</p>
<p style='font-variant-caps:all-petite-caps;'>Lorem ipsum dolor sit amet.</p>
<p style='font-variant-caps:unicase;'>Lorem ipsum dolor sit amet.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Ligaturen – font-variant-ligatures

Über die Eigenschaft font-variant-ligatures kann eingestellt werden, wie Ligaturen eingesetzt werden. Unterstützte Werte sind hier:

none – keine Ligaturen
normal – nur common-ligatures und contextual
[no-]common-ligatures – gewöhnliche Ligaturen
[no-]contextual – kontextbezogene Formen
[no-]discretionary-ligatures – dekorative Ligaturen
[no-]historical-ligatures – historische Ligaturen

Über das Präfix no- lassen sich diese Angaben ausschalten.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
5
<p style='font-variant-ligatures:none;'>ff ft fl fi ffi ffl ſt st</p>
<p style='font-variant-ligatures:common-ligatures;'>ff ft fl fi ffi ffl ſt st</p>
<p style='font-variant-ligatures:contextual;'>ff ft fl fi ffi ffl ſt st</p>
<p style='font-variant-ligatures:discretionary-ligatures;'>ff ft fl fi ffi ffl ſt st</p>
<p style='font-variant-ligatures:historical-ligatures;'>ff ft fl fi ffi ffl ſt st</p>

Dieser Code führt zu folgender Darstellung:

ff ft fl fi ffi ffl ſt st ct Th

ff ft fl fi ffi ffl ſt st ct Th

ff ft fl fi ffi ffl ſt st ct Th

ff ft fl fi ffi ffl ſt st ct Th

ff ft fl fi ffi ffl ſt st ct Th

Ziffernzeichen – font-variant-numeric

Über die Eigenschaft font-variant-numeric kann die Darstellung von Ziffernzeichen eingestellt werden. Unterstützte Werte sind hier:

normal – gewöhnliche Darstellung
lining-numsVersalziffern oder
oldstyle-numsMediävalziffern
proportional-nums – Ziffern mit variabler Breite oder
tabular-nums – Ziffern mit fester Breite
diagonal-fractions – schräge Darstellung von Brüchen oder
stacked-fractions – gestapelte Darstellung von Brüchen
ordinalOrdinalzeichen
slashed-zero – Null mit Schrägstrich

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
5
6
<p style='font-variant-numeric:lining-nums proportional-nums;'>123,45<br>987,65</p>
<p style='font-variant-numeric:lining-nums tabular-nums;'>123,45<br>987,65</p>
<p style='font-variant-numeric:oldstyle-nums proportional-nums;'>123,45<br>987,65</p>
<p style='font-variant-numeric:oldstyle-nums tabular-nums;'>123,45<br>987,65</p>
<p style='font-variant-numeric:diagonal-fractions;'>123/456</p>
<p>1<span style='font-variant-numeric:ordinal;'>st</span> 2<span style='font-variant-numeric:ordinal;'>nd</span> 3<span style='font-variant-numeric:ordinal;'>rd</span> 4<span style='font-variant-numeric:ordinal;'>th</span></p>

Dieser Code führt zu folgender Darstellung:

123,45
987,65

123,45
987,65

123,45
987,65

123,45
987,65

123/456

1st 2nd 3rd 4th

Schriftvarianten – font-variant

Die Eigenschaft font-variant ist eine Kurzschreibweise für verschiedene oben genannte Schrifteigenschaften. Mögliche Werte sind hier:

none – setzt alle Eigenschaften auf den Ausgangswert zurück und font-variant-ligatures auf none
normal – setzt alle Eigenschaften auf den Ausgangswert zurück
• ein Wert aus font-variant-caps oder
• ein Wert aus font-variant-ligatures oder
• ein Wert aus font-variant-numeric

Hier ein paar Beispiele:

Quelltext auswählen
1
2
<p style='font-variant:small-caps;'>Lorem ipsum dolor sit amet.</p>
<p style='font-variant:oldstyle-nums;'>1234,456</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

1234,456

Schrift – font

Über die Eigenschaft font können folgende Eigenschaften in einer einzigen Definition eingestellt werden:

font-style – Kursiver Text
font-variant – Schriftvarianten (nur normal oder small-caps)
font-weight – Schriftstärke
font-stretch – Zeichenbreite
font-size – Schriftgröße
line-height – Zeilenhöhe (siehe unten)
font-family – Schriftart

Es müssen nicht alle Angaben gemacht werden, aber sie müssen in der obigen Reihenfolge notiert werden. Schriftgröße und Zeilenhöhe werden durch ein Slash / getrennt.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
<p style='font:italic small-caps bold 20px/2em "DejaVu Sans", Verdana, sans-serif;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p style='font:17px serif;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Typografische Merkmale – font-feature-settings

Mit der Eigenschaft font-feature-settings lassen sich besondere typografische Merkmale von OpenType-Schriften steuern, die in der Voreinstellung nicht verfügbar sind. Nicht alle möglichen Merkmale werden von den einzelnen Fonts unterstützt, weshalb man diese in entsprechenden Dokumentationen oder durch Ausprobieren herausfinden muss. Eine Liste möglicher Merkmale findet man bei Wikipedia.

Hier ein paar Beispiele für die Schriften OpenSans bzw. EB Garamond:

onumMediävalziffern
frac – Besondere Darstellung von Brüchen
ss01 – Stylistic Set 01
ss02 – Stylistic Set 02
ss03 – Stylistic Set 03
swshSwash

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<p>
  <span>0123456789</span>
  <span style="font-feature-settings:'onum';">0123456789</span>
</p>
<p>
  <span>1234/5678</span>
  <span style="font-feature-settings:'frac';">1234/5678</span>
</p>
<p>
  <span>Iglu</span>
  <span style="font-feature-settings:'ss01';">Iglu</span>
  <span style="font-feature-settings:'ss02';">Iglu</span>
  <span style="font-feature-settings:'ss03';">Iglu</span>
</p>
<p>
  <span><i>Anton Reiser</i></span>
  <span style="font-feature-settings:'swsh';"><i>Anton Reiser</i></span>
</p>

0123456789 0123456789

1234/5678 1234/5678

Iglu Iglu Iglu Iglu

Anton Reiser Anton Reiser

Groß-/Kleinschreibung – text-transform

Über die Eigenschaft text-transform lässt sich einstellen, ob Text in normaler, Klein- oder Großschreibung dargestellt wird. Mögliche Werte außer none (normale Darstellung) sind:

capitalize – das erste Zeichen jedes Wortes wird groß gesetzt
uppercase – alle Zeichen werden groß gesetzt
lowercase – alle Zeichen werden klein gesetzt

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
<p style='text-transform:capitalize;'>Lorem ipsum dolor sit amet.</p>
<p style='text-transform:uppercase;'>Consetetur sadipscing elitr.</p>
<p style='text-transform:lowercase;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Vertikale Ausrichtung – vertical-align

Über die Eigenschaft vertical-align lässt sich die vertikale Ausrichtung eines Inline-Elements einstellen. Mögliche Werte sind:

baseline – Grundlinie
top – Oberkante
middle – Mitte
bottom – Unterkante
text-top – Textoberkante
text-bottom – Textunterkante
super – Position für höher gestellte Zeichen
sub – Position für tiefer gestellte Zeichen

Außerdem kann ein Zahlenwert in den üblichen Einheiten wie px oder em sowie ein Prozentwert angegeben werden.

Der Nutzen dieser Eigenschaft erschließt sich nicht unbedingt sofort, allerdings kann sie manchmal hilfreich sein, um Grafiken, die Teil eines Textflusses sind, auszurichten, wobei es praktischer ist, in einem solchen Fall Zahlenwerte statt der Schlüsselwörter zu verwenden, da man diese Elemente so genauer positionieren kann.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<p style='text-transform:uppercase;padding:20px;background-color:#333;'>
  lorem <img src='img/orangebox.png' style='vertical-align:text-top;' alt='Box' title='text-top'> 
  ipsum <img src='img/orangebox.png' style='vertical-align:top;' alt='Box' title='top'>
  dolor <img src='img/orangebox.png' style='vertical-align:super;' alt='Box' title='super'>
  sit <img src='img/orangebox.png' style='vertical-align:middle;' alt='Box' title='middle'>
  amet <img src='img/orangebox.png' style='vertical-align:baseline;' alt='Box' title='baseline'>
  lorem <img src='img/orangebox.png' style='vertical-align:sub;' alt='Box' title='sub'>
  ipsum <img src='img/orangebox.png' style='vertical-align:bottom;' alt='Box' title='bottom'>
  dolor <img src='img/orangebox.png' style='vertical-align:text-bottom;' alt='Box' title='text-bottom'> amet
</p>

<p style='text-transform:uppercase;padding:20px;margin-bottom:20px;background-color:#444;'>
  lorem <img src='img/orangebox.png' style='vertical-align:9px;' alt='Box' title='9px'> 
  ipsum <img src='img/orangebox.png' style='vertical-align:6px;' alt='Box' title='6px'>
  dolor <img src='img/orangebox.png' style='vertical-align:3px;' alt='Box' title='3px'>
  sit <img src='img/orangebox.png' style='vertical-align:0px;' alt='Box' title='0px'>
  amet <img src='img/orangebox.png' style='vertical-align:-3px;' alt='Box' title='-3px'>
  lorem <img src='img/orangebox.png' style='vertical-align:-6px;' alt='Box' title='-6px'>
  ipsum <img src='img/orangebox.png' style='vertical-align:-9px;' alt='Box' title='-9px'> dolor
</p>

Dieser Code führt zu folgender Darstellung. In der oberen Reihe sind die Grafiken mit den Schlüsselbegriffen ausgerichtet, in der unteren mit Zahlenwerten. Wenn man eine Grafik mit der Maus überfährt, wird der entsprechende Wert angezeigt:

lorem Box ipsum Box dolor Box sit Box amet Box lorem Box ipsum Box dolor Box amet

lorem Box ipsum Box dolor Box sit Box amet Box lorem Box ipsum Box dolor

Zeichenabstand – letter-spacing

Über die Eigenschaft letter-spacing kann der Zeichenabstand eines Textes eingestellt werden (sog. Sperrsatz). Moglich ist der Wert normal oder ein numerischer Wert z. B. in Pixeln oder als Anteil der Em-Länge.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
<p style='letter-spacing:2px;'>Lorem ipsum dolor sit amet.</p>
<p style='letter-spacing:-.1em;'>Consetetur sadipscing elitr.</p>
<p style='letter-spacing:.5em;'>Sed diam nonumy eirmod tempor.</p>2px

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Textdekoration Linie - text-decoration-line

Über die Eigenschaft text-decoration-line lässt sich die Position einer Linie bestimmen, mit der Text ausgezeichnet werden soll. Mögliche Werte neben none (ohne Auszeichnung) sind:

underline – unterstrichen
overline – überstrichen
line-through – durchgestrichen

Beispiele:

Quelltext auswählen
1
2
3
<p style='text-decoration-line:underline;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration-line:overline;'>Consetetur sadipscing elitr.</p>
<p style='text-decoration-line:line-through;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Textdekoration Farbe - text-decoration-color

Über die Eigenschaft text-decoration-color lässt sich die Farbe der Linie festlegen, mit der Text ausgezeichnet werden soll. Es können die üblichen Farbwerte verwendet werden.

Beispiele:

Quelltext auswählen
1
2
3
<p style='text-decoration-line:underline;text-decoration-color:#ff0000;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration-line:overline;text-decoration-color:yellow;'>Consetetur sadipscing elitr.</p>
<p style='text-decoration-line:line-through;text-decoration-color:hsl(130,85%,50%);'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Textdekoration Stil - text-decoration-style

Über die Eigenschaft text-decoration-style lässt sich der Stil der Linie festlegen, mit der Text ausgezeichnet werden soll. Mögliche Werte sind:

solid – durchgehende Linie
double – doppelte Linie
dotted – gepunktete Linie
dashed – gestrichelte Linie
wavy – wellenförmige Linie

Beispiele:

Quelltext auswählen
1
2
3
4
5
6
<p style='text-decoration-line:underline;text-decoration-style:solid;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration-line:underline;text-decoration-style:double;'>Consetetur sadipscing elitr.</p>
<p style='text-decoration-line:underline;text-decoration-style:dotted;'>Sed diam nonumy eirmod tempor.</p>
<p style='text-decoration-line:underline;text-decoration-style:dashed;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration-line:underline;text-decoration-style:wavy;'>Consetetur sadipscing elitr.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Textdekoration – text-decoration

Über die Eigenschaft text-decoration lassen sich die Eigenschaften text-decoration-line, text-decoration-color und text-decoration-style zusammenfassen.

Beispiele:

Quelltext auswählen
1
2
3
<p style='text-decoration:underline yellow solid;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration:overline #ff0000 dashed;'>Consetetur sadipscing elitr.</p>
<p style='text-decoration:line-through hsl(130,85%,50%) wavy;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Textdekoration überspringen - text-decoration-skip

Mit der Eigenschaft text-decoration-skip lässt sich festlegen, ob eine Textdekoration unter bestimmten Bedingungen unterbrochen werden soll. Mögliche Werte sind:

none – keine Unterbrechung
ink – Unterbrechung bei Überschneidung mit dem Text
objects
spaces
edges
box-decoration

Diese Eigenschaft ist gegenwärtig offenbar weder in WebKit noch in Gecko vollständig implementiert. Lediglich der Wert ink funktioniert bei WebKit (außer bei text-decoration-line:line-through;). Man beachte das unterschiedliche Rendering zwischen WebKit und Gecko bei hochgestellten Zeichen.
Siehe auch Can I Use.

Beispiele:

Quelltext auswählen
1
2
3
<p style='text-decoration:underline red solid;text-decoration-skip:ink;'>Lorem ipsum dolor sit amet<sup>2</sup>.</p>
<p style='text-decoration:overline yellow solid;text-decoration-skip:ink;'>ÂConsetetur sadipscing elitr.</p>
<p style='text-decoration:line-through blue solid;text-decoration-skip:ink;'>Sed diam nonumy eirmod tempor.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet2.

ÂConsetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Absatzausrichtung – text-align

Über die Eigenschaft text-align lässt sich die horizontale Ausrichtung des Textes eines Absatzes einstellen. Mögliche Werte sind:

left – linksbündiger Flattersatz
right – rechtsbündiger Flattersatz
center – zentriert bzw. Mittelachsensatz
justifyBlocksatz

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
<p style='text-align:left;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-align:right;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-align:center;'>Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-align:justify;'>Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Erste Zeile einrücken – text-indent

Über die Eigenschaft text-indent lässt sich einstellen, wie weit die erste Zeile eines Absatzes eingerückt wird. Mögliche Werte außer 0 sind:

• ein Zahlenwert mit Einheit gibt einen festen Wert an
• ein Prozentwert bezieht sich auf die Breite des Absatzes

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
<p style='text-indent:0;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-indent:10%;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-indent:3em;'>Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-indent:-20px;padding-left:40px;'>Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Zeilenhöhe – line-height

Über die Eigenschaft line-height lässt sich die Zeilenhöhe eines Absatzes einstellen. Mögliche Werte außer normal sind:

• ein Zahlenwert ohne Einheit gilt als Multiplikator für die Schriftgröße
• ein Prozentwert bezieht sich ebenfalls auf die Schriftgröße
• ein Zahlenwert mit Einheit gibt einen festen Wert an

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
<p style='line-height:normal;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='line-height:1.5;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='line-height:180%;'>Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='line-height:.8em;'>Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet