https://www.linotype.com/catalog/promotions.html
Webfonts von Linotype.com - Font-Technologie

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.


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;

Beispiel erzeugt mit: