Mikrotypografische Möglichkeiten im Web

Die über Webfonts neu gewonnen, typografischen Möglichkeiten rücken das Thema Typografie bei der Gestaltung von Webseiten weiter in den Fokus. Für Sie als Designer heißt das aber auch, mit dem gleichen Anspruch und der gleichen Detailverliebtheit an das Werk zu gehen wie auf dem Papier. Die differenzierten Möglichkeiten, die CSS schon länger bietet, die Mikrotypografie auch im Web genau zu kontrollieren, möchten wir im Folgenden vorstellen.
Haben Sie über das CSS-Tag „font-family“ erstmal die zu verwendende Schriftart festgelegt, können Sie mit zahlreichen weiteren CSS-Tags deren Erscheinung sehr genau kontrollieren.
Grundsätzlich sollten Sie für Größenangaben nicht feste Einheiten, wie zum Beispiel Pixel (px), sondern die relative Angabe „em“, verwenden. Sie bezieht sich auf die Schriftgröße des Elements und stellt sicher, dass Ihre Einstellungen, für den Fall, dass der Benutzer die Schriftgröße verändert, sauber mitskaliert werden.
Abraten möchten wir von dem CSS-Tag „font-variant“, mit dem Sie Kapitälchen erzeugen können. Diese sogenannten falschen Kapitälchen werden durch unterschiedlich skalierte Großbuchstaben erzeugt, haben dadurch sichtbare Differenzen in der Strichstärke und gehören nicht in das Repertoire eines guten Typografen.
Sorgen Sie zum Beispiel mit einem ausreichend großen Zeilenabstand dafür, dass auch Texte mit längeren Zeilen problemlos zu lesen sind. Oder nutzen Sie diese Angaben, um mit der Kombination „kleine Schrift“, „großer Zeilenabstand“ einen besonderen Designeffekt zu erzielen.
Weniger bekannt ist das CSS-Tag „text-transform“, mit dem Sie Text unabhängig vom eigentlichen Inhalt in Groß- oder Kleinbuchstaben erscheinen lassen können.
Tolle Schrifteffekte erzeugen Sie mit „text-shadow“. Lesen Sie dazu den Artikel „Schöne Effekte mit Webfonts erzielen“.
Beispiel erzeugt mit:
Grundsätzlich sollten Sie für Größenangaben nicht feste Einheiten, wie zum Beispiel Pixel (px), sondern die relative Angabe „em“, verwenden. Sie bezieht sich auf die Schriftgröße des Elements und stellt sicher, dass Ihre Einstellungen, für den Fall, dass der Benutzer die Schriftgröße verändert, sauber mitskaliert werden.
Strichstärke und Schriftstil
Mit den CSS-Tags „font-weight“ beziehungsweise „font-style“ können Sie Strichstärke und den kursiven Schriftstil bestimmen. Obwohl „font-weight“ theoretisch auch andere Angaben als normal und bold zulässt, werden diese von den installierten Schriften und Browsern nur selten unterstützt. Greifen Sie besser auf den CSS-Tag „font-family“ zurück, um die passende Strichstärke aus den über @font-face eingebetteten Schriften auszuwählen.Abraten möchten wir von dem CSS-Tag „font-variant“, mit dem Sie Kapitälchen erzeugen können. Diese sogenannten falschen Kapitälchen werden durch unterschiedlich skalierte Großbuchstaben erzeugt, haben dadurch sichtbare Differenzen in der Strichstärke und gehören nicht in das Repertoire eines guten Typografen.
Schriftgröße und Zeilenabstand
Eigentlich eine Selbstverständlichkeit, aber zur Schriftgröße (css: font-size) gehört immer auch ein passender Zeilenabstand (css: line-height).Sorgen Sie zum Beispiel mit einem ausreichend großen Zeilenabstand dafür, dass auch Texte mit längeren Zeilen problemlos zu lesen sind. Oder nutzen Sie diese Angaben, um mit der Kombination „kleine Schrift“, „großer Zeilenabstand“ einen besonderen Designeffekt zu erzielen.
Zeichen- und Wortabstand
Mit dem CSS-Tag „letter-spacing“ kontrollieren Sie den Buchstabenabstand. Sie können diese Angabe nicht nur dazu benutzen, um mit relativ großen Angaben einen gesperrten Text zu erzeugen, sondern auch für feine Anpassungen. Zum Beispiel erfordert heller Text auf dunklem Grund in der Regel eine leichte Erweiterung der Laufweite, die Sie mit dieser Angabe vornehmen können. Möchten Sie nur den Abstand zwischen Wörtern erweitern, nutzen Sie den CSS-Tag „word-spacing“.Besondere Effekte
Relativ geläufig ist das CSS-Tag „text-decoration“, um einen Unterstrich zu erzeugen. Es wird zum Beispiel gerne benutzt, um das Aussehen von Links zu kontrollieren.Weniger bekannt ist das CSS-Tag „text-transform“, mit dem Sie Text unabhängig vom eigentlichen Inhalt in Groß- oder Kleinbuchstaben erscheinen lassen können.
Tolle Schrifteffekte erzeugen Sie mit „text-shadow“. Lesen Sie dazu den Artikel „Schöne Effekte mit Webfonts erzielen“.
| normal | ![]() |
|
| Strichstärke | font-weight:bold | |
| Schriftstil | font-style:italic | |
| Falsche Kapitälchen (nicht empfohlen) |
font-variant:small-caps | ![]() |
| Schriftgröße, Zeilenabstand |
font-size:0.7em; line-height:3em; |
![]() |
| Buchstabenabstand | letter-spacing:0.3em; | ![]() |
Wortabstand | word-spacing:0.3em; | ![]() |
Unterstreichung | text-decoration:underline; | ![]() |
Transformieren | text-transform:uppercase; | ![]() |






