Text in einem Feld vertikal „richtig“ zentrieren

Gibt es eine kanonische Regel zum vertikalen Zentrieren von Text in einem Feld? Oder mit anderen Worten, wie man ein Kästchen um Text ausrichtet? Ich könnte mir drei Optionen vorstellen, die auf typografischen Metriken basieren (siehe meine nicht exakte Abbildung):

• In der Mitte der x-Höhe ausrichten
• In der Mitte der Kappenhöhe ausrichten (" Mittellinie ")
• Auf die Mitte der Kappe + der Höhe des Abseilers ausrichten

Ich bin meistens ein Programmierer, aber ich muss das oft tun und möchte wissen, ob es eine gemeinsame Regel gibt oder ob Sie Designer so machen, wie Sie es für richtig halten. Ich würde eher Links zu Grafikdesignbüchern als persönliche Meinungen bevorzugen.

Gute Frage!

Ich mag die bisher gegebenen Antworten wirklich und stimme ihnen zu. Meine Antwort konzentriert sich eher auf pragmatische Techniken als auf wissenschaftliche oder mathematische Überlegungen. : D

Ich bevorzuge es jedoch, die Grundlinie und die x-Höhe (siehe Abschnitt „ Typbegriffe “ weiter unten) als Ausgangspunkt für die oberen bzw. unteren Linien meiner Box zu verwenden. Hoffentlich hilft dieses GIF bei der Erklärung:

Sobald der Pfad mit der Grundlinie oder der x-Höhe übereinstimmt, erstelle ich mit den Pfeiltasten SHIFT+ UPoder DOWNeinen visuellen Abstand (in Photoshop ist jeder Abstand standardmäßig 10pxso, dass ich im obigen Beispiel den Abstand 40pxoben und unten hinzugefügt habe Unterseite).

In diesem Beispiel können Sie sehen, was das Ausrichtungswerkzeug macht, wenn ich dasselbe Kästchen / denselben Text nehme und eine „Ausrichtung vertikaler Zentren“ durchführe (roter Text ist das Ergebnis der Verwendung des Ausrichtungswerkzeugs):

Wie Sie sehen können, ist es ziemlich nah ( 2pxUnterschied).

Zusammenfassend:

Techniken, die ich benutze:

1. Richten Sie die oberen / unteren Pfade des Felds an der x-Höhe / Grundlinie aus (und drücken Sie die SHIFTPfeiltasten nach außen, um eine visuelle Polsterung zu erzielen).
2. In ähnlicher Weise tippe ich manchmal mit den Pfeiltasten auf und ab, bis die Grundlinie und die x-Höhe mit dem unteren und oberen Rand des Felds übereinstimmen. Von dort aus zähle ich die Pixel und verteile dann den Rest gleichmäßig zwischen den beiden Richtungen, während ich den Text zentriere.
3. Wählen Sie sowohl das Kästchen als auch den Text aus und richten Sie dann die vertikalen und horizontalen Zentren aus.
4. Schließlich gibt es Zeiten, in denen ich die Platzierung ins Auge fasse. Normalerweise gehe ich nach oben gegen unten visual „sag“ zu vermeiden (dies Bilderrahmung betrifft, siehe Bild Framing Abschnitt weiter unten); Dies gilt insbesondere dann, wenn die Schriftgröße ungerade ist und ein 1pxUnterschied der Rest ist. Ich werde den Text 1px(oder mehr) nach oben statt nach unten verschieben.

Bilderrahmen

Die am häufigsten verwendete Matte hat ringsum den gleichen Rand. Bei Kunstwerken, deren visuelles Zentrum niedriger als das tatsächliche Zentrum ist. [8] Bottom Weighting oder Offsets werden häufig bei der Mattierung verwendet. Der untere Rand ist größer als der Seiten- und der obere Rand. Wenn Sie ein Bild betrachten, sind die Augen in der Regel höher zentriert als die physische Bildmitte. Indem Sie einen größeren unteren Rand erstellen und die Matte versetzen, lenken Sie den Blick auf die physische Mitte des Bildes. Oberes Zentrum ist eine Teilmenge der unteren Gewichtung, bei der der obere und der seitliche Rand gleich sind, wodurch ein optisch ansprechender Effekt erzielt wird. Dies gilt insbesondere für Matten, bei denen die Ränder nicht gleich sind, z. B. 11 x 14 mit einer Öffnung von 8 x 10.
- WikiPedia: Mat (Bilderrahmen)

… und hier:

Die Matten sind am Boden „beschwert“, weil unser Auge / Gehirn die Anziehungskraft der Schwerkraft spürt. Wenn eine Matte alle um die gleiche Breite ist, wird unser Gehirn ‚Register‘ den Boden als etwas schmaler (das Bild visuell nicht in der Matte zentriert)
- WetCanvas> Das Learning Center> Studio Tipps und Framing> Framing Diskussionen Seite neu laden Gewichtung der Boden der Matte

Geben Sie Begriffe ein

- https://www.supremo.tv/typeterms/

BONUS!

Hier ist ein GIF, das die Kappenhöhe, den Abstieg und den Aufstieg mit Kleinbuchstaben ohne Abstieg / Aufstieg vergleicht:

Ich denke, beide Versionen passen ziemlich gut in die Box.

Das visuelle Gewicht ist so dynamisch, dass es wirklich nicht durch die x-Höhe, die Kappenhöhe usw. bestimmt werden kann.

Bestimmte Elemente in Ihrem Design ziehen das Auge möglicherweise in eine Richtung über die andere, obwohl sie mathematisch gesehen "zentriert" sind, beispielsweise im Vergleich zur Leinwand von links nach rechts.

In der "visuellen Mitte" werden alle Elementgewichte visuell ausgeglichen, obwohl sie nicht genau in der Mitte liegen.

Sie können versuchen, mit diesem Tool zu experimentieren: http://javier.xyz/visual-center/

Design ist nicht immer eine exakte Wissenschaft. Oft ist das, was richtig aussieht, nicht das wahre Zentrum oder das, was mathematisch richtig ist.

Insbesondere in Ihrer Frage würde es von den Auf- und Abwärtsbewegungen im Text abhängen, um die optische Ausrichtung am besten zu bestimmen. Wenn es keine Auf- oder Abstiege gibt, kann sich die ideale Ausrichtung ändern. In Ihren Beispielen scheint Nummer drei die beste Wahl zu sein, da es sowohl Aufsteiger als auch Absteiger gibt und deren Zentrierung für das Auge am angenehmsten ist.