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

Есть ли каноническое правило, как вертикально центрировать текст в поле? Или, другими словами, как выровнять прямоугольник вокруг текста? Я мог бы представить три варианта на основе типографских метрик (см. Мою неточную иллюстрацию):

• Выровнять по середине x-height
• Выровнять по середине высоты колпачка (« средняя линия »)
• Выровняйте по середине цоколя + высота спуска

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

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

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

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

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

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

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

Подвести итоги / сделать вывод:

Методы, которые я использую:

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

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

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

… и тут:

Коврики «утяжелены» снизу, потому что наш глаз / мозг ощущает силу тяжести. Если коврик имеет одинаковую ширину вокруг, наш мозг «зарегистрирует» дно как немного более узкое (изображение не визуально отцентрировано на мате)
- WetCanvas> Центр обучения> Студийные советы и кадрирование> Обсуждение создания фрейма Перезагрузить страницу Взвешивание нижняя часть мата

Введите Условия

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

БОНУС!

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

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

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

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

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

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

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

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