Schriften (Neue Helvetica) nicht korrekt zentriert vertikal (Web)

[Johnny R.]

Hi,

 

Ich habe das Problem dass einige Schriften scheinbar nicht richtig gerendert werden was besonders bei Tabellen auffällt aber auch anders dargestellt werden kann.  In diesem Fall anhand eines Titels.

 

Hier betrifft es Neue Helvetica—und zwar alle Schnitte bis auf die acht Compressed Varianten welche vertikal korrekt zentriert werden.  Letztere ist auch die einzige Schnittfamilie die ohne LT (Linotype) im Namen daherkommt.  Das Problem gibt es allerdings nicht nur bei Neue Helvetica sondern auch bei anderen kommerziellen und freien Schriften wie vermutlich bekannt sein dürfte.

 

Ich hatte bisher immer das Glück dieses Problem umgehen zu können—in diesem Fall bin ich allerdings auf Neue Helvetica angewiesen.  Ich hänge hier mal fünf Screen Shots an auf welchen zu sehen ist wie sich das Problem bemerkbar macht.  Da ich in Tabellen Compressed und Condensed Schnitte mische fällt das dort besonders stark auf da nur die Compressed Varianten mittig zentriert sitzen während alle anderen Schnitte "zu hoch" stehen.

 

Als Beispiel dafür nutze ich hier eine Neue Helvetica Compressed Variante und drei weitere zufällig gewählte Helvetica Schnitte sowie zum Vergleich Archivo von Google Fonts die ebenfalls korrekt zentriert wird.

 

Meine Frage ist nun:  Wie lässt sich dieses (doch immer wieder auftretende) Problem lösen?  Der Einsatz von Padding und Margin kommt für mich nicht in Frage da ich—wie gesagt—mehrere Schnitte innerhalb einer Tabelle mische und es außerdem als unsauberen Behelf empfinde.  Manchmal hilft es an der Zeilenhöhe oder der Display Einstellung via CSS zu schrauben.  Hier hilft allerdings nicht einmal das.

 

Ich bin dankbar für jeden Tipp!

[Johnny R.]

Screen Shot Info:

 

1: Archivo (korrekt zentriert)

2: Neue Helvetica Compressed (korrekt zentriert)

3 bis 5: Neue Helvetica diverse (zu hoch)

[Gast bertel]

Ich hab mir bei dem Problem nur das Stichwort "Flexbox" gemerkt, ohne mich aber damit auszukennen …

https://blog.kulturbanause.de/2015/11/text-mit-css-vertikal-zentrieren/

Vielleicht hilft’s.

[Johnny R.]

Danke für den Hinweis und den Link.  Allerdings sollte mein CSS passen.  Schließlich wird die Compressed Familie (sowie viele andere Fonts) unter denselben Bedingungen einwandfrei zentriert.  Ich denke es ist eher ein Problem mit der Schrift selbst und wie sie gerendert wird.  Ich habe so ziemlich alle CSS Varianten durch die man sich vorstellen kann.

[Johnny R.]

Ich denke das hier beschreibt das Problem am besten:

 

https://stackoverflow.com/questions/12713580/how-can-i-standardize-helvetica-neue-line-heights-cross-browser-not-about-bold

 

https://stackoverflow.com/questions/33633992/font-poor-vertical-metrics-cause-inconsistent-line-height-rendering-across-brow

 

Ich werde mich wohl mit dem Vertrieb auseinandersetzen müssen denn mit CSS lässt sich das nicht beheben.

[Sebastian Nagel]

Leider keine Lösung ... das hängt durchaus mit (falsch / nicht einheitlich gesetzten) vertikalen Metriken in Fonts zusammen und wie diese jeweils interpretiert werden ... speziell bei Schriften wie der Helvetica, wo es unzählte Font-Varianten verschiedener Hersteller und Generationen gibt, ist nicht wirklich kontrollierbar was passiert – weder bei dir mit deinen Fonts, noch bei einem Betrachter der dann die Seite ansieht und dabei "seinen" lokalen Font verwendet.

Das kann letztlich nur mit einem Webfont gelöst werden, bei dem die Metrik entweder passt, oder bei dem man mit irgendwelchen Padding- oder Transform-Tricks den Fehler ausgleicht, und dabei muss man tunlichst darauf achten dass nicht doch aus Performance-Gründen hier und da ein lokaler Font stattdessen verwendet wird (Fontname identisch ist immer gefährlich).

 

Mittelfristig wird es voraussichtlich eine Lösung dafür geben, mit den CSS-Eigenschaften leading-trim und line-height-trim:

https://github.com/w3c/csswg-drafts/issues/3240

Das setzt sich letztlich über die font-interne vertikale Metrik hinweg und ermittelt neue Basiswerte mit denen dann stattdessen gerechnet wird.

Nachteil: wenn der Font was spezielles benötigt, ist das dahin. Vorteil: man kann Fonts so "reparieren" aber noch besser Schriftmischungen konsistet layouten (im Print kann man da ja immer manuell eingreifen, im Web muss das "automatisch gesteuert" gehen oder gar nicht.

[Johnny R.]

Ja, es sind einfach schlechte vertikale Metriken in der Tat.  Nicht dass mir das zum ersten Mal unterkäme—allerdings war ich etwas verwundert dass das sogar innerhalb einer Familie auftritt (siehe Compress die tadellos rendert).

 

Das Problem wurde soeben insofern behoben als dass sich der Vertrieb entschuldigt hat und die gesamte Familie "repariert" für mich zur Verfügung gestellt hat:

 

"I have built a new Webkit by applying some line-height (bounding-box) adjustments.

"Kindly try installing the new Webkit in your project and it should resolve the issue."

 

Ich war in der Zwischenzeit selbst in der Lage die vertikalen Metriken zu optimieren, was auch funktioniert hat, allerdings bevorzuge ich es doch auf diesem Weg—zumal es nicht meine Aufgabe ist.

 

Ich werde das neue Webkit testen und abschließend das Ergebnis berichten.