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

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

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

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

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
Артём Гор­бу­нов

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

Изда­тель­ство Бюро Гор­бу­нова
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

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Модульность

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

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

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

Модульность

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Галилео Галилей. Звездный вестник. Венеция, 1610

Немате­ри­аль­ная инфор­ма­ция полу­чи­ла физи­че­скую пря­мо­уголь­ную фор­му — «флет­ланд» в тер­ми­но­ло­гии Эдварда Тафти.

В 20 веке типо­гра­фы при­ду­ма­ли делить стра­ни­цу на неви­ди­мые пря­мо­уголь­ни­ки — изоб­ре­ли модуль­ную сетку.

Вариации макетов по модульной сетке из 32 ячеек.
Йозеф Мюллер‑Брокман. Модульные системы в графическом дизайне

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

Галилео Галилей. Звездный вестник. Венеция, 1610

Немате­ри­аль­ная инфор­ма­ция полу­чи­ла физи­че­скую пря­мо­уголь­ную фор­му — «флет­ланд» в тер­ми­но­ло­гии Эдварда Тафти.

В 20 веке типо­гра­фы при­ду­ма­ли делить стра­ни­цу на неви­ди­мые пря­мо­уголь­ни­ки — изоб­ре­ли модуль­ную сетку.

Вариации макетов по модульной сетке из 32 ячеек.
Йозеф Мюллер‑Брокман. Модульные системы в графическом дизайне

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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