decocode decocode deco    

Schrift- und Textformatierung #

Übersicht
Schriftart – font-family
Schriftgröße – font-size
Schriftstärke – font-weight
Kursiver Text – font-style
Kapitälchen – font-variant
Schrift – font
Groß-/Kleinschreibung – text-transform
Vertikale Ausrichtung – vertical-align
Zeichenabstand – letter-spacing
Textdekoration – text-decoration
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.

Kapitälchen – font-variant #

Über die Eigenschaft font-variant kann eingestellt werden, ob die Schrift normal oder als Kapitälchen dargestellt wird. Möglich sind folgende Werte:

normal – normale Darstellung
small-caps – Darstellung als Kapitälchen

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:normal;'>Consetetur sadipscing elitr.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Schrift – font #

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

font-style – Kursiver Text
font-variant – Kapitälchen
font-weight – Schriftstärke
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:bold small-caps italic 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.

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 – text-decoration #

Über die Eigenschaft text-decoration lässt sich Text auf verschiedene Weise auszeichnen. Mögliche Werte neben none (ohne Auszeichnung) sind:

underline – unterstrichen
overline – überstrichen
line-through – durchgestrichen
blink – blinkend (nicht unterstützt von Chrome ≤ 10; Safari ≤ 5 und MSIE ≤ 8)

Hier ein paar Beispiele:

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

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Invidunt ut labore et dolore.

Mit einem Trick lässt sich sogar die Farbe der Linie individuell festlegen:

Quelltext auswählen
1
2
3
4
<p>
  <span style='text-decoration:line-through;color:red;'><span style='color:white;'>Lorem ipsum dolor sit amet.</span></span>
  <span style='text-decoration:underline;color:yellow;'><span style='color:white;'>Sed diam nonumy eirmod tempor.</span></span>
</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet. 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