«Правильно» вертикально центрировать текст в поле

Хороший вопрос!

Мне очень нравятся ответы, данные до сих пор, и я согласен с ними. Мой ответ больше сосредоточен на прагматической технике, а не на научных или математических рассуждениях. :D

С учетом сказанного я предпочитаю использовать базовую линию и x-высоту (см. раздел « Типовые термины » ниже) в качестве отправной точки для верхней и нижней линий моего блока соответственно. Надеюсь, этот GIF поможет объяснить:

Как только я получаю путь, соответствующий базовой линии или высоте x, я использую SHIFT+ UPили DOWNклавиши со стрелками для создания визуального отступа (по умолчанию в Photoshop каждое приращение равно 10px, поэтому в приведенном выше примере я добавил 40pxотступ сверху и нижний).

В этом примере вы можете увидеть, что делает инструмент выравнивания, если я возьму тот же блок/текст и выполню «Выравнивание по центру по вертикали» (красный текст — результат использования инструмента выравнивания):

Как видите, это довольно близко ( 2pxразница).

Резюмируя/подводя итог:

Техники, которые я использую:

1. Выровняйте верхний/нижний пути поля по оси x/базовой линии соответственно (а затем SHIFTклавиши со стрелками наружу для визуального заполнения.
2. Точно так же иногда я буду перемещать текст вверх и вниз, пока его базовая линия и высота x не совпадут с нижней и верхней границами поля; оттуда я буду считать пиксели, а затем равномерно распределять остаток между двумя направлениями по мере центрирования текста.
3. Выберите поле и текст, затем выполните «Выровнять центры по вертикали» и «Выровнять центры по горизонтали».
4. Наконец, бывают случаи, когда я оцениваю размещение. Обычно я иду вверх, а не вниз, чтобы избежать визуального «провисания» (это относится к кадрированию изображения, см. раздел «Обрамление изображения » ниже); это особенно верно, если размер шрифта имеет нечетную высоту, а 1pxразница — это остаток… Я сдвину текст 1px(или больше) вверх, а не вниз.

Обрамление картины

Самый распространенный б/у мат имеет одинаковый запас по всему периметру. На произведениях искусства с визуальным центром ниже фактического центра.[8] Нижнее утяжеление или смещения часто используются в матах. Нижнее поле делается больше, чем боковое и верхнее поля. При взгляде на изображение глаза стремятся центрироваться выше, чем физический центр изображения. Увеличивая нижнее поле и смещая мат, вы привлекаете внимание к физическому центру изображения. Верхний центр — это подмножество нижнего взвешивания, где верхнее и боковые поля равны, что создает визуально приятный эффект. Это особенно верно для матов, где границы не равны, например, 11x14 с отверстием 8x10.
– WikiPedia: Коврик (обрамление картины)

… и тут:

Коврики «утяжелены» снизу, потому что наш глаз/мозг чувствует гравитацию. Если коврик имеет одинаковую ширину со всех сторон, наш мозг «зарегистрирует» нижнюю часть как немного более узкую (изображение визуально не находится в центре коврика )
. нижняя часть коврика

Тип Термины

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

БОНУС!

Вот GIF, сравнивающий высоту заглавной буквы, нисходящий элемент, верхний элемент со всеми строчными буквами без нижнего элемента/возрастания:

Я думаю, что обе версии довольно хорошо сочетаются внутри коробки.

Визуальный вес настолько динамичен, что он действительно не может быть продиктован x-высотой, высотой крышки и т. д.

Некоторые элементы в вашем дизайне могут притягивать взгляд в одном направлении, а не в другом, несмотря на то, что математически они находятся в «центре», например, слева направо по сравнению с холстом.

«Визуальный центр» — это место, где веса всех элементов визуально сбалансированы, несмотря на то, что они не находятся точно в центре.

Вы можете попробовать поэкспериментировать с этим инструментом: http://javier.xyz/visual-center/

Дизайн не всегда является точной наукой. Часто то, что выглядит правильным, может не быть истинным центром или математически правильным.

В частности, в вашем вопросе это будет зависеть от восходящих и нисходящих элементов в тексте, чтобы определить наилучшее оптическое выравнивание. Если нет восходящих или нисходящих элементов, идеальное выравнивание может измениться. В ваших примерах номер три кажется лучшим выбором, потому что есть как восходящие, так и нисходящие элементы, и их центрирование выглядит наиболее приятным для глаз.