Text in einem Feld vertikal „richtig“ zentrieren

16

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

Bildbeschreibung hier eingeben

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.

ernesto
quelle
1
Das Verhältnis von Groß- und Kleinschreibung spielt hier eine wichtige Rolle. Die Antwort könnte sehr wohl "es kommt darauf an" - abhängig von der Schriftart.
USR2564301
jemand hat heute eine ähnliche Frage gestellt, aber diese ist vollständiger und besser geschrieben
Luciano
2
Dies wurde gefragt und es gibt keine wirklich gute Lösung dafür. Selbst einzelne Wörter möchten in der Regel an verschiedenen Stellen in vielen Schriftarten zentriert werden. Es gibt keine völlig korrekte mathematische Lösung.
Joojaa

Antworten:

5

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:

Bildbeschreibung hier eingeben

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):

Bildbeschreibung hier eingeben

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

Bildbeschreibung hier eingeben
- 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:

Bildbeschreibung hier eingeben

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

mhulse
quelle
4

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/

Storm Brewer
quelle
Willkommen bei Graphic Design! Während dies theoretisch die Frage beantworten mag, wäre es vorzuziehen , die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen.
Luciano
Vielen Dank, Luciano, ich hoffe, dass meine Bearbeitung mein Denken weiter erklärt
Storm Brewer
Was passiert, wenn dieser Text dynamisch ist und die Auf- und Abwärtsbewegungen variieren? Welche Regel befolgst du dann?
Zach Saucier
Ich interessiere mich nur für lateinischen Text. Aber danke, dass ich über Gewicht nachgedacht habe. Dies wäre ein Argument für Version 1, da der größte Teil der Schwärze innerhalb der x-Höhe liegt und einige Auf- und Abwärtsbewegungen manchmal "ausgehen".
ernesto
3

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.

ispaany
quelle
Was passiert, wenn dieser Text dynamisch ist und die Auf- und Abwärtsbewegungen variieren? Welche Regel befolgst du dann?
Zach Saucier
Zach, wenn Typografie von äußerster Wichtigkeit ist, sollten Sie jedes Kästchen manuell so einstellen, dass Ihr Verstand / Auge feststellt, dass es ausgeglichen ist (ich habe viele Stunden damit verbracht, die feinen Details eines Designs zu optimieren). Wenn Sie einen Stil erstellen müssen, der häufig wiederholt wird, können Sie drei Stile erstellen: Ascender Heavy, Descender Heavy und Neutral (nicht sicher, welche Software Sie verwenden). Auch dies wird nicht exakt sein, sollte sich aber als ausgewogen herausstellen. Wenn für den gesamten Text ein einziger Stil ausgewählt wird, erleichtert dies möglicherweise die Arbeit, aber die Typografie leidet darunter.
ispaany
Ich interessiere mich auch mehr für den Fall, dass Text dynamisch ist und der Stil wiederverwendbar sein sollte (wie Navigationsleisten oder Schaltflächen). Es muss nicht perfekt sein, wie wenn Sie ein Logo oder eine Ikone entwerfen. Aber wie würde ich den von Ihnen erwähnten "neutralen" Stil kreieren? Nur mit dem Auge?
Ernesto
@ernesto Sie müssen einen Kompromiss eingehen, indem Sie einen Ort auswählen, der in einer Instanz funktioniert, und dann alle Fälle ignorieren, in denen dies nicht der Fall ist. So funktioniert das. Sie müssen nur akzeptieren, dass Sie nicht in allen Fällen gewinnen können.
Joojaa