Евгений
18 июня 2013

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

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



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

P. S.

Я проведу практический курс «Пользовательский интерфейс и представление информации» 22, 23, 24 и 26 апреля в Москве

 

Запись открыта до ВС 16 апр


Поделиться

Комментарии

Баир Галсанов
18 июня 2013

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

Сергей Якунин
18 июня 2013

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

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

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

Вадим Паясу
18 июня 2013

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

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

Павел Михалёв
19 июня 2013

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

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

Георгий Марков
19 июня 2013

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

Александр Кравчук
19 июня 2013

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

1. Текст может гулять по вертикали. Line-height, привет!
2. Рендеринг тоже влияет на оптическое восприятие шрифта.

Василий Подтынников
20 июня 2013

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

Недавно всплыло

1 Как создавался новый сайт бюро. Часть вторая 2 5 У меня остаётся ощущение, что я идиот, «рассыпала бобы», но на конкретных ошибках не могу себя поймать 3