Jump to content
Vorträge und Workshops in der Pavillon-Presse Weimar. Hier klicken und informieren …

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

Empfohlene Beiträge

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!

Screen Shot 2021-02-09 at 8.35.58 PM.png

Screen Shot 2021-02-09 at 8.36.06 PM.png

Screen Shot 2021-02-09 at 8.36.13 PM.png

Screen Shot 2021-02-09 at 8.36.22 PM.png

Screen Shot 2021-02-09 at 8.36.29 PM.png

Link zu diesem Kommentar
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.

Link zu diesem Kommentar
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.

Link zu diesem Kommentar
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.

  • Gefällt 1
Link zu diesem Kommentar
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.

Link zu diesem Kommentar

Erstelle ein Benutzerkonto oder melde dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Einloggen

Du hast bereits ein Benutzerkonto? Melde dich hier an.

Jetzt anmelden

Unsere Partner

FDI Type Foundry besuchen
Mit über 130.000 Fonts der größte Schriften-Shop im Internet.
Great Design Assets Just Got Affordable
Curated Quality Fonts from I Love Typography
Hier beginnt deine kreative Reise.
Schriftlizenzierung, einfach gemacht.
Das Typografie-Erklär- und Schaubuch – mit Tipps zur konkreten Umsetzung in Adobe InDesign
×
×
  • Neu erstellen...

🍪 Hinweis:

Wir benutzen funktionale Cookies.