Webfonts und die verflixte Baseline

Zu hohe Baseline

Manche Webfonts haben ihre Baseline höher definiert als anderen Fonts.

Das fällt auf, wenn man Text vertikal mittig auf einer Fläche oder in einem Rahmen platzieren möchte: Obwohl man oben und unten den gleichen Innenabstand vergibt, steht der Text nicht mittig.

Ok, ein Gestalter hat da oft einen besseren Blick dafür als Entwickler, die über dieses Detail vielleicht sogar hinwegsehen. Schließlich ist der Code ja sauber und logisch:

.button {
  display: inline-block;
  padding: .5em;
  color: white;
  background-color: #669daf;
}

Entfernt man den Innenabstand komplett und behält den Hintergrund – oder markiert man Text – sieht man, dass die Baseline zu hoch liegt.

Auf unserer Webseite und im Blog verwenden wir im Moment für Überschriften die FF Meta Serif Web Pro, gehostet auf Typekit. Diese hab' ich für die Beispiele verwendet, weil sie das Problem demonstriert.

Markiert einfach mal den Text der Überschrift „Zu hohe Baseline”, und ihr seht dass im Text unten mehr Abstand als oben ist.

Hohe Baselines mit CSS korrigieren

Ich bin der Meinung, dass gerade für Webdesign Fonts mit höherer Baseline nicht optimal durchdacht sind. Wenn ihr einen Grund dafür kennt, warum eine Font eine höhere Baseline haben sollte als andere, bitte erleuchtet mich!

Bestimmt ließe sich die Baseline in der Webfont selbst korrigieren, aber wir haben ja bei gehosteten Fonts keinen Zugriff auf die Font, außerdem hätten wir sicher nicht die Rechte, die Font zu bearbeiten.

Also muss CSS her, und die Lösung ist total einfach: Wir sehen uns an, um wie viel die Baseline höher steht, und rechnen diesen Faktor bei unseren Abständen mit ein, hier für unseren Fall für die Überschrift:

h2 {
  padding: .3em 0;
}
.wf-active h2 {
  padding-top: .5em;
}

Der Korrekturfaktor wird nur angewandt, wenn die Webfont auch erfolgreich geladen wurde – logisch, oder? Statt den oberen Abstand größer zu machen, ließe sich der untere natürlich auch verkleinern. Je nach Anwendung.

Ich ermittle den Faktor durch rumprobieren, mit den entsprechenden Werkzeugen für Fonts ließe er sich sicher auch exakt ermitteln.

Durch das Zuweisen des Innenabstands in em wächst dieser natürlich mit der Schriftgröße mit.

Nutzt man Präprozessoren wie SASS oder LESS, bietet sich zur Korrektur natürlich ein Mixin an, in dem man den Faktor nur einmal zentral festlegt, statt ständig selbst zu rechnen.