x
 
Игорь Г.
27 января 2014

Лет шесть назад один арт-директор научил меня выравнивать строки в инпутах/табах/кнопках/любых контролах и элементах интерфейсов по вертикали таким образом: необходимо центрировать строку относительно строчных букв. Таким образом по массе строка будет располагаться в центре объекта.

Объяснение логичное, и я взял его за правило.

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

Хотелось бы услышать ваше мнение относительно выравнивания текста в контролах. Спасибо.



Ваш арт-директор был прав, что «горизонтальным стеблем» строки служат строчные буквы, и при компоновке отдельных текстовых блоков, как правило, можно пренебречь растущими вверх и вниз «листьями» — прописными буквами и выносными элементами. «Стебель» ограничен снизу базовой линией, сверху — высотой строчных букв, не имеющих выносных элементов, например х или п. Верхнюю линию так и называют — линия строчных или высота строчных, по-английски — x-height.

В зависимости от задачи «стебли» выравниваются по верхней, средней или нижней линии:

Конечно, ни один из этих способов нельзя считать универсальным.

Пренебрегать прописными и выносными элементами не всегда правильно. Чем ближе масштаб к отдельным словам и строкам, тем больше нюансов. Идеальные законы перестают действовать, как в физике:

Если элемент вёрстки имеет масштаб слова, он должен принимать во внимание его анатомию. Обратите внимание, как автограф занимает отведённое ему место в прямоугольнике на заставке «Везер-ченела»:

Строки в полях Скайпа стоят низковато. Но слова, выровненные по вашему рецепту без учёта выносных и прописных, встанут слишком высоко:

На мой вкус:

Поле ввода — однострочный элемент управления, то есть легко становится в текстовую строку:

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор закрыт. Опоздавшим: оставьте нам почту, и мы напишем вам, пока есть свободные места.
 

Поделиться
Отправить

Комментарии

Алексей Рытов
27 января 2014

Игорь, программисты и верстальщики обычно не думают об оптическом выравнивании, дли них существует только математическое выравнивание — margin: 10px 0; Большинство дизайнеров смотрят на это спокойно или не имеют достаточного влияния на кодеров (слушай, уйди со своими мелочами, сроки поджимают). И только если дизайнер хороший и имеет власть над разработчиком (например, на уровне авторитета), тогда о таких мелочах думают и делают.

Лично мне физически тяжело смотреть на неправильное выравнивание. Но я отдаю себе отчет, что 99% пользователей никогда не заметят этого и даже не поймут, если им ткнуть пальцем.

Евгений Лысый
27 января 2014

Лучше всего данное вашим арт-директором правило дополнить еще одним действием — после выравнивания опустите текст на 1-2 пк в зависимости от размера поля. Текст в этом случае будет смотреться более гармонично.

При этом если сумма этих расстояний нечетная (поле высотой 20 пк, а строчные — 7 пк), то текст надо опускать еще ниже:


27 января 2014

Пример центровки «стеблей» строк:

Артём Петренков
27 января 2014

Алексей, не вижу проблемы. Margin — это инструмент, а поскольку высота блока и высота шрифта заранее известны, ничего не мешает сделать не margin: 10px 0; а margin: 9px 0 10px; или что-то вроде того.


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

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

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

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

3 1 5




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

Не знаю, как сказать коллегам о том, что я никудышный сотрудник 2 Как объяснить человеку, не обидев его, что это мой проект, и я не хочу выходить за рамки концепции? 2 Пожалуйста, подскажите, как можно написать лучше? Как избавиться от сухости? 1 Почему вы используете jQuery для хождения по дереву и управления событиями? 2