Школа
Интерфейс

О выравнивании по вертикали текста на кнопках

Здравствуйте!

Мы постоянно спорим с арт‑директором о выравнивании по вертикали текста на кнопках. Я выравниваю по прописным буквам, он же говорит, что это неправильно, и выравнивать надо по строчным. Кто из нас прав и почему?

Евгений
17 июня 2013
👁 3733   🗩7
Интерфейс

О выравнивании по вертикали текста на кнопках

Здравствуйте!

Мы постоянно спорим с арт‑директором о выравнивании по вертикали текста на кнопках. Я выравниваю по прописным буквам, он же говорит, что это неправильно, и выравнивать надо по строчным. Кто из нас прав и почему?

Евгений
17 июня 2013
👁 3733   🗩7
Илья Бирман
Арт‑директор и соавтор курса «Пользовательский интерфейс и представление информации»
Полезно
  
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать

Не знаю, кто из вас прав, но на верхней кнопке текст хочется поднять на пиксель выше, а на нижней — опустить на пиксель ниже.

Полезно
  
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

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

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

Посетила странная мысль: разделить элементы странички по степени важности. Например, тегом data‑importance со значениями low, normal, high, или, соответственно, целочисленные 1, 2, 3. Пользователь сможет легко убрать лишнее из личных настроек сайта или браузера (см. плагин stylish; с его помощью моя википедия выглядит вот так: http://yakunins.com/lj/wiki-big.png — но хочется ещё и быстро убрать лишнее).

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

В словах «Да», «КПСС», «уруру» и «Послать всех на свои места» разные пропорции прописных и строчных. Если кнопка одна, надо решать на месте. Если кнопок много, надо выбирать общую политику.

В «советах», кстати, текст хочется поднять :‑)

На эту тему есть глава в книге «Пиксельная точность» (Pixel Perfect Precision, http://cdn.ustwo.co.uk/PPP/PPP2.pdf):

«[Выше представлены] три способа вертикального выравнивания текста на кнопках. Есть несколько параметров, которые могу повлиять на выбор оптимального метода, как‑то́ используемый шрифт (например, различное соотношение высоты прописной к высоте строчной), использование сплошных прописных, сплошных строчных, капители либо цифр.»

Напомню о том, что верхняя часть всегда кажется больше, чем нижняя, поэтому всё, что выравнивается по вертикали, нужно чуть‑чуть смещать вверх.

Александр Кравчук

Будем реалистами. Идеальный мир на картинке не всегда удаётся реализовать с точностью до пикселя в вёрстке.

  1. Текст может гулять по вертикали. Line‑height, привет!

  2. Рендеринг тоже влияет на оптическое восприятие шрифта.

Если это универсальное решение для множества кнопок, логично делать одинаковые отступы от самых высоких символов (Ау)

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы