Сейчас очень модно стало говорить о типографике, относить себя к очередному умнику, который прочитал Лебедева и теперь может позволить себе указывать налево и направо о неправильных кавычках и тире. И все. На этом понятие типографики у большинства людей, которые считают себя гуру этого ремесла, заканчиваются.
Типографика в совокупности с модульной сеткой являются необходимыми и почти достаточными инструментами дизайнера.
Цель — исследовать и использовать на практике методы улучшения читабельности текста, а не «кавычковские» понты, как большинство считает. Работая со шрифтом, достаточно помнить только об одном: то что я делаю на холсте с буквами не должно вызывать затруднений при чтении у конечного пользователя. Вся остальная суета вокруг типографики — всего-лишь грамматика и пунктуация.
Колонки текста
В школе я застал те времена, когда компьютеры еще были вещью больше элитарной, нежели массовой. И рефераты тогда писались в библиотеке на листах а4 формата. Под листы скрепкой прикреплялась зебра — разлинеенный вертикально лист бумаги с ровным шагом. Рукописный текст выглядел гораздо лучше, если он писался под зебру, нежели без нее. Тогда я не догадывался, какой из этого толк и как мне это поможет в будущем. Та самая зебра и есть блюститель вертикального ритма. Текст читается лучше, когда глаз «ходит» через равный интервал.
Особенно несоблюдение вертикального ритма видно на соседних колонках. В примере показаны две рядом стоящие колонки текста: первая набрана Эриалом 12px, вторая — Эриал 11px. Задаем «зебру» в 18 пикселей (то есть полуторный интерлиньяж для основного начертания).
К гадалке не ходи, видно, что варианты справа отличаются от левых ритмичностью: не смотря на разный кегль, высота строки у них равная, причем базовые линии строк обеих колонок лежат на одних и тех же горизонталях.
Решение: установка в body css-параметра line-height глобально для всего документа. Также задаем margin-bottom, равный этой же величине.
Заголовки
Заголовки отличаются от основного текста как минимум кеглем. И размер шрифта заголовка иногда отличается в 2—4 раза от кегля основного начертания. Естественно то, что и высота строки увеличится. Чтобы соблюдать ритм, нужно задавать высоту строки заголовков кратной глобальной высоте.
Помимо параметра line-height придется стрелять и за вертикальными полями — margin-top и margin-bottom. Посмотрим на примере заголовка первого уровня.
Есть подводный камень — всю иерархию заголовков с высотой строки L или 2L выстроить не получиться: текст станет неоднородным по плотности. Например, вот заголовок, скажем, второго уровня:
Поэтому допускается использовать для текста с кеглем, немногим больше основного кегля, глобальную высоту строки помноженную на полтора. И еще один из методов сбалансировать ритм по вертикали в таких случаях — «перекинуть» часть верхнего поля нижнему, или наоборот. Главное то, что в сумме они должны оставаться равны одному и тому же числу, что и до «перебрасывания».
Расчет высоты строчки и вертикальных полей очень тонкое дело. На практике без тренировки математические подсчеты могут затянуться на долго. Поэтому в сети есть множество веб-сервисов, позволяющих рассчитать онлайн все эти значения для заголовков. Например,
этот.
Списки
Списки сходны с обычными абзацами. За исключением расстояния между элементами списка. Его можно оставлять равным значению глобальной высоты строки, но можно брать его половину.
То же касается и вертикальных полей вложенных списков. Обратите внимание: во вложенном списке вертикальные поля уменьшены вдвое.
Картинки
Картинки занимают иногда немалое пространство. Высота картинок может колебаться от мелких «ушек», до огромных по высоте хай-рез джипегов. И это самое сложное для дизайнеров-педантов: за высотой картинки не уследишь без ручного вмешательства. Но если абстрагироваться от слепых следований каким-то канонам и воспринимать их с умом, то станет понятно, что если картинка, скажем, больше 50 пикселей по высоте, то редкий педант заметит то, что ритм сбит. Никто не тыкает линейкой по своему экрану. А глаз заметит расхождение только у Робокопа: у него перед глазами полосочки были вертикально замощены, чтобы он палил неритмично сверстанные страницы :)
Таким образом с картинками проблем почти не остается, за исключением, скажем, «ушек» новостей, которые чаще всего уменьшаются на сервере, и в большинстве случаев их высотой можно управлять. И, естественно, их высота должна быть кратна глобальной высоте строк страницы.
PS
Идеально ритмичные страницы встречаются крайне редко. Некоторые это воспринимают это всего-лишь как хороший тон и используют опционально. Некоторые — слепо следуют вертикальной сетке. Контент на сайте непредсказуем, создать набор универсальных стилей практически нереально. Всегда нужно находить компромисс.
Чтобы увидеть результат вышесказанного, приведу в пример страницу английского дизайнера Стива Маршала. У нее есть
режим включеной «зебры», где весь холст замощен полосками для демонстрации вертикального ритма.
комментарии (40)
Это можно применять не только дизайнерам сайтов, но и бизнес-аналитикам, руководителям проектов.
Наверное, еще много кому, но это я о наиболее для себя актуальном =)
Страница английского дизайнера Стива Маршалла — не образец для подражания. Его правая колонка вместо того, чтобы быть массивом связанного текста выглядит просто набором строк. Но зато в угоду общей сетке, да, очень круто, прям восторг. Английский Дизайнер!
Характерная особенность — «небыдло», вещающее о типографике, спокойно пишет «граматика» и «читабельность». Зато сколько рассуждений про «очередных умников», прочитавших Лебедева, и о «большинстве людей, считающих себя гуру».
То, что вы прочитали не только Лебедева, но и, например, Брингхерста, не делает из вас гуру, который может вещать, что такое хорошо, а что такое плохо. Лучше дали бы отсылку к книгам, чем объяснять то, что плохо поняли сами.
В начале статьи вы поставили цель улучшить читабельность текста, и на первой же картинке-примере под клеймом «хорошо» вы этого не сделали.
Ну и чтобы этот комментарий был хоть сколько оправдан — вот есть хороший букмарклет для сетки s.robgoodlatte.com/demo, а есть то же самое, но скрипт samuel.bowles.es/2007/08/syncotype
На Хабре — первый. Спасибо!
Статья местами неплохая, для людей знающих — очевидная, но встречаются ляпы.
Да и изображения с расплывшимся полосами текстом не приводят в восторг.
Полуторная высота строки для заголовках — это действительно плохо, Вы правы.
Есть еще и другая проблема. Это в полиграфии вы можете высчитывать интерлиньяж врезки так, чтобы высота ее была кратна интерлиньяжу основного текста. А в вебе как прикажете поступать?
Слово «типографика» сейчас употребляется в каком-то новом странном значении; раньше оно означало дизайн с помощью наборных элементов (в противоположность рисованному), а сейчас используется почти как синоним «технического редактирования»… впрочем, в любой роли вещь это, конечно же, нужная и оправданная :) Но правила у нее не такие… механические. Взять, например, основу типографики (и той, и другой) — шрифт. Даже у самого вроде бы геометрически правильного шрифта огруглые буквы чуть больше, чем прямые, центральная линия чуть выше середины, а то, что кажется дугой окружности, вовсе ею не является. Насколько выше (больше и т. п.)? Ответ можно дать только посмотрев на шрифт — то есть на глаз.
Вы правы по поводу шага сетки — он не может быть слишком мелким, потому что при мелком модуле сетка становится случайной. Все верно. Но я хочу подчеркнуть, что высота строки есть некий микромодуль, то есть является единицей измерения и игнорировать этот факт я не могу. По крайней мере в своих проектах я придерживаюсь этого принципа, и не я один.
Впродолжение второй части Вашего комментария отмечу, что сетка не есть цель, а всего лишь инструмент для достижения цели. Первична оптика. (Поэтому закругленные буквы больше.) Вертикальный ритм тоже не является самоцелью. Это инструмент. Цель — оптика, а не глупая геометрия. Поэтому нуджо осознанно использовать этот инструмент и смотреть по обстоятельствам.
Брингхерст удачно сравнил вертикальный ритм с музыкальным тактом: если у вальса темп задан в три четверти — четвертая доля в такте будет лишней и будет резать слух. Тоже и в типографике.
Еще один факт в «оправдание» разумности моей публикации — Йозеф Мюллер-Брокман и его швейцарский абзац — способ отделения абзацев друг от друга пустой строкой. Это тоже все сделано для того, чтобы соблюдать вертикальный ритм.
Я согласен, что оптика — главное, но тогда как раз и следует определять интерлиньяж заголовка на глаз — не может ведь у мелкоочковой Академической и какой-нибудь Lucida Grande с ее гигантским очком быть одинаковый интерлиньяж. Вот тут ошибка будет куда более заметна, чем попадание в базовые линии основного текста.
То что вы написали абсолютно правильно, в издательских системах при правильной верстке это правила соблюдаются, если их соблюдать в вебе будет только лучше. Вопрос в другом в первом примере, у вас есть серьезная ошибка — это висячие предлоги, их необходимо убирать, и тогда у вас изменится и этот абзац. А это значит и другая динамика текста. Так же вы в примерах забываете про оптическую компенсацию. Бесспорно сетка дает дизайнеру много, но применять ее только к тексту не совсем корректно, ну разве только вы не книгу делаете. Ведь модульная сетка применятется к лейауту в целом, и к тексту и к имиджам.
и да я соглашусь с MikhailEdoshin что микромодульных сеток не бывает, модульная сетка это ваш проект организации пространства листа.
Вообще с приходом в дизайн много кого, начали искажаться и понятия, если раньше модульная сетка была инструментом дизайнера-графика, арт директора или издателя, то сейчас люди которые не достаточно понимают что это, искажают само понятие. А ведь сетка это не просто сетка, она работает в связке с композицией и пр.
По тексту выше похоже, что Вы профессионал в своей области. Но смотрите: Вы совершенно не замечаете, как коверкаете и извращаете русский язык! Я понимаю, что на Вас, как и на всех нас, действует окружающая культура, в которой есть силы, сознательно и целенаправленно разрушающие русский язык как основополагающую часть культуры Русской цивилизации. Но если вы профессионал в области, связанной с языком и любите Родину, нужно быть внимательнее к таким вещам.
Вы игнорируете букву Ё. Когда-то Кирилл и Мефодий уничтожили старую русскую азбуку, потом подрезали наш язык в 1918 году. Вы хотите ещё больше обрезать выразительные возможности нашего языка, убрав из него букву Ё?
А что это за слова такие: к лейауту, к имиджам?! Русских слов не нашлось?
Как можно говорить об изысках и тонкостях вроде оптической компенсации при таком отношении к нашему достоянию — родному языку, русской культуре!
Не обижайтесь, но так нельзя, товарищ Flo!
Про типографику многое рассказавают наши преподы на typoholic.ru (Не реклама)
— копирайт под логотипом смотрится абсолютно неуместно
— косяк с заголовком
— разве тире не отделяют пробелами от слов?
— я знал о практике использования горизонтальной сетки, но не знал о вертикальном ритме
Не совсем молодец:
— потому что пинает трупы; это во-первых не совсем красиво, а во-вторых избавило бы меня от прочтения трёх лишних абзацев текста вводных слов;
— зебра практически незаметна на моём жк-мониторе; я и не заметил сначала — не грех и усилить;
— пример 12px и 11px шрифтов рядом — надуманный: такая малая разница в кегле (или как это называется) не используется в жизни, а с бОльшей разницей становится очевидным уродство второй колонки, как нам это и продемонстрировал дизайнер Стив Маршал, спасибо ему за это.
csswizardry.com/typogridphy/
«относить себя к очередному умнику», «указывать налево и направо», «указывать о неправильных кавычках», «цель — исследовать… методы улучшения читабельности текста, а не «кавычковские» понты, как большинство считает», «всего-лишь», «граматика» (под катом не лучше).
Работая со шрифтом, нужно всё-таки вспоминать о грамматике, пунктуации и прочей орфографии, а то то, что вы делаете сейчас с буквами, затруднение при чтении вызывает.
Касательно «вертикального ритма» — каждый уважающий себя дизайнер прекрасно знает о функции “align to baseline grid”, так что только у безграмотных и невежественных бездельников текстовые блоки скачут как попало. В 90% всех изданий тексты жестко привязаны к сетке, рекомендую полюбопытствовать. Это тоже из разряда аксиом, так что повествование очевидного — это и есть понты.
зы. Кстати, у Вас половина картинок не показывается.
Для себя я многое взял, и из комментариев тоже. Будем учиться.
Для себя я многое взял, и из комментариев тоже. Будем учиться.
Ps. Попробовал вышеприведенный скрип на страницах своего проекта и ужаснулся. Ух.
Спасибо, всё правильно, люблю типографику:)
Только вот одно мешает мне спать — в разделе «заголовки» первая картинка: видит бог, что под словом «плохо» заголовок смотрится лучше, чем под вариантом «хорошо». Он не идеален, но лучше. Если на пару пикселей еще раздвинуть строки, будет идеально. Вам так не кажется? Особенно раздражает спор между расстояниями внутри заголовка и между заголовком и текстом в варианте «хорошо».