x
 
↑
Август
6 •

6 •

3 •

5 •

9 •
↓
Антон Корягин
4 августа 2010

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

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

Антон!

Что-то ваша иллюстрация не соответствует тексту. Пишете вы, что измеряете «до верхушки строчной буквы», а на картинке стрелка тянется до верхушки прописной.

Правда, откуда докуда мерить — совершенно несущественно, лишь бы вы одинаково друг друга понимали в команде. Например, если вашу иллюстрацию отправить технологу с комментарием «сделай, пожалуйста, чтобы это расстояние было 40 пикселей», то он сделает то, что вам нужно. Конечно, в коде такие расстояния нужно указывать в эмах (em), а не в пикселях, чтобы они были пропорциональны размеру шрифта. Использование пикселей при обсуждении дизайна обычно подразумевает «вот столько пикселей должно быть в 100% зуме у пользователя со стандартным масштабом шрифтов в ОС».

Добавлю, что, хотя расстояние между блоками можно мерить как угодно, говоря о межстрочном расстоянии (интерлиньяже), подразумевают расстояние между базовыми линиями.
Интерфейс и информация — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

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

Комментарии
Кирилл Казачек
4 августа 2010

Я тоже так раньше делал, но это сильно утомляет. Советую попробовать типографские сетки — это, возможно, облегчит и ускорит работу.
Алексей Рытов
4 августа 2010

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

Поэтому делать нужно на глазок, чтобы было красиво и понятно. А при вёрстке подбирать значение в относительных величинах.
Георгий Иванкин
4 августа 2010

Антон, в ЦССе есть несколько параметров, которые отвечают за расстояния между строками. Во-первых, это line-height: расстояние между базовыми линиями двух строк. На вашем эскизе оно равно 24 пикселям, но, как правильно заметил Илья, в вёрстке предпочтительнее указывать всё расстояние в em-ах (для line-height также можно указывать просто числовой коэффициент, что по сути аналогично). Итак, при размере основного текста в 10 пикселей получаем line-height: 2.4.

Далее предположим, хотя вы этого не указали явно в своем эскизе (как не указывают многие дизайнеры), что для заголовков вам нужна такая же высота строки — 24 пикселя. При этом размер шрифта в заголовке — 13 пикселей (1.3em при размере основного шрифта в 10 пикселей). Значит line-height = 24 / 13 = 1.846153846.

Теперь нам нужно, чтобы «высота строки заголовка (y) минус высота заглавной буквы заголовка (z) плюс расстояние между базовой линией нижней строчки параграфа (x)» было равно 34 пикселям. Так как y и z нам известны, осталось посчитать x: x = 34 – (y – z) = 34 – (24 – 13) = 23px. Это расстояние называется называется margin: дополнительное расстояние с краю блочного элемента. Проанализировав остальной эскиз, верстальщику нужно решить, будет ли удобнее прибавить это расстояние снизу к блоку текста или сверху к заголовку. В первом случае em составляет 10 пикселей, значит искомое расстояние составит 2.3em. Если же придется остановиться на втором варианте и отмерять это расстояние сверху заголовка, оно составит 23 / 13 = 1.769230769em :-)

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

Дополнительная сложность состоит в том, что при пересчёте эмов в пиксели при рендеринге браузеры по-разному округляют получающиеся значения. Поэтому бывает, что в Вебките или в Опере какой-нибудь активный пункт меню, например, вдруг начинает «прыгать» на 1 пиксель, и иногда бывает проще переписать злосчастный кусок на пиксели (особенно, если речь идёт о маленьких значениях в 1, 2, 3 пикселя).

Когда же речь идёт о статическом содержании, как в вашем примере, то, как показывает моя практика, дизайнеры не замечают разницы между 34 и 31 пикселем, поэтому я часто отдаю предпочтение читаемому коду над попиксельным соответствием.

В общем, если вы укажете расстояние от базовой линии нижней строки текста до верха строки заголовка (не верха прописной буквы, а именно верха строки, учитывая line-height), верстальщику, скорее всего, будет немного проще. А если вы укажете это расстояние не в пикселях, а в процентах от высоты строки, например: «после каждого абзаца должен быть отступ, равный высоте строки», или «перед каждым таким заголовком должен быть отступ, равный 120% от высоты строки», то уважение верстальщика вам гарантировано :-)

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

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

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

Вот такой веб 2.0.
1 • Куда поставить ссылку: на поля или в текст? 2 •




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

Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 • Как следует поступить дизайнеру, если клиент постоянно вспоминает «нечто очень важное» 7 • 1 • Правдивость 4 •