Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

Unterschneidung (kerning) über CSS font-kerning beeinflussen

Vor dem folgenden Text kann nur gewarnt werden. Nach Kenntnisnahme werden Sie keinen Text mehr lesen können, ohne dass kerning-Fehler einem auffallen!

Was ist eigentlich Unterschneidung und warum ist diese so wichtig (und oft unbekannt)? Es gibt Buchstabenkombinationen, die ohne eine saubere Unterschneidung (engl. kerning) sehr viel Weißraum zwischen sich haben und daher nicht so richtig zum Wort gehörig sind.

Schauen wir es an einem direkten Beispiel an. Meistens sind es Buchstaben, wo der erste (meistens ein Großbuchstabe) am der rechten Seite eine Schräge nach oben bzw. unten hat bzw. Platz für den Folgebuchstaben bieten. Hier haben wir als Spitzenkandidaten A, L, T, V, W und Y.

Es fällt auf, dass A, V, W und Y diese Schräge haben. Folgt nun nach diesem Buchstaben ein Buchstabe mit gegenläufiger Schräge, dann haben wir meistens das Problem. Sehr schön auch sichtbar in Word bei normalen Text (Times New Roman 12pt).

Schauen wir uns die Kombination „Wa“ an. Erst ohne saubere Unterschneidung (Kerning) und dann mit Unterschneidung:

Beispiel Unterschneidung (kerning) bei der Buchstabenkombination Wa
Beispiel Unterschneidung (kerning) bei der Buchstabenkombination Wa

Aber warum halten wir uns mit diesem Thema auf? Eigentlich sollte doch jede Software und Browser das automatisch machen! Das ist dann doch öfters Wunschdenken. Hier ist bei den Programmierern (bei Word auf jeden Fall) die Geschwindigkeit wichtiger als das Erscheinungsbild. Daher wird bei kleinen Schriften das „kerning“ unterdrückt.

Bei Word kann man die Unterschneidung auch für den Fließtext (sprich Schriftgröße 12) unter Formatvorlage ändern -> Schriftart -> Erweitert -> Unterschneidung ab 12 Punkte einstellen.

Aber wir machen Webdesign. Hier gibt es bei CSS die Anweisung font-kerning. Als Standardwert ist die Vorgabe „auto“ eingestellt. Dadurch wird dem Browser es überlassen, ob er eine Schrift mit oder ohne Kerning anzeigt. Die Begründung dafür ist, dass manche Schriften mit kleiner Schriftgröße angeblich mit Unterschneidungen merkwürdig aussehen. Also Augen auf im Webdesign. Einfach mal ansehen, ob dies bei der gewählten Schriftart im eigenen Design der Fall ist.

Über CSS haben wir 3 Werte für unser font-kerning:

font-kerning: auto;
font-kerning: normal;
font-kerning: none;

Die Anweisung steht uns für die meisten Browser zur Verfügung – allerdings noch nicht bei Browsern von Microsoft (weder bei IE Version 11 noch bei Edge Version 16). Trotzdem steht es uns bei über 80 % der Internetnutzer zur Verfügung.

Also einsetzen!

Und nun viel Spaß beim Finden (das was man kennt, das sieht man ab dann auch) von Kerning-Fehlern in Texten.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe