Артём Горбунов

Типографика и вёрстка

Удобно листать не только прокруткой, но и клавишами-стрелками:

http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
 
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
между важными местами
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
Shift
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
между
разворотами

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Издано
Артём Горбунов

Типографика и вёрстка

Издательство Бюро Горбунова
2015
удк 655.262
ббк 85.15
г67
Горбунов А. С.
г67
Типографика и вёрстка. —
М.: Изд-во Бюро Горбунова, 2015
ISBN 978-5-9907024-0-0

Первая кни­га Издатель­ства Дизайн-бюро Артёма Горбунова — прак­ти­че­ское руко­вод­ство по типо­гра­фи­ке и вёрст­ке с акцен­том на маке­ти­ро­ва­нии для экра­на. Учебник пред­на­зна­чен для дизай­не­ров, редак­то­ров и разработчиков.

К сожа­ле­нию, из мно­го­чис­лен­ных книг о типо­гра­фи­ке и модуль­ных сет­ках оста­ёт­ся непо­нят­но, как имен­но собрать выра­зи­тель­ный макет с проч­ной кон­струк­ци­ей. В луч­шем слу­чае дизай­не­ру оста­ёт­ся выужи­вать кру­пи­цы смыс­ла и копи­ро­вать удач­ные примеры.

«Типогра­фи­ка и вёрст­ка» после­до­ва­тель­но отве­ча­ет на вопрос как. Автор вво­дит прин­ци­пы модуль­но­сти и якор­ных объ­ек­тов, пра­ви­ло внут­рен­не­го и внеш­не­го. Затем шаг за шагом нагляд­но объ­яс­ня­ет, как добить­ся акку­рат­ной и плот­ной вёрст­ки сай­тов, сервисов и СМИ.

УДК 655.262
ББК 85.15

Оглавление

1
Основы
вёрстки

Правило внутреннего и внешнего

Типографы века­ми иска­ли зако­но­мер­но­сти и свя­зи меж­ду эле­мен­та­ми набо­ра: бук­ва­ми и апро­ша­ми, стро­ка­ми и интер­ли­нья­жем, поло­сой набо­ра и поля­ми. Каждое откры­тие скла­ды­ва­лось в бес­ко­неч­ную копил­ку правил:

Типографы века­ми иска­ли зако­но­мер­но­сти и свя­зи меж­ду эле­мен­та­ми набо­ра: бук­ва­ми и апро­ша­ми, стро­ка­ми и интер­ли­нья­жем, поло­сой набо­ра и поля­ми. Каждое откры­тие скла­ды­ва­лось в бес­ко­неч­ную копил­ку правил:

Типографы века­ми иска­ли зако­но­мер­но­сти и свя­зи меж­ду эле­мен­та­ми набо­ра: бук­ва­ми и апро­ша­ми, стро­ка­ми и интер­ли­нья­жем, поло­сой набо­ра и поля­ми. Каждое откры­тие скла­ды­ва­лось в бес­ко­неч­ную копил­ку правил:

Типографы века­ми иска­ли зако­но­мер­но­сти и свя­зи меж­ду эле­мен­та­ми набо­ра: бук­ва­ми и апро­ша­ми, стро­ка­ми и интер­ли­нья­жем, поло­сой набо­ра и поля­ми. Каждое откры­тие скла­ды­ва­лось в бес­ко­неч­ную копил­ку правил:

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

Современный дизайнер так и собирает зна­ния по крупи­цам — из книг, сове­­тов коллег, заме­чаний арт-директора.

Запомнить даже перечислен­ные пра­вила доволь­но затрудни­тельно. Если дизайнер и вызубрит собствен­ный на­бор пра­вил, всегда найдутся такие, о кото­рых он не слы­шал, — копилка-то бесконечна.

Но одно дело знать огром­ный свод правил, а другое дело последо­вательно приме­нять их к каж­дой части макета. Даже на простенькой стра­нице из заго­ловка и тек­ста оши­бок у новичка найдётся в двад­цать раз больше, чем элементов.

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

«Правило внутрен­него и внеш­него» — базо­вый прин­цип типогра­фики, работа­ющий на всех уров­нях от буквы до разворота.

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

И для того чтобы объект имел самосто­ятельное зна­чение, то есть буква, слово, строка и абзац отде­лялись от соседних, его внутрен­ние рассто­яния должны быть меньше внешних.

МосковскийМетрополитен
Московский
Метрополитен
Имени В. И. Ленина
Московский
Метрополитен

Рассмотрим заголовок из прописных букв.

Штрихи каждой буквы заклю­чают в себе её внутрен­нее прост­ранство. Пустота внутри буквы П в сере­дине слова больше, чем внеш­нее рассто­яние до сосед­них букв О слева и справа. Из-за этого возни­кает ощуще­ние, что сосед­ние буквы вторг­лись в лич­ное прост­ранство друг друга, а вся надпись — слиплась.

Увеличим расстояние между бук­вами, чтобы изме­нить соотно­шение внутрен­него и внеш­него. Каж­дая буква обрела значе­ние и незави­симость, а заголо­вок — архитектурную торжественность.

Добавим к заголовку слово. Слова отде­лены между собой пробе­лом. Для каж­дого слова рассто­яние между бук­вами играет роль «внутрен­него», а межслов­ный про­бел — роль «внеш­него». Из-за того что про­бел лишь немно­гим больше межбук­венного расстояния, слова слиплись.

Сначала попробуем изменить соотно­шение внутрен­него и внеш­него, умень­шив «внутрен­нее» — разряд­ку между бук­вами, но так, чтобы она не стала меньше рассто­яния между собствен­ными штри­хами букв. Всегда дер­жим в голове, что «внутрен­нее» на одном уровне слу­жит «внешним» на другом.

Пробел остался неизмен­ным, но теперь его доста­точно, чтобы отделить слова.

Теперь вместо умень­шения разрядки попро­буем отде­лить слова иначе — перено­сом на следую­щую строку. Межстроч­ный прос­вет срав­ним с межбук­венным рассто­янием. Из-за этого буквы над­писи слива­ются в рисунок шахматной доски.

Увеличим «внешнее» — интерлиньяж. Над­пись вер­нула себе импер­ское достоинство.

А что если не увели­чивать интер­линьяж, а изме­нить шрифт на более узкий?

В узких буквах меньше внутрен­ние прос­веты, зна­чит, они не тре­буют такой боль­шой раз­рядки. При том же кегле и интер­линьяже слова лучше отдели­лись друг от друга. Над­пись стала компакт­нее без ущерба для внутрен­него пространства.

Вернёмся к «импер­ской над­писи» и доба­вим к ней подзаго­ловок. Подзаго­ловок «влез в интер­линьяж» заго­ловка — то есть ока­зался ближе к нему, чем его собствен­ные строки друг к другу.

Нет проблем, увеличим «внешнее».

Допустим, наш заголовок дол­жен умес­титься на таб­личке фиксиро­ванных габа­ритов. Над­пись всту­пила в конф­ликт внутрен­него и внеш­него с собствен­ной рамкой.

Придётся пройтись вниз по всем уров­ням и умень­шить внутрен­ние рассто­яния, сохра­няя конт­раст внутрен­него и внешнего.


Заметим, что для одного и того же кегля мы полу­чили раз­ные прием­лемые соотно­шения внут­ренних и внеш­них рассто­яний. Конт­раст важ­нее конкрет­ного значе­ния пропор­ции — это даёт гиб­кость версталь­щику. Идеаль­ное «сере­бро набора» — это лишь мини­мально возмож­ный конт­раст внутрен­него и внеш­него всех элемен­тов для нейтраль­ного спокой­ного чте­ния. При увеличе­нии конт­раста внутрен­него и внеш­него текст стано­вится замет­нее и выразительнее.

Базовое правило типографики:

внутреннее ≤ внешнее
Пустота внутри буквы П в середине слова больше, чем внешнее расстояние до соседних букв О слева и справа
Каждая буква обрела значение и независимость, а заголовок — архитектурную торжественность
Для каждого слова расстояние между буквами играет роль «внутреннего», а межсловный пробел — роль «внешнего»
Пробел остался неизменным, но теперь его достаточно, чтобы отделить слова
Межстрочный просвет сравним с межбуквенным расстоянием. Из-за этого буквы надписи сливаются в рисунок шахматной доски
Надпись вернула себе имперское достоинство
Межстрочный просвет сравним с межбуквенным расстоянием. Из-за этого буквы надписи сливаются в рисунок шахматной доски
Вместо увеличения интерлиньяжа заменим шрифт на узкий
При том же кегле и интерлиньяже слова лучше отделились
Подзаголовок «влез в интерлиньяж» заголовка — то есть оказался ближе к нему, чем его собственные строки друг к другу
Отодвинем подзаголовок на расстояние не меньшее, чем просвет между первыми двумя строками
Надпись вступила в конфликт внутреннего и внешнего с собственной рамкой
Контраст внутреннего и внешнего на всех уровнях — от внутрибуквенных просветов до внешних полей надписи
m