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

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

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

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

 
между важными местами
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
Основы
вёрстки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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