1. Модульные сетки, оптические струны
Типографика · Вадим Паясу
С удовольствием делаю апдейт своих убеждений на более продвинутые и полезные. Но для этого нужны аргументы, а модульные сектанты, цветопоклонники и адепты культа золотого сечения не считают их обязательными. Все заканчивается вопросом, как я вообще могу кого-то учить. Как-как — очень хорошо ☺ У меня-то аргументов навалом.
Когда модульные сетки использовать можно
- Когда это зрелищный дизайнерский прием. Пример: клевый модульный сайт из коментов (жаль, дальше началась клоунада).
- В условиях, когда каждый день надо фигарить много информации. Журналист которую может пришлет, а может проебет:
3. И если вам надо спроектировать ресурс на 100–200 страниц, с которым потом будет работать толпа верстальщиков, дизайнеров и контентщиков. Тут если пропустить проектирование модульной сетки, придется серьезно пожалеть, когда таки все равно придется ее внедрять.
Но.
Если вы начинающий веб-дизайнер, и вас учат, что надо пользоваться модульными сетками — вас наебали. Вследствие отключения критического мышления из-за стройности теории создается обманчивое ощущение, что в вебе во всех остальных случаях есть такое явление, как модуль.
Выглядит-то все прилично:
Вот они, модули:
Это были суровые 2000-е, никто не понимал, чем веб отличается от газеты, и дизайнеры выживали как могли. Даже не думали о таких отличиях, надо было плитку класть. Сейчас сайты делают иначе, легче и проще.
Ведь в вебе:
1. Мы не можем до конца контролировать точные размеры шрифта (а значит, полноценно выравнивать по x-line).
2. Мы не можем переносить (на самом деле можем, но по-хорошему это давно должен уметь делать сам браузер).
3. text-align:justify работает настолько отвратительно, что лучше бы его не было совсем.
4. И широкие тексты (как в примере) невозможно читать.
То есть интернет здорово отличается от газеты. Мы же работаем с реалистичным контентом. А он больше похож вот на что:
Размечены следующие оптические струны: базовая линия, икс-лайн, линия выключки и ось, проходящая через кажущийся центр блока. Я не вижу тут никакого модуля. Если подрисовать сетку, выяснится, что контент в нее вообще не попал:
Даже если совсем заморочиться, все только притворяется правильным (на самом деле, нет):
Или надо было по пять строк делать, чтобы сверху икс-лайн совпадал, а снизу бейслайн? Чертовы модули, мне говорили в коментах, что я не умею ими пользоваться, а я не слушал ☹
Выглядит правильно, но это пока. Все начнет проясняться после разговора об оптическом центре. Чтобы лучше объяснить идею, нарисую посередине над текстом иконку:
На самом деле иконка не посередине — но чтобы так казалось, пришлось сжульничать. И это приводит нас к основной претензии к сеткам.
Основная претензия к сеткам
Я бы не доёбывался до модульных сеток, если бы они не поощряли думать по-квадратному. Например, матерый модульщик воткнул бы иконку по центру и на этом успокоился. Тем более, что верстальщику так тоже живется проще («А мне нравится, когда дизайнер размечает модульные сетки. Так удобно верстать сразу. Не то, что у некоторых, где даже направляющих нет, и все приходится смотреть самой»):
Так вот. Про чит-код. Адепты оптических струн (однажды они появятся и будут точно такими же ебнутыми фанатиками) вовремя поняли бы, что струна, которая кажется серединой текстового блока (голубая), на самом деле находится левее геометрического центра (он розовый):
На «правильной» картинке заметно, что иконка уехала вправо? Не прикладывая линейку, а по ощущениям?
Модульность — лишняя абстракция
Все это приводит тому, что у динамического текста нет никакого модуля. Ведь у текстового блока нет правого и нижнего краев. Только две вертикальных струны и набор горизонтальных:
И если это не учитывать, центрированные элементы всегда будут получаться перекошенными.
Польза №1: оптические струны помогают выравнивать текстовые блоки по центру иконок.
Продолжение будет.
p.s. О том, как правильно жульничать с текстом, я рассказываю на воркшопе о типографике.
p.s. В примерах использовались работы участников воркшопа «Иллюстрация за неделю».
Демо приведения типографики в порядок:
§ 1–7
§ 8–14
§ 15–28
Теория оптических струн:
2. Объяснение, почему струны лучше
3. Вопрос: как верстать плашки?
4. Струны vs сетки
