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

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

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

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