Michael van Laar

Startseite » Blog » Die neusten Blog-Artikel » Ob @font-face oder Cufón – bei mir entscheidet Windows

Ob @font-face oder Cufón – bei mir entscheidet Windows

[An dieser Stelle würden Sie einen Facebook-„Gefällt mir“-Button sehen – wenn Deutschland nicht das Land der ausufernden Datenschutz-Paranioia wäre.]

Webfonts, die man per @font-face-Regel direkt in das Stylesheet einbinden und dann überall auf der Website verwenden kann, sind toll. Mittlerweile kommen auch alle großen Browser damit klar. Doch immer wieder stören Berichte über unschöne Darstellungsprobleme die Webfont-Idylle. Schuld sind die unterschiedlichen Schriftglättungsverfahren der verschiedenen Betriebssysteme. Besonders Windows Cleartype macht seinem Namen oft keine Ehre. Also doch kein @font-face und zurück zu Cufón? Jein. Es kommt auf die Schriftart an.

Testen, testen, testen

Einen ausführlichen Test der Rendering-Ergebnisse von @font-face-Einbettung, Typekit und Cufón in einer Fülle von Browser-Betriebssystem-Kombinationen hat David Sutoyo in seinem Blog veröffentlicht. Der Test zeigt, dass unter Windows nur Cufón eine wirklich zuverlässig geglättete Schriftdarstellung garantiert.

Die teilweise sehr ausgefranst aussehende Schriftglättung von Windows Cleartype ist ein bekanntes Ärgernis. Gerade bei Überschriften in größeren Schriftgrößen sieht unter Windows die betagte Standard-Schriftglättung, die noch nicht mit Subpixeln arbeitet, deutlich besser aus als die Cleartype-„Glättung“.

Beim Durchstöbern der Typekit-Fonts fiel mir jedoch auf, dass keineswegs alle dort vertretenen Schriftarten von Windows Cleartype verunstaltet werden. Also habe ich mit verschiedenen Schriftarten und der Hauptüberschrift meiner Startseite ein wenig herumgespielt. Durch die orange Textfarbe fällt der Ausfrans-Effekt zwar nicht ganz so stark auf. Trotzdem ist er oft sichtbar, wie beispielsweise bei der „Museo“:

Schrift-Rendering-Beispiel: Museo (von Typekit) unter Windows XP mit Cleartype

Die „Adelle“ dagegen sieht auch mit Windows Cleartype schön glatt aus, wenn auch ein klein wenig verwaschen:

Schrift-Rendering-Beispiel: Adelle (von Typekit) unter Windows XP mit Cleartype

Deswegen habe ich für meine Projekte beschlossen, die Entscheidung über @font-face bzw. Typekit oder Cufón meinem betagten Windows XP zu überlassen. Wenn die gewählte Schriftart (Verfügbarkeit und Lizenz vorausgesetzt) mithilfe der @font-face-Einbettung annehmbare Ergebnisse liefert, bin ich glücklich. Ansonsten muss ich eben auf Cufón ausweichen. Das ist dann zwar nicht ganz so komfortabel, zukunftsweisend und cool. Aber dafür sieht es ordentlich aus. Zwar hat Cufón auch so seine Tücken (gerade was Links und Unterstreichungen angeht). Doch für Überschriften reicht es in der Regel.

Und was ist mit Fließtext?

An Webfonts für den kompletten Fließtext habe ich mich in Kundenprojekten noch nicht herangetraut. Denn noch bei zu vielen Schriftarten sieht das Ergebnis bei der @font-face-Einbettung nicht akzeptabel aus, wie beispielsweise bei der „Tillium Text“, die in kleineren Schriftgrößen (hier 15 Pixel) deutliche „Kleckse“ aufweist:

Schrift-Rendering-Beispiel: Titillium Text unter Windows XP mit Cleartype

Und Cufón ist für umfangreiche Fließtexte natürlich ohnehin keine Lösung. Hier auf meiner eigenen Website habe ich gestern Nacht den Schritt zur kompletten „Ver-Webfont-ung“ gewagt. Nach langem Suchen habe ich mit der „PT Sans“ auch eine passende Schriftfamilie gefunden, die sowohl für die Überschriften als auch für den Fließtext ordentliche Ergebnisse liefert:

Schrift-Rendering-Beispiel: PT Sans unter Windows XP mit Cleartype

Über die schöne, aber im heutigen Lesegebraucht eher ungewöhnliche Ligatur-Variante für das scharfe s stolpere ich zwar bei jedem Lesen aufs Neue. Aber das ist auch der einzige Nachteil, der mir bisher aufgefallen ist.

Ein Vergleich der verschiedenen Schriftglättungsoptionen unter Windows XP zeigt allerdings auch hier wieder, dass eigentlich eine Kombination aus Cleartype für den Fließtext und Standardglättung für die Überschriften am saubersten aussähe. Wer noch mit uralten Windows-XP-Einstellungen unterwegs ist und dadurch überhaupt nicht in den Genuss irgendeiner Schriftglättung kommt, schaut zwar in die Röhre (siehe Bild), aber damit kann ich leben.

Schrift-Rendering-Vergleich: PT Sans unter Windows XP, links mit Cleartype, in der Mitte mit der alten Standardglättung und rechts ganz ohne Schriftglättung

Hier noch ein Tipp für alle, die die „PT Sans“ ebenfalls für Fließtexte einsetzen wollen: Beim fetten Schnitt sumpfen manche Buchstaben in bestimmten Schriftgrößen extrem zu, so z. B. das „e“ bei einer Größe von 15 Pixel. Deswegen verwende ich für alle fetten Passagen grundsätzlich die breitere „PT Sans Caption Bold“:

@font-face {
	font-family: 'PT Sans';
	src: url('fonts/PT_Sans-webfont.eot');
	src: local('☺'), url('fonts/PT_Sans-webfont.woff') format('woff'), url('fonts/PT_Sans-webfont.ttf') format('truetype'), url('fonts/PT_Sans-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* [...] */

@font-face {
	font-family: 'PT Sans Caption';
	src: url('fonts/PT_Sans_Caption_Bold-webfont.eot');
	src: local('☺'), url('fonts/PT_Sans_Caption_Bold-webfont.woff') format('woff'), url('fonts/PT_Sans_Caption_Bold-webfont.ttf') format('truetype'), url('fonts/PT_Sans_Caption_Bold-webfont.svg#webfont') format('svg');
	font-weight: bold;
	font-style: normal;
}

/* [...] */

body {
	font-family: 'PT Sans', Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #222;
}

strong, b {
	font-family: 'PT Sans Caption', Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

• Tweet
• Auf XING teilen

19. Mai 2010  ·  Thema: Webdesign  ·  8 Kommentare

---

Kommentare