2. Объяснение, почему струны лучше
Типографика · Вадим Паясу
Струны могут показаться странными с непривычки. Но к чему поощряет модульное мышление? К сохранению модулей, за границы которых нельзя выползать. К чему поощряют оптические струны? Сохранять струны визуально прямыми. Вот пример типичного модульного мышления:
На картинке, которую мне привели в пример, круглые иконки с номерами точно так же прижаты к краю линии выключки. Там огромные расстояния между срифмованными блоками, так что этого почти незаметно. Но если картинку с острыми или округлыми краями засунуть между текстовыми блоками, сразу станет видно, как она уехала вправо:
Если помнить о важности оптических струн, все получается ок. Расфокусировал взгляд, прикинул смещение, сдвинул. Об этом, кстати, знают верстальщики, которые в хороших книгах выносят перенос вправо примерно на половину его длины.
Но об этом забывают веб-дизайнеры, которые делают вот так:
Впрочем, и среди модульщиков попадаются хорошие дизайнеры. С этим я ни в коем случае не стану спорить. Они понимают, что чем больше кегль и выпендрёжней гарнитура, тем левее надо сдвинуть заголовок относительно линии выключки:
И снова это делается ради сохранения струны прямой (на кой для этой процедуры могут понадобиться модули — непонятно). Тут проблема чисто инструментальная и связана с тем, что кегль — это не высота буквы, а высота металлической чушки, на которой она помещалась на заре книгопечатанья. Так что фактические границы букв выглядят примерно так:
Чем крупнее кегль, тем больше свободного места и тем правее сдвигается буква «К». Особенно, если она с засечками.
Тут можно было бы написать про кернинг, как на самом деле работает лайн-хейт и еще немного про выпендрежные шрифты. Но заметка и так слишком разрослась. Я лучше на курсе экранной типографики расскажу. Главное, что от этого знания есть практическая польза. Ведь модуль поощряет верстать так:
А вооружившись струнной типографикой, вы сразу поймете, где косяк. Надеюсь, вы уловили и не надо приводить правильный пример?
Ладно, возьмем случай еще забавней: прямоугольную картинку. Она-то точно впишется в модуль?
Не особенно. Во-первых, из-за того, что правый край у текстового блока есть, а у текста нет, она должна быть немного уже (или будет торчать вправо). А во-вторых, все равно ее нужно на 1–2 пикселя подвинуть левее. А то и на все 5, если скругление сильное. Потому что оптика и глюки для нас важнее геометрии:
Скобки, переносы, кавычки, плюсики
…выносятся за линию выключки. Тут могут быть разные взгляды на то, что и куда выносить. Например, с кавычками уже давно никто не спорит. А вот вынесенное тире я вижу редко — в основном, в моих проектах. Что касается скобок, их можно выносить целиком (как делают в Бюро Горбунова), или на половину их ширины (так мне нравится больше).
Вынос пунктуации работает для плюсов, минусов, галочек, чекбоксов, звездочек и так далее. Это особенно заметно, когда вы беретесь за дизайн интерфейсов. И когда в роли буллитов выступают круглые фотки, как сейчас в айОСи.
Формы
Модульные сетки предпочитают обходить тот щекотливый момент, что в газете форм нет, а в интернете есть. Струны, наоборот, подсказывают, как действовать:
Обратите внимание:
1. Кнопка находится на той же струне, что и тексты в полях формы.
2. Правый край у формы рваный, как у обычных строчек, ширина полей зависит от предполагаемого контента.
3. Чтобы эта форма не развалилась, нужно ее причесать. Роль прически выполняют выровненные по ширине поля и плашка под кнопкой.
4. Кнопка — неделимый объект. Она выравнивается по струне краем, а не надписью.
5. Первая и вторая струны могут находиться на любом расстоянии друг от друга (модульные сетки провоцируют сделать это расстояние кратным ширине модуля). Значит, поля можно подписать как угодно, а не только чтоб подпись влезла по ширине.
6. Размеры поля подсказывают, как его заполнять. В данном примере от пользователя ожидается 4–5 строчек, поэтому поле широкое. Проверено: люди, которые заполняют скилсторовские формы, как раз примерно столько и пишут.
7. Галочка горбуновская ☺
Вообще, форма — слишком важный элемент сайта. Даже если у вас есть модульная сетка, хорошо, когда форма ее ломает. Люди всегда лучше реагируют на что-то неправильное.
Итого: оптические струны помогают сохранять линию выключки прямой в случае с заголовками, иконками-буллитами, картинками и висячей пунктуацией. Кроме того, струны помогают строить формы.
p.s. В примерах использовались работы участников воркшопа «Иллюстрация за неделю».
Теория оптических струн:
1. Модульные сетки, оптические струны
3. Вопрос: как верстать плашки?
4. Струны vs сетки
