1 заметка с тегом

текст

Центрирование текста

Выравнивание по строчным

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

Программа измеряет горизонтальный центр надписи по высоте прописной буквы, если дизайнер собственноручно не установил параметр смещения x-height.

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

Чем больше разница, тем больше шансов, что плохое центрирование будет бросаться в глаза:

В навигации как раз лучше использовать шрифты с небольшой разницей в высоте прописных, строчных и выносных элементов. Глаз быстрее считывает информацию, и не так очевидны проблемы с выравниванием.



На сайтах эта болезнь видна в кнопках:

На улице — в навигации. К примеру, установленные недавно в Москве навигационные щиты:

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

Исходный:

Исправленный:

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

Надпись и точка

В качестве бонуса стоит упомянуть проблему выравнивания надписи с точкой. Такой прием (со своей специфической болезнью) часто встречается в логотипах.

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

Не имеет значения, существует рамка на самом деле или текст расположен на белой навигационной плашке. Сейчас надпись спустилась вниз и прижалась к левому краю. Чтобы это увидеть, достаточно нарисовать прямоугольники:

Точка не участвует в композиции, а блок надписи центрируется по высоте строчных. Поправим:

Правильные примеры:

Уличный знак в Берлине


Дорожные знаки в Амстердаме


Дорожный знак «Фары и ремень»

После сказанного у вас уже не получится развидеть проблему:

К слову, стиль для Порто очень приятный получился.

2014   верстка   текст   центрирование