30 октября 2010. 18:13
После запуска thegrids.ru было много вопросов и претензий по поводу того, что текст «не лежит на сетке». Я пытался где-то в комментах отвечать и каждый раз приходилось говорить одни и те же слова и получать одни и те же ответы на них.
В вопросе выравнивания текста действительно есть две позиции.
1. Выравнивать так, что бы базовые линии шрифтов находились аккурат на шрифтовой сетке.
С сеткой
Без сетки
2. Выравнивать так, чтобы кегельная площадка у текста находилась между линиями шрифтовой сетки.
С сеткой
Без сетки
Мое субъективное мнение по этому вопросу
Раньше я делал так, как описано в первом случае. Я даже в статьях про сетки советовал делать именно так. У меня постоянно были проблемы из-за этого.
Например, как выравнивать картинки. С одной стороны, следуя принципам модульности, мы по-хорошему должны сделать высоту картинки кратной высоте строки. И разместить, вроде как, должны ее на базовой линии.
Но сверху получается большой некрасивый вертикальный зазор между верхним краем картинки и верхним краем текста.
Сдвигаем картинку с сетки вниз.
Получилось ни два ни полтора.
К тому же при html-верстке это тоже сопровождается дополнительным геморроем.
Я решил отказаться от этого способа выравнивания и решил попробовать принципиально другой — выравнивание по кегельной площадке (если можно так выразиться).
С сеткой
Без сетки
В итоге: текст по сетке, картинка по сетке, верхний вертикальный зазор сбалансирован с нижним и выглядит все гармонично. Не нужно никаких костылей при html-верстке.
Оптика должна рулить, а не тупая геометрия! Никому не нужна эта выверенная абсолютно идеальная точность. Идея вертикального ритма в общей картине, в адекватной точности, а не в пиксельдрочерстве.
Когда можно делать умышленно не по сетке
Синкопы
В музыке есть понятие синкопы — смещение ритмической опоры с сильной доли такта на слабую. Это красивый прием. В дизайне этот прием тоже известен. Его удобно использовать в элементах рубрикации — в заголовках. Например:
Не смотря на то, что у нас соблюдена шрифтовая сетка, заголовок визуально не имеет никакого отношения к озаглавленному абзацу. (См. § 136 Теория близости).
Сделаем синкопу:
С сеткой
Без сетки
Прием полезный, что тут рассказывать еще.
При верстке я пользуюсь калькулятором drewish.com/tools/vertical-rhythm, который позволяет высчитать элементы рубрикации так, чтобы в тексте сохранялся вертикальный ритм.
Списки
В верстке списков тоже может пригодиться синкопа. На практике я столкнулся с такой штукой: списки могут быть с короткими однострочными айтемами и с айтемами в несколько строк. Если айтемам (li) задавать нижнее поле высотой в строку, то «короткие» списки выглядят редко и слишком светло.
С сеткой
Без сетки
Списки с многострочными айтемами при этом в порядке:
С сеткой
Без сетки
Одно из решений проблемы — добавлять вручную к «коротким» списками класс compact который будет для li задавать нижнее поле в два раза меньше:
Без сетки
С сеткой
По-моему, выглядит лучше и аккуратнее. Хотя есть один отрицательный момент: если в списке будет четное количество айтемов, то ритм дальнейшего текста собьется на полстроки. Но я не считаю это большой проблемой: оптика vs. Геометрия.
К чему стремиться
-
Не к бездушному ритму по вертикали, а к улучшению типографики.
-
Ну, точно не к дрочерству.
