praegnanz.de büro für intervernetzte medien

Gerrit, 08.02.2014

Webfonts: Fette Fehlerquelle

Handwerkliche Fehler und Hässlichkeiten im Web zu entdecken, ist für den etablierten Webdesigner wahrlich nichts neues und Teil unseres Berufes. Unangenehm wird es vor allem dann, wenn wir Probleme entdecken, die sonst keinem auffallen, weil nicht jeder Kollege (und schon gar nicht jeder Kunde oder gar Besucher) den entsprechend geübten Blick hat. Zu starke JPG-Komprimierung ist so ein klassischer Fall, oder auch fehlerhafte Orthografie.

Typografisch interessierte Webdesigner erleben dabei noch viel schlimmere Qualen als die meisten anderen Mitglieder unserer Zunft. Heute will ich mich neben dem Dämonischen Trio (Blocksatz ohne Silbentrennung, falsche Kapitälchen, falsche Anführungszeichen) einem Phänomen widmen, welchem ich in den letzten zwei Jahren immer häufiger begegne: falsche Fetten.

Zur Erläuterung: Die meisten CSS-Autoren begnügen sich mit den einfachen Fetten-Angaben über normal oder bold. Dies ist einfach zu erklären, denn in der Prä-Webfonts-Ära konnte man ausschließlich Systemschriften auf Websites nutzen, die beinahe ausnahmslos in den vier Schnitten regular, italic, bold und bold-italic verfügbar waren.

Mit dem Einzug von Webfonts hat sich das verändert. Gut ausgebaute, beliebte Webfonts sind beispielsweise die Open Sans, die Source Sans Pro und die Myriad Pro. Alle besitzen weit mehr als vier Schnitte. Es gibt jeweils ganze 4 bis 6 Fetten mit je einer italic-Variante. Was uns vor ein Problem stellt. Ausgehend davon, wie viele Schnitte des Webfonts wir tatsächlich verwenden wollen, müssen wir unsere @font-face-Definition und die daraus resulierenden CSS-Regeln entsprechend anpassen.

Fall 1: Ich habe nur eine oder zwei Fetten einer Schrift im Einsatz

Hier muss genau darauf geachtet werden, dass die font-weight-Deklaration im @font-face-Abschnitt mit den verwendeten Werten bei den Element-Eigenschaften übereinstimmt, etwa so:

@font-face {
	font-family: "MegaFont";
	src: url('megafont.woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "MegaFont";
	src: url('megafont-bold.woff');
	font-weight: bold;
	font-style: normal;
}
p {
	font-family: "MegaFont";
}
strong {
	font-family: "MegaFont";
	font-weight: bold;
}

Man beachte insbesondere den gleichbleibenden Namen der Schriftfamilie. Wie der Begriff schon andeutet, bleibt die Familie gleich, lediglich der Einzelschnitt und damit die referenzierte Font-Datei ist eine andere, wenn es um den bold-Schnitt geht.

Fall 2: Ich habe mehr als zwei Fetten einer Schrift im Einsatz

Hier ist es sehr empfehlenswert, auf die zahlenmäßige Notation der Schriftfetten zu wechseln, welche in CSS schon sehr lange existiert, jedoch bisher niemals so richtig notwendig war.

@font-face {
	font-family: "MegaFont";
	src: url('megafont.woff');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: "MegaFont";
	src: url('megafont-bold.woff');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: "MegaFont";
	src: url('megafont-ultrathin.woff');
	font-weight: 100;
	font-style: normal;
}
p {
	font-family: "MegaFont";
	font-weight: 400;
}
strong {
	font-family: "MegaFont";
	font-weight: 700;
}
h1 {
	font-family: "MegaFont";
	font-size: 10em;
	font-weight: 100;
}

Es wäre unnötig kompliziert, den superdünnen Schnitt als eigene Schriftfamilie »MegaFontUltralight« zu deklarieren, und dann über normal anzusprechen. Es ist semantisch nicht richtig (es handelt sich ja um die gleiche Familie), und stellt uns vor Probleme, sobald uns dann doch mal ein bold aus dieser Schriftfamilie reinrutscht, wo gar kein bold eingebunden ist

Was kann man falsch machen?

Offenbar vieles! Es häufen sich Sichtungen von Websites – teils angesehener Kollegen –, bei denen beispielsweise Elemente mit bold gekenzeichnet werden, obwohl die Schrift mit 600er-Fette deklariert wurde. Was nun passiert, ist unschön: Für den Browser entspricht die »bold«-Deklaration einer 700er-Breite. Diese ist aber nicht vorhanden. Statt dessen wird die 600er-Version der Schriftfamilie verwendet und – ihr ahnt es – ordentlich improvisiert. Jede Browserengine macht hier ihr eigenes Ding. Im Mac-Chrome werden die Buchstaben seltsam unscharf und erhalten eine höhere Laufweite. Und genau an dieser Stelle beginnen die Bauchschmerzen, denn diese Art von Seltsamkeit sehen nur wenige Menschen. Die stört es jedoch umso mehr.

Bitte tut euch also den Gefallen, und achtet auf die korrekte Zuweisung der font-weight-Eigenschaft im Rahmen der @font-face-Deklaration, sowie die damit übereinstimmende font-weight bei den Elementen-Eigenschaften. Dann klappt’s auch mit dem netten Typografen von nebenan.

Achtung, Falle: Die Elemente b und strong, sowie alle Headlines sind vom Browserstylesheet standardmäßig mit einem beherzten bold versehen. Sollte eure fette Schriftdeklaration jedoch einen anderen Wert als 700 aufweisen, muss das im Rahmen eines CSS-Resets auch noch bedacht werden. (Das CSS-Äquivalent für normal beträgt übrigens 400 Fetteneinheiten.)

Achtung, Falle 2: Natürlich versuchen die modernen Browser inzwischen, Fehler und Ungenauigkeiten von CSS-Autoren durch Mitdenken zu korrigieren, so auch hier: Findet der Renderer nicht die passende Fette einer Schriftfamilie, nimmt er gerne auch eine oder zwei Stufen knapp daneben und tut, als sei nichts gewesen. Von daher Obacht: Diese Auswirkungen können sich bei jedem Browserupdate ändern.

Achtung, Falle 3: Historische Browser wie der IE 6–8 kommen mit mehr als 2 Fetten in einer deklarierten Schriftfamilie gar nicht klar. Hier muss man leider doch für die dritte und eventuell vierte Fetten-Stufe auf eine eigene font-family ausweichen. Siehe Details in diesem Typekit-Blogbeitrag.

(Danke auch an @maddesigns für seine Slides)

4 Kommentare

  1. DanielHüpenbecker am 9. Februar 2014 #

    Je einfacher er wird, Webfonts einzubinden, um so gruseliger sieht es mitunter aus. Auch mir sind da in letzter Zeit diverse Negativbeispiele aufgefallen, die dem typografisch einigermaßen geschulten Auge nachhaltig zusetzen.
    An und für sich ist das ja nichts neues. Denn auch beim ganz klassischen erstellen von Texten für den Ausdruck tun sich ja viele – eigentlich die meisten – sehr schwer damit einen Font der mehr als zwei Schnitte aufweist irgendwie sinnvoll einzusetzen.
    Je besser ein Font ausgebaut ist, um so mehr typografisches Wissen und gestalterisches Gespür sind nötig um ihn angemessen zur Geltung kommen zu lassen.

    Dennoch finde ich den Artikel klasse, denn wenn mir das nächste Mal jemand diesbezüglich Nachholbedarf zu haben scheint, kann ich hierauf verweisen ;)

  2. Andreas Isaak am 9. Februar 2014 #

    Trotz aller Fallen die aufgezählt werden, manche Webfonts sind einfach schlecht gemacht. Fällt immer dann auf, wenn der fette Schriftschnitt ganze Buchstaben »erdrückt« und ein a nicht mehr als a zu erkennen ist.

    Ich kann dann schon verstehen warum manche Frontend’ler dann auf die eher schlechte Variante umsteigen.

  3. Philipp Rudloff am 21. Mai 2014 #

    Daumen hoch für »Historische Browser […]«. Schöner Artikel. Gut verständlich, denn so ganz von selbst erschließt sich ja doch nicht, wenn man das Hintergrundwissen (noch) nicht hat. Danke. :~)

  4. Nikolaus Rademacher am 15. Juli 2014 #

    Welche Elemente sind denn noch von Haus aus mit »font-weight: bold« versehen?

    Ich komme auf: h1, h2, h3, h4, h5, h6, th, dt, b, strong, optgroup. Hab ich was vergessen?

    Das einfachste wäre schließlich, direkt im Anschluss an den Webfont-@import schnell die Schriftdicken zu setzen (und nicht in der normalize.css).

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.