"Corretamente" centraliza verticalmente o texto em uma caixa

Existe uma regra canônica como centralizar verticalmente o texto em uma caixa? Ou, em outras palavras, como alinhar uma caixa ao redor do texto? Eu poderia imaginar três opções baseadas em métricas tipográficas (veja minha ilustração não exata):

• Alinhar no meio da altura x
• Alinhar no meio da altura do boné (" linha média ")
• Alinhar no meio da tampa + altura do descendente

Sou principalmente um programador, mas muitas vezes tenho que fazer isso e gostaria de saber se existe uma regra compartilhada comum ou se os designers fazem o que bem entendem. Eu preferiria links para livros de design gráfico do que opiniões pessoais.

Boa pergunta!

Eu realmente gosto e concordo com as respostas dadas até agora. Minha resposta se concentra mais na técnica pragmática do que no raciocínio científico ou matemático. : D

Com isso dito, minha preferência é usar a linha de base e a altura x (consulte a seção Termos do tipo abaixo) como ponto de partida para as linhas superior e inferior da minha caixa, respectivamente. Espero que este GIF ajude a explicar:

Depois de alinhar o caminho com a linha de base ou a altura x, uso as teclas de seta SHIFT+ UPou DOWNpara criar preenchimento visual (por padrão, no Photoshop, cada incremento é 10px, portanto, no exemplo acima, adicionei 40pxpreenchimento na parte superior e inferior).

Neste exemplo, você pode ver o que a ferramenta de alinhamento faz se eu pegar a mesma caixa / texto e fizer um "Alinhar centros verticais" (o texto em vermelho é o resultado do uso da ferramenta de alinhamento):

Como você pode ver, é bem próximo ( 2pxdiferença).

Para resumir / concluir:

Técnicas que eu uso:

1. Alinhe os caminhos superior / inferior da caixa com a altura x / linha de base, respectivamente (e depois SHIFTas teclas de seta para fora para preenchimento visual.
2. Da mesma forma, às vezes pressionarei o texto com seta para cima e para baixo até que a linha de base e a altura x atinjam as bordas inferior e superior da caixa; a partir daí, contarei os pixels e depois distribuirei uniformemente o restante entre as duas direções conforme centralizo o texto.
3. Selecione a caixa e o texto, depois faça um “Alinhar centros verticais” e “Alinhar centros horizontais”.
4. Por fim, há momentos em que observo o posicionamento. Geralmente, eu subo ou desci para evitar o “visual” caído (isso se refere ao enquadramento da imagem, consulte a seção Picture Framing abaixo); isso é especialmente verdadeiro se o tamanho da fonte for uma altura de número ímpar e um 1pxdiff for o restante ... Vou mudar o texto 1px(ou mais) para cima em vez de para baixo.

Enquadramento de imagem

O tapete usado mais comum tem uma margem igual a toda a volta. Em obras de arte com o centro visual mais baixo que o centro real, [8]. A ponderação de fundo ou as compensações são usadas com frequência na esteira. A margem inferior é maior que as margens lateral e superior. Ao olhar para uma imagem, os olhos tendem a centrar-se acima do centro físico da imagem. Criando uma margem inferior maior e deslocando o tapete, você chama a atenção para o centro físico da imagem. Top Center é um subconjunto de ponderação inferior, onde as margens superior e lateral são iguais, o que cria um efeito visualmente agradável. Isso é particularmente verdadeiro em tapetes onde as bordas não são iguais, como um 11x14 com uma abertura de 8x10.
- WikiPedia: Mat (enquadramento de imagem)

… e aqui:

Os tapetes são "pesados" na parte inferior, porque nosso olho / cérebro sente a força da gravidade. Se um tapete tiver a mesma largura ao redor, nosso cérebro 'registrará' o fundo como um pouco mais estreito (a imagem não é visualmente centralizada no tapete)
- WetCanvas> The Learning Center> Dicas e enquadramento de estúdio> Discussões sobre o enquadramento Recarregar esta página o fundo do tapete

Termos do tipo

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

BÔNUS!

Aqui está um GIF comparando altura da tampa, descendente, ascendente com todas as letras minúsculas sem descendente / ascendente:

Acho que as duas versões se alinham muito bem dentro da caixa.

O peso visual é tão dinâmico que realmente não pode ser ditado pela altura x, altura da tampa, etc.

Certos elementos em seu design podem puxar o olho em uma direção sobre a outra, apesar de ser matematicamente "central", do lado esquerdo para o direito em comparação com a tela, por exemplo.

O "centro visual" é onde todos os pesos dos elementos são visualmente equilibrados, apesar de não estarem no centro exato.

Você pode tentar experimentar esta ferramenta: http://javier.xyz/visual-center/

O design nem sempre é uma ciência exata. Freqüentemente, o que parece correto pode não ser o verdadeiro centro ou o matematicamente correto.

Especificamente, na sua pergunta, dependeria dos ascendentes e descendentes no texto para determinar melhor o alinhamento óptico. Se não houver ascendentes ou descendentes, o alinhamento ideal pode mudar. Nos seus exemplos, o número três parece ser a melhor escolha, porque existem ascendentes e descendentes, e centralizá-los parece o mais agradável aos olhos.