¿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 (vea 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 de descenso
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 ustedes, los diseñadores, hacen lo que les parece conveniente. Preferiría enlaces a libros de diseño gráfico en lugar de opiniones personales.
typography
text
alignment
best-practice
ernesto
fuente
fuente
Respuestas:
¡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. :RE
Dicho esto, mi preferencia es usar la línea base y la altura x (consulte la sección Términos de tipo a continuación) como el punto de partida para las líneas superior e inferior de mi cuadro, respectivamente. Esperemos que este GIF ayude a explicar:
Una vez que obtengo el camino para alinearlo con la línea base o la altura x, entonces uso las teclas SHIFT+ UPo de DOWNflecha para crear relleno visual (por defecto, en Photoshop, cada incremento es
10px
, así que en el ejemplo anterior, agregué40px
relleno arriba y fondo).En este ejemplo, puede ver qué hace la herramienta de alineación si tuviera que tomar el mismo cuadro / texto y hacer un "Alinear centros verticales" (el texto rojo es el resultado de usar la herramienta de alineación):
Como puede ver, está bastante cerca (
2px
diferencia).Para resumir / concluir:
Técnicas que uso:
1px
diferencia es el resto ... Cambiaré el texto1px
(o más) hacia arriba en lugar de hacia abajo.Enmarcado de cuadros
… y aquí:
Términos de tipo
- https://www.supremo.tv/typeterms/
¡PRIMA!
Aquí hay un GIF que compara la altura de la tapa, el descender, el ascendente con todas las minúsculas sin descender / ascender:
Creo que ambas versiones se alinean bastante bien dentro de la caja.
fuente
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 empujar el ojo en una dirección sobre la otra a pesar de ser matemáticamente "centro", desde su lado izquierdo al derecho 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/
fuente
El diseño no siempre es una ciencia exacta. A menudo, lo que parece correcto, puede no ser lo que es el centro verdadero o lo que es matemáticamente correcto.
Específicamente, en su pregunta, dependerá de los ascendentes y descendentes en el texto para determinar mejor la alineación óptica. Si no hay ascendentes o 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.
fuente