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)