Texte in Fettschrift hervorheben

Auf Websites müssen bestimmte Bereiche von Texten häufig anders gestaltet werden, um sie vom übrigen Text hervorzuheben. Zu den beliebtesten und somit am häufigsten verwendeten Hervorhebungen zählt die Fettschrift.

Text in Fettschrift

Um Texte in Fettschrift zu gestalten, wird in CSS die Eigenschaft font-weight verwendet. Auf der folgenden Abbildung ist ein Beispiel, aus dem die Syntax ersichtlich ist.

CSS-Code mit font-weight

Werte für font-weight

Für die Eigenschaft font-weight kann man viele Werte angaben, die nachfolgend aufgelistet sind.

Keyword-Werte

  • normal (Standard, für normale Schriftstärke)
  • bold (Fett)
  • lighter (Dünner als die Schrift des Elternelements)
  • bolder (Stärker als die Schrift des Elternelements)
  • initial (Setzt auf den Standardwert)
  • inherit (Vererbt vom Elternelement)

Numerische Angaben

  • 100 (Schriftstärke kleiner als bei der normalen Schrift)
  • 200
  • 300
  • 400 (wie normale Schriftstärke)
  • 500
  • 600
  • 700 (wie Fettschrift
  • 800 (Stärker als Fettschrift)
  • 900

Mit den numerischen Werten kann man die Schriftstärke detaillierter festlegen als nur mit bold. Allerdings kann es sein, dass die Browser nicht alle Werte unterstützen. Bei einem Wert zwischen 600 und 900 wird die nächst dickere Schrift verwendet, wenn es vom Browser nicht unterstützt wird und bei einem Wert zwischen 100 und 500 die nächst dünnere. Nachfolgend ist ein Beispielcode mit verschiedenen Werten sowie die Abbildung von der Browserdarstellung.

.selektor1 {
font-weight: bold;
}

.selektor2 {
font-weight: lighter;
}

.selektor3 {
font-weight: bolder;
}

.selektor4 {
font-weight: 100;
}

.selektor5 {
font-weight: 200;
}

.selektor6 {
font-weight: 300;
}

.selektor7 {
font-weight: 400;
}

.selektor8 {
font-weight: 500;
}

.selektor9 {
font-weight: 600;
}

.selektor10 {
font-weight: 700;
}

.selektor11 {
font-weight: 800;
}

.selektor12 {
font-weight: 900;
}

.selektor13 {
font-weight: 1000;
}

p {
margin: 2px;
padding: 5px;
width: 300px;
height: 50px;
line-height: 50px;
font-size: 18px;
border: 1px solid #001055;
float: left;
}
<p>Text in Normalschrift</p>
<p class="selektor1">Text mit font-weight: bold</p>
<p class="selektor2">Text mit font-weight: lighter</p>
<p class="selektor3">Text mit font-weight: bolder</p>
<p class="selektor4">Text mit font-weight: 100</p>
<p class="selektor5">Text mit font-weight: 200</p>
<p class="selektor6">Text mit font-weight: 300</p>
<p class="selektor7">Text mit font-weight: 400</p>
<p class="selektor8">Text mit font-weight: 500</p>
<p class="selektor9">Text mit font-weight: 600</p>
<p class="selektor10">Text mit font-weight: 700</p>
<p class="selektor11">Text mit font-weight: 800</p>
<p class="selektor12">Text mit font-weight: 900</p>
font-weight mit verschiedenen Werten

Auch wenn viele Werte möglich sind, wird in der Praxis meistens bold verwendet.