CSS Kerning und Ligaturen im Browser

Webdesigner wurden lange Zeit bei der Wahl einer individuellen Schriftart und insbesondere im Bereich der Detailtypografie massiv eingeschränkt. Diese grauen Tage sind zwar noch nicht ganz vorbei, in letzter Zeit wurden jedoch einige Techniken entwickelt oder zumindest neu entdeckt die uns bei der Arbeit mit Schriften unterstützen. In erster Linie sind das die sog. Webfonts, die in den meisten Browsern ohne größere Schwierigkeiten verwendet werden können. Moderne Browser unterstützen neben Webfonts aber auch Ligaturen und Kerning.

Was ist Kerning?

Der Begriff Kerning beschreibt den Abstand, bzw. die optische Anpassung des Freiraums zwischen verschiedenen Buchstaben. Im Deutschen wird Kerning mit Unterschneiden bzw. Spationieren übersetzt – je nachdem ob der Weißraum vergrößert oder verkleinert werden soll. Hochwertige Schriftarten greifen bei bestimmten Buchstabenkombinationen auf eine sogenannte Kerning-Tabelle zurück und passen das Schriftbild entsprechend an.
Ein anschauliches Beispiel ist die Buchstabenkombination „AV“. Wird hier kein Kerning verwendet, so scheint das „V“ in der Regel zu weit vom „A“ entfernt zu sein.

Kerning

Was sind Ligaturen?

Als Ligatur bezeichnet man die Verbindung von mindestens zwei Buchstaben zu einer optisch harmonischen Einheit. Wie auch beim Kerning verfügen nur hochwertige Fonts über Ligaturen und greifen auf eine Tabelle zurück falls eine bestimmte Buchstabenkombination verwendet wird. Ein Beispiel für den Einsatz von Ligaturen ist die Buchstabenkombination ff oder tt. Das nachfolgende Beispiel zeigt eine sehr schöne Ligatur der Schriftart Heroine.

Ligaturen

Ligaturen und Kerning mit CSS3

In CSS3 existieren verschiedene Varianten zur Optimierung des Schriftbildes. Die Eigenschaft nennt sich text-rendering und erlaubt neben auto und inherit folgende Werte:

optimizeSpeed

Diese Eigenschaft sorgt für die beste Performance und ist der Standartwert des Browsers. Ihr werdet daher keinen Unterschied erkennen können.

body {
  text-rendering: optimizeSpeed;
}

geometricPrecision

Diese Eigenschaft sorgt für die perfekteste geometrische Darstellung.

body {
  text-rendering: geometricPrecision;
}

optimizeLegibility

Diese Eigenschaft sorgt für die beste Lesbarkeit. Mit dieser Einstellung macht ihr nichts verkehrt. Wenn der Browser den Befehl nicht versteht, nutzt er das Standard-Schriftbild.

body {
  text-rendering: optimizeLegibility;
}

Beispiel anzeigen

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 3 Kommentare

  1. Kerning für Webfonts – Type Butter jQuery-Plugin | kulturbanause blog
    schrieb am 29.05.2012 um 08:48 Uhr:

    […] einiger Zeit habe ich bereits einen Artikel über Kerning und Ligaturen im Browser geschrieben – heute möchte ich das Thema noch einmal aufgreifen. Type Butter ist ein neues […]

    Antworten
  2. Maria
    schrieb am 08.08.2010 um 18:11 Uhr:

    Es tut sich was. Das ist mehr als gut. Hoffentlich geht die Entwicklung schnell voran. Nicht das es noch 10 Jahre dauert, eh sich wirklich bahnbrechend was tut.

    Antworten
  3. Jens B.
    schrieb am 15.07.2010 um 15:03 Uhr:

    Die Entwicklungen der letzten Monate sind lange überfällig. Kerning ist eigentlich ein MUSS, insbesondere bei größeren Schriften. Beim Einsatz von klassischen Systemschriften für Fließtext sicherlich auch wünschenswert, aber soviel Detailtypografie wäre bei der Masse an Informationen sicherlich auch nur etwas für automatisches Kerning mit entsprechenden Kerningtabellen. Letzteres wird sicherlich noch mal 2-3 Jahre dauern – wenn nicht länger. Ich bin gespannt. Klasse Beitrag in jedem Fall. :)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →