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

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

🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

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

 
между важными местами
Shift
между
разворотами

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

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

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

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

Изда­тель­ство Бюро Гор­бу­нова
2015
Артём Горбунов

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

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

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

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

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

УДК 655.262
ББК 85.15

Оглавление

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

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

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

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

УДК 655.262
ББК 85.15

Оглавление

Скрыт 1 разворот

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пустота внутри буквы П в середине слова больше, чем внешнее расстояние до соседних букв О слева и справа

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

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

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

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

Надпись вернула себе имперское достоинство

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

Вместо увеличения интерлиньяжа заменим шрифт на узкий

При том же кегле и интерлиньяже слова лучше отделились

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

Отодвинем подзаголовок на расстояние не меньшее, чем просвет между первыми двумя строками

Надпись вступила в конфликт внутреннего и внешнего с собственной рамкой

Контраст внутреннего и внешнего на всех уровнях — от внутрибуквенных просветов до внешних полей надписи

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

внутреннее ≤ внешнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

внут­рен­нее ≤ внеш­нее

Пустота внутри буквы П в середине слова больше, чем внешнее расстояние до соседних букв О слева и справа

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

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

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

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

Надпись вернула себе имперское достоинство

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

Вместо увеличения интерлиньяжа заменим шрифт на узкий

При том же кегле и интерлиньяже слова лучше отделились

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

Отодвинем подзаголовок на расстояние не меньшее, чем просвет между первыми двумя строками

Надпись вступила в конфликт внутреннего и внешнего с собственной рамкой

Контраст внутреннего и внешнего на всех уровнях — от внутрибуквенных просветов до внешних полей надписи

Прямоугольник делится на другие прямоугольники — и в остатке прямоугольники

Модульность

Главное изобретение человека — не колесо, а прямоугольник. Круг не надо придумывать: посмотрел на небо — висит солнце, бросил камень в озеро — пошли круги. А прямоугольник в природе встречается редко. В самом человеке нет ничего прямоугольного.

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

Прямоугольник получил исключительное значение благодаря способности делиться на любое число прямоугольников любых пропорций.

Модульность

Глав­ное изоб­ре­те­ние чело­века — не колесо, а пря­мо­уголь­ник. Круг не надо при­ду­мы­вать: посмот­рел на небо — висит солнце, бро­сил камень в озеро — пошли круги. А пря­мо­уголь­ник в при­роде встре­ча­ется редко. В самом чело­веке нет ничего прямоугольного.

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

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

Прямоугольник делится на другие прямоугольники — и в остатке прямоугольники

Суще­ствуют осо­бые про­пор­ции и спо­собы деле­ния прямоугольников:

Напри­мер, пря­мо­уголь­ник с про­пор­ци­ями «золо­того сече­ния» отсе­ка­ется квад­ра­том из дру­гого пря­мо­уголь­ника с «золо­тым сече­нием». И так до бесконечности.

А пря­мо­уголь­ник c длин­ной сто­ро­ной, рав­ной диа­го­нали квад­рата с его корот­кой сто­ро­ной, вос­про­из­во­дится в мень­шем раз­мере при деле­нии попо­лам. Это свой­ство в основе линейки фор­ма­тов бумаги ДИН.

Существуют особые пропорции и способы деления прямоугольников:

Например, прямоугольник с пропорциями «золотого сечения» отсекается квадратом из другого прямоугольника с «золотым сечением». И так до бесконечности.

А прямоугольник c длинной стороной, равной диагонали квадрата с его короткой стороной, воспроизводится в меньшем размере при делении пополам. Это свойство в основе линейки форматов бумаги ДИН.

Конфигурация татами в типовых комнатах. Показан тон текстуры циновок при падении света слева. Хайно Энгель. Параметры и конструкция японского дома

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

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

Японский коврик «татами» — прямоугольник с пропорциями двух квадратов. Татами вмещает двух сидящих или одного спящего человека, но со временем полы комнат стали покрывать целиком, укладывая маты в разных комбинациях.

Повсеместное производство татами привело к стандартизации их размеров. А стандартизация татами привела к особой системе мер и пропорций всего японского дома. Это пример модульного дизайна в архитектуре.

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

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

Япон­ский ков­рик «татами» — пря­мо­уголь­ник с про­пор­ци­ями двух квад­ра­тов. Татами вме­щает двух сидя­щих или одного спя­щего чело­века, но со вре­ме­нем полы ком­нат стали покры­вать цели­ком, укла­ды­вая маты в раз­ных комбинациях.

Повсе­мест­ное про­из­вод­ство татами при­вело к стан­дар­ти­за­ции их раз­ме­ров. А стан­дар­ти­за­ция татами при­вела к осо­бой системе мер и про­пор­ций всего япон­ского дома. Это при­мер модуль­ного дизайна в архитектуре.

Конфигурация татами в типовых комнатах. Показан тон текстуры циновок при падении света слева.
Хайно Энгель. Параметры и конструкция японского дома

Скрыто 165 разворотов

Гор­бу­нов Артём Сергеевич

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

  • Aвтор и арт‑дирек­тор Артём Горбунов

  • Дизай­нер Алек­сандр Кан

  • Фото­граф Вла­ди­мир Колпаков

  • Кал­ли­граф Анна Данилова

  • Мет­ран­паж и соав­тор тестов
    Сер­гей Фролов

  • Раз­ра­бот­чики Рустам Кул­ма­тов,
    Васи­лий Полов­нёв
    и Андрей Ерес

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

Горбунов Артём Сергеевич

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

  • Aвтор и арт‑директор Артём Горбунов

  • Дизайнер Александр Кан

  • Фотограф Владимир Колпаков

  • Каллиграф Анна Данилова

  • Метранпаж и соавтор тестов
    Сергей Фролов

  • Разработчики Рустам Кулматов,
    Василий Половнёв
    и Андрей Ерес

  • Книга набрана шрифтами
    «Бюросериф» и «Бюросанс»

  • Дизайн‑бюро Артёма Горбунова
    Большая Новодмитровская улица,
    дом 36, строение 2
    Москва, Россия, 127015