Школа
Вёрстка

Насколько критична приводность вёрстки в интерфейсе?

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

Высота строки текста — кастомная, расстояние между абзацами также задано вручную. Строки совпадают только тогда, когда расстояние между абзацами либо нулю, либо равно высоте одной строки.

В первом случае абзацы слипаются, текст читать сложно. Во втором — абзацы разъезжаются, и расстояние между абзацами оказывается больше, чем расстояние между заголовком и первым абзацем. В результате, все абзацы, начиная со второго, «вываливаются» из общего текста.

Нужно ли стремиться к приводности в вебе?

Ирина Герман
15 июня 2022
👁 5667  
Вёрстка

Насколько критична приводность вёрстки в интерфейсе?

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

Высота строки текста — кастомная, расстояние между абзацами также задано вручную. Строки совпадают только тогда, когда расстояние между абзацами либо нулю, либо равно высоте одной строки.

В первом случае абзацы слипаются, текст читать сложно. Во втором — абзацы разъезжаются, и расстояние между абзацами оказывается больше, чем расстояние между заголовком и первым абзацем. В результате, все абзацы, начиная со второго, «вываливаются» из общего текста.

Нужно ли стремиться к приводности в вебе?

Ирина Герман
15 июня 2022
👁 5667  
Михаил Нозик
Арт‑директор и автор курса «Типографика и вёрстка»
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Ирина!

Забейте :‑)

Картинки же тоже могут быть разной высоты, которая необязательно кратна высоте базовой строки. А ещё, если ваш сайт или интерфейс резиновые, картинки могут менять свой размер в зависимости от ширины окна браузера.

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

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

Пара соображений на тему дизайн‑систем:

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

Пара соображений на тему дизайн‑систем:

P. S. При этом на сайте бюро есть сетка базовых линий. Но работает она несколько хитрее, чем в печати. О ней — отдельный совет.

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

Комментариев пока нет

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

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