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

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

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

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

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

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

На мой вкус:

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

Типографика в вебеНестандартные элементыФорма
Отправить
Поделиться
Запинить

Комментарии

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

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

27 янв 2014

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

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

27 янв 2014

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

27 янв 2014

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

27 янв 2014

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