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.
typography
text
alignment
best-practice
ernesto
quelle
quelle
Antworten:
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
10px
so, dass ich im obigen Beispiel den Abstand40px
oben 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 (
2px
Unterschied).Zusammenfassend:
Techniken, die ich benutze:
1px
Unterschied der Rest ist. Ich werde den Text1px
(oder mehr) nach oben statt nach unten verschieben.Bilderrahmen
… und hier:
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.
quelle
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/
quelle
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.
quelle