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

Точка •

Идеальному точечному объекту соответствует круг — самая эгоистичная фигура на свете. Круг имеет собственный центр и мгновенно привлекает внимание.

Но круг не любит конкуренции, его стоит использовать ограниченно и с осторожностью. Интерфейс второго Бейскемпа атакует кругами:
В вёрстке применимы любые точечные объекты: отдельные буквы и цифры, знаки, логотипы, пиктограммы. Они имеют разнообразную форму, но в отличие от линий и прямоугольников, «центростремительны». У точечного объекта один фокус внимания, он создаёт на странице акцент.

Обтравленные, то есть вырезанные из фона, изображения не имеют чёткой прямоугольной формы и тоже привлекают внимание. На полосе оглавления журнала «Афиши‑Еда» роль точек играют крупные номера страниц в левой колонке, кружок‑фактоид справа сверху, фотографии на белом фоне справа и внизу:
Но даже на прямоугольных фотографиях лица и другие важные объекты выступают самостоятельными силовыми точками. Обратите внимание на лицо продавца, курицу и знак на фотографии рынка — по сути, они полноценно участвуют в вёрстке.

Заметность объекта‑точки зависит от его размера, плотности, контраста к фону, окружающего свободного пространства. И, конечно, всегда измеряется относительно соседних элементов.

Точечные объекты в вёрстке часто выступают в качестве якорных объектов, тяготеют к углам и краям своих модулей:
Линия _

В геометрии точки составляют прямую линию. Линия в типографике — это строка, второй важнейший примитив.

Строка — самый удобный, читабельный, лаконичный, скромный и спокойный элемент вёрстки. Большая удача, если объекты собираются в строку — ей всегда найдётся место в макете.

Логотип, в свою очередь, выступает точкой
Адрес компании «Я расту» занял две строки внизу бланка и освободил всё место наверху для логотипа:
Строка — один из способов «впихнуть невпихуемое», например, срочное объявление или временный блок на сайте. Реклама на Гугле:
Прямоугольник ▭

Прямоугольник — третий примитив вёрстки.

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

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

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


Выравнивание текста в строках и соседних колонках

В «советы» обратился Игорь Г. с просьбой рассказать о выравнивании строк по вертикали:

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

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


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