Texto centrado verticalmente "correctamente" en un cuadro

¿Existe una regla canónica sobre cómo centrar verticalmente el texto en un cuadro? O, en otras palabras, ¿cómo alinear un cuadro alrededor del texto? Podría imaginar tres opciones basadas en métricas tipográficas (ver mi ilustración no exacta):

  • Alinear en el medio de la altura x
  • Alinear en el centro de la altura de la tapa (" línea media ")
  • Alinear en el centro de la tapa + altura del descensor

ingrese la descripción de la imagen aquí

Soy principalmente un programador, pero a menudo tengo que hacer esto, y me gustaría saber si hay una regla común compartida, o si los diseñadores hacen lo que les parece. Preferiría enlaces a libros de diseño gráfico en lugar de opiniones personales.

La relación entre las alturas de mayúsculas y minúsculas es un factor importante aquí. La respuesta bien puede ser "depende": de la fuente.
alguien acaba de hacer una pregunta similar hoy, pero esta es más completa y está mejor escrita
Se ha preguntado esto y no hay una solución realmente buena para ello, incluso las palabras individuales tienden a querer centrarse en diferentes lugares en muchas fuentes. No existe una solución matemática totalmente correcta.

Respuestas (3)

¡Buena pregunta!

Realmente me gustan y estoy de acuerdo con las respuestas dadas hasta ahora. Mi respuesta se centra más en la técnica pragmática que en el razonamiento científico o matemático. :D

Dicho esto, mi preferencia es usar la línea de base y la altura x (consulte la sección Términos de tipo a continuación) como punto de partida para las líneas superior e inferior de mi cuadro, respectivamente. Esperemos que este GIF ayude a explicar:

ingrese la descripción de la imagen aquí

Una vez que consigo que la ruta se alinee con la línea de base o la altura x, uso las teclas SHIFT+ UPo DOWNde flecha para crear un relleno visual (de forma predeterminada, en Photoshop, cada incremento es 10px, por lo que en el ejemplo anterior, agregué 40pxrelleno en la parte superior y abajo).

En este ejemplo, puede ver lo que hace la herramienta de alineación si tuviera que tomar el mismo cuadro/texto y hacer "Alinear centros verticales" (el texto rojo es el resultado de usar la herramienta de alineación):

ingrese la descripción de la imagen aquí

Como puede ver, está bastante cerca ( 2pxdiferencia).

Para resumir/concluir:

Técnicas que uso:

  1. Alinee las rutas superior/inferior del cuadro con la altura x/línea de base respectivamente (y luego SHIFTlas teclas de flecha hacia afuera para el relleno visual).
  2. Del mismo modo, a veces utilizo teclas de flecha para subir y bajar el texto hasta que la línea de base y la altura x se encuentren con los bordes inferior y superior del cuadro; a partir de ahí, contaré los píxeles y luego distribuiré uniformemente el resto entre las dos direcciones mientras centro el texto.
  3. Seleccione tanto el cuadro como el texto, luego haga "Alinear centros verticales" y "Alinear centros horizontales".
  4. Por último, hay momentos en los que observo la ubicación. Por lo general, subo hacia arriba en lugar de hacia abajo para evitar el "pandeo" visual (esto se relaciona con el encuadre de la imagen, consulte la sección Encuadre de la imagen a continuación); esto es especialmente cierto si el tamaño de fuente es una altura de número impar y una 1pxdiferencia es el resto... Desplazaré el texto 1px(o más) hacia arriba en lugar de hacia abajo.

encuadre de cuadros

El tapete usado más común tiene un margen igual en todos los sentidos. En obras de arte con el centro visual más bajo que el centro real,.[8] La ponderación inferior o las compensaciones se utilizan con frecuencia en las esteras. El margen inferior se hace más grande que los márgenes lateral y superior. Al mirar una imagen, los ojos tienden a centrarse más arriba que el centro físico de la imagen. Al crear un margen inferior más grande y desplazar el tapete, atrae la atención hacia el centro físico de la imagen. Centro superior es un subconjunto de ponderación inferior donde los márgenes superior y lateral son iguales, lo que crea un efecto visual agradable. Esto es particularmente cierto en los tapetes donde los bordes no son iguales, como un 11x14 con una abertura de 8x10.
– WikiPedia: Mat (encuadre de imagen)

… y aquí:

Las esteras están 'pesadas' en la parte inferior porque nuestro ojo/cerebro siente la atracción de la gravedad. Si un tapete tiene el mismo ancho alrededor, nuestro cerebro 'registrará' la parte inferior como ligeramente más estrecha (la imagen no está centrada visualmente en el tapete)
– WetCanvas > The Learning Center > Studio Tips and Framing > Frameing Discussions Recargar esta página Ponderación la parte inferior de la alfombra

Términos de tipo

ingrese la descripción de la imagen aquí
– https://www.supremo.tv/typeterms/

¡PRIMA!

Aquí hay un GIF que compara la altura de la tapa, el descendente, el ascendente con todas las minúsculas sin descendentes/ascendentes:

ingrese la descripción de la imagen aquí

Creo que ambas versiones se alinean bastante bien dentro de la caja.

El peso visual es tan dinámico que realmente no puede ser dictado por la altura x, la altura de la tapa, etc.

Ciertos elementos en su diseño pueden atraer la atención en una dirección sobre la otra a pesar de ser matemáticamente "centro", de izquierda a derecha en comparación con el lienzo, por ejemplo.

El "centro visual" es donde todos los pesos de los elementos se equilibran visualmente a pesar de no estar en el centro exacto.

Puede intentar experimentar con esta herramienta: http://javier.xyz/visual-center/

¡Bienvenidos a Diseño Gráfico! Si bien esto puede responder teóricamente a la pregunta, sería preferible incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia.
Gracias Luciano, espero que mi edición explique mejor mi pensamiento.
¿Qué pasa si este texto es dinámico para que varíen los ascendentes y descendentes? ¿Qué regla sigues entonces?
Solo me importa el texto en latín. Pero gracias por hacerme pensar en el peso. Ese sería un argumento para la versión 1, porque la mayor parte de la negrura está dentro de la altura x, con algunos ascendentes y descendentes "saliendo" a veces.

El diseño no siempre es una ciencia exacta. A menudo, lo que parece correcto puede no ser el verdadero centro o lo que es matemáticamente correcto.

Específicamente, en su pregunta, dependería de los ascendentes y descendentes en el texto para determinar mejor la alineación óptica. Si no hay ascendentes ni descendentes, la alineación ideal puede cambiar. En sus ejemplos, el número tres parece la mejor opción porque hay ascendentes y descendentes y centrarlos parece lo más agradable a la vista.

¿Qué pasa si este texto es dinámico para que varíen los ascendentes y descendentes? ¿Qué regla sigues entonces?
Zach, si la tipografía es de suma importancia, querrás ajustar cada cuadro manualmente hasta donde tu mente/ojo te diga que está equilibrado (he pasado muchas horas ajustando los detalles finos de un diseño). Si necesita crear un estilo que se repetirá con frecuencia, puede crear 3 estilos: ascendente pesado, descendente pesado y neutral (no estoy seguro de qué software está usando). Esto tampoco será exacto, pero debería resultar algo equilibrado. Si se elige un solo estilo para todo el texto, puede que sea más fácil, pero la tipografía se verá afectada.
También me interesa más el caso en el que el texto es dinámico y el estilo debe ser reutilizable (como las barras de navegación o los botones). No necesita ser perfecto como cuando diseñas un logo o un icono. Pero, ¿cómo crearía el estilo "neutral" que mencionas? ¿Solo a simple vista?
@ernesto, debe comprometerse, eligió un lugar que funciona en una instancia y luego ignora todos los casos en los que no funciona. Asi es como funciona. Solo tienes que aceptar que no puedes ganar en todos los casos.
Texto centrado verticalmente "correctamente" en un cuadro
RespuestasAquíPolítica de privacidad1y, 0v