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

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

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

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

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

Оглавление

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

Рассмот­рим отдель­но осо­бен­ный тип моду­ля с иллю­стра­ци­я­ми — «галерею»:

Плохо

Хорошо

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

Мы не под­дер­жи­ва­ем путь лени­вых веб‑дизай­не­ров — мёрт­вые одно­об­раз­ные мат­ри­цы из фото­гра­фий. Жизнь при­хо­дит с раз­но­об­ра­зи­ем раз­ме­ров и формы.

Рассмот­рим отдель­но осо­бен­ный тип моду­ля с иллю­стра­ци­я­ми — «галерею»:

Плохо

Хорошо

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

Мы не под­дер­жи­ва­ем путь лени­вых веб‑дизай­не­ров — мёрт­вые одно­об­раз­ные мат­ри­цы из фото­гра­фий. Жизнь при­хо­дит с раз­но­об­ра­зи­ем раз­ме­ров и формы.

Кирпично

Интересно

К гале­ре­ям при­ме­ни­мо пра­ви­ло модуль­но­сти — бло­ки из фото­гра­фий долж­ны стре­мить­ся к пря­мо­уголь­ной фор­ме. Но «кир­пич» из иллю­стра­ций выгля­дит как… кирпич.

Скучно, душ­но и моно­тон­но. Такой модуль выгля­дит тяже­ло­вес­но и с тру­дом встра­и­ва­ет­ся в стра­ни­цу рядом с другими.

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

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

Кирпично

К гале­ре­ям при­ме­ни­мо пра­ви­ло модуль­но­сти — бло­ки из фото­гра­фий долж­ны стре­мить­ся к пря­мо­уголь­ной фор­ме. Но «кир­пич» из иллю­стра­ций выгля­дит как… кирпич.

Скучно, душ­но и моно­тон­но. Такой модуль выгля­дит тяже­ло­вес­но и с тру­дом встра­и­ва­ет­ся в стра­ни­цу рядом с другими.

Интересно

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

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

Плохо

Хорошо

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

Поэто­му допол­ни­тель­ный воз­дух и под­пи­си луч­ше «отжи­мать» к кра­ям галереи.

Плохо

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

Хорошо

Поэто­му допол­ни­тель­ный воз­дух и под­пи­си луч­ше «отжи­мать» к кра­ям галереи.

Текстовая страница

Приве­дём реко­мен­да­ции по вёрст­ке экран­ной тек­сто­вой стра­ни­цы со ста­тьёй, замет­кой, книж­ной гла­вой или тек­стом о компании.

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

Модульная

Текстовая

Основ­ной текст

Колон­ка основ­но­го тек­ста зани­ма­ет 60⁠—70% шири­ны окна ком­пью­тера или план­шета. В «рези­но­вой» вёрст­ке шири­на тек­сто­вой поло­сы умень­ша­ет­ся или уве­ли­чи­ва­ет­ся с изме­не­ни­ем раз­ме­ра окна или экра­на. Но раз­ре­ше­ние экра­нов посто­ян­но рас­тёт, поэто­му име­ет смысл огра­ни­чи­вать мак­си­маль­ную шири­ну колон­ки тек­ста, чтобы стро­ки не ста­но­ви­лись чрез­мер­но длин­ны­ми, а стра­ни­ца — труд­ной для чтения.

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

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

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

Текстовая страница

Приве­дём реко­мен­да­ции по вёрст­ке экран­ной тек­сто­вой стра­ни­цы со ста­тьёй, замет­кой, книж­ной гла­вой или тек­стом о компании.

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

Модульная страница

Текстовая страница

Основ­ной текст

Колон­ка основ­но­го тек­ста зани­ма­ет 60⁠—70% шири­ны окна ком­пью­тера или план­шета. В «рези­но­вой» вёрст­ке шири­на тек­сто­вой поло­сы умень­ша­ет­ся или уве­ли­чи­ва­ет­ся с изме­не­ни­ем раз­ме­ра окна или экра­на. Но раз­ре­ше­ние экра­нов посто­ян­но рас­тёт, поэто­му име­ет смысл огра­ни­чи­вать мак­си­маль­ную шири­ну колон­ки тек­ста, чтобы стро­ки не ста­но­ви­лись чрез­мер­но длин­ны­ми, а стра­ни­ца — труд­ной для чтения.

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

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

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

Подзаголовки

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

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

Заголов­ки тре­тье­го уровня

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

Подза­го­ло­вок в под­бор к основ­но­му тексту. Ещё один спо­соб избе­жать лиш­них отсту­пов на странице.

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

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

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

Подзаголовки

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

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

Заголов­ки тре­тье­го уровня

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

Подза­го­ло­вок в под­бор к основ­но­му тексту. Ещё один спо­соб избе­жать лиш­них отсту­пов на странице.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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