Font-Weight - Schriftstärke definieren

Tutorial CSS und HTML Schriftdicke verändern

Mit CSS lässt sich bei jeder Schrift die Dicke (Stärke) der Schrift definieren. So kann die Schrift dicker oder eben dünner gestaltet werden und optisch ansprechender wirken.

Dabei kann zwischen den vier Grunddefinitionen oder einem Nummerischen Wert ausgewählt werden.

Grunddefinitionen:

normal
bold (fett/dick)
bolder (fetter/dicker)
lighter (schmaler/dünner)

CSS Definitions Beispiel einer fetten Schrift

span { font-weight: bold; }

mögliche Zahlenwerte:

100
200
300
400 (normal)
500
600
700 (bold)
800
900

CSS font-weight 700

.w700 { font-family: Open Sans; font-weight: 700; font-size: 1em; }

Vorsicht

Es können je nach Schriftart nicht alle Zahlenwerte verwendet werden!

Beispiel

CSS

.font {
font-family: Calibri;}
.w100 { font-weight: 100;}
.w200 { font-weight: 200;}
.w300 { font-weight: 300;}
.w400 { font-weight: 400;}
.w500 { font-weight: 500;}
.w600 { font-weight: 600;}
.w700 { font-weight: 700;}
.w800 { font-weight: 800;}
.w900 { font-weight: 900;}

HTML

<div class="font">
<div class="w900">Calibri mit font-weight 900 (nicht verf�gbar)</div>
<div class="w800">Calibri mit font-weight 800 (nicht verf�gbar)</div>
<div class="w700">Calibri mit font-weight 700 (bold)</div>
<div class="w600">Calibri mit font-weight 600 (nicht verf�gbar)</div>
<div class="w500">Calibri mit font-weight 500 (nicht verf�gbar)</div>
<div class="w400">Calibri mit font-weight 400 (normal)</div>
<div class="w300">Calibri mit font-weight 300</div>
<div class="w200">Calibri mit font-weight 200 (nicht verf�gbar)</div>
<div class="w100">Calibri mit font-weight 100 (nicht verf�gbar)</div>
</div>

Calibri mit font-weight 900 (nicht verfügbar)

Calibri mit font-weight 800 (nicht verfügbar)

Calibri mit font-weight 700 (bold)

Calibri mit font-weight 600 (nicht verfügbar)

Calibri mit font-weight 500 (nicht verfügbar)

Calibri mit font-weight 400 (normal)

Calibri mit font-weight 300

Calibri mit font-weight 200 (nicht verfügbar)

Calibri mit font-weight 100 (nicht verfügbar)

letztes Update 14. November 2014

Kommentare

Hier können sowohl Fragen wie auch ein Feedback zum oben stehenden Artikel eingetragen werden.