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

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

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

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

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

Оглавление

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

Заголовок

Заго­ло­вок — базо­вый эле­мент вёрстки.

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

Заголо­вок — не про­сто фор­маль­ное резю­ме тек­ста, ина­че от него сто­и­ло бы изба­вить­ся как от лиш­не­го повтора.

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

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

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

Заголо­вок слу­жит якор­ным объ­ек­том, орга­ни­зу­ет стра­ни­цу и её отдель­ные части. Обо­зна­ча­ет и даёт фор­му бло­кам тек­ста, направ­ля­ет чте­ние. Разме­ры заго­лов­ков пока­зы­ва­ют срав­ни­тель­ную важ­ность или логи­че­скую вло­жен­ность текстов.

Заголовок

Заго­ло­вок — базо­вый эле­мент вёрстки.

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

Заголо­вок — не про­сто фор­маль­ное резю­ме тек­ста, ина­че от него сто­и­ло бы изба­вить­ся как от лиш­не­го повтора.

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

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

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

Заголо­вок слу­жит якор­ным объ­ек­том, орга­ни­зу­ет стра­ни­цу и её отдель­ные части. Обо­зна­ча­ет и даёт фор­му бло­кам тек­ста, направ­ля­ет чте­ние. Разме­ры заго­лов­ков пока­зы­ва­ют срав­ни­тель­ную важ­ность или логи­че­скую вло­жен­ность текстов.

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

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

плохо

хорошо

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

Жизнь и приключения Робинзона Крузо

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

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

плохо

Жизнь и удивительные приключения Робинзона
Крузо

хорошо

Жизнь и удивительные приключения Робинзона Крузо

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

Заголо­вок — син­так­си­че­ски само­сто­я­тель­ный цель­ный эле­мент. Сегодня пло­хой тон визу­аль­но дро­бить его на части стилями:

Этот при­ём под­хо­дит в ред­ких слу­ча­ях вро­де книж­но­го титу­ла или пла­ка­та. Даже «без­обид­ное» выде­ле­ние жир­ным части заго­лов­ка в деко­ра­тив­ных целях часто выда­ёт люби­тель­скую вёрстку:

Это не зна­чит, что заго­ло­вок не может быть состав­ным. Допол­ни­тель­ные эле­мен­ты заго­лов­ка помо­га­ют сде­лать его основ­ное тело коро­че и замет­нее, сори­ен­ти­ро­вать и заин­те­ре­со­вать читателя.

Бирка

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

Двойной заголовок

Графика, маркер или знак

Заголо­вок — син­так­си­че­ски само­сто­я­тель­ный цель­ный эле­мент. Сегодня пло­хой тон визу­аль­но дро­бить его на части стилями:

Жизнь
и уди­ви­тель­ные при­клю­че­ния
Робин­зона Крузо

Этот при­ём под­хо­дит в ред­ких слу­ча­ях вро­де книж­но­го титу­ла или пла­ка­та. Даже «без­обид­ное» выде­ле­ние жир­ным части заго­лов­ка в деко­ра­тив­ных целях часто выда­ёт люби­тель­скую вёрстку:

Жизнь и уди­ви­тель­ные приключения

Робин­зона Крузо

Бирка

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

Двойной заголовок

Графика, маркер или знак

Это не зна­чит, что заго­ло­вок не может быть состав­ным. Допол­ни­тель­ные эле­мен­ты заго­лов­ка помо­га­ют сде­лать его основ­ное тело коро­че и замет­нее, сори­ен­ти­ро­вать и заин­те­ре­со­вать читателя.

Заголо­вок обыч­но «накры­ва­ет» тек­сто­вый модуль, к кото­ро­му отно­сит­ся, и при­ни­ма­ет его фор­му. Заголо­вок помо­га­ет отде­лить сосед­ние моду­ли и под­ска­зать направ­ле­ние чте­ния, напри­мер, в этом гори­зон­таль­ном модуле.

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

В таких слу­ча­ях при­хо­дит­ся допол­ни­тель­но отде­лять моду­ли, напри­мер линейками.

Заголо­вок обыч­но «накры­ва­ет» тек­сто­вый модуль, к кото­ро­му отно­сит­ся, и при­ни­ма­ет его фор­му. Заголо­вок помо­га­ет отде­лить сосед­ние моду­ли и под­ска­зать направ­ле­ние чте­ния, напри­мер, в этом гори­зон­таль­ном модуле.

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

В таких слу­ча­ях при­хо­дит­ся допол­ни­тель­но отде­лять моду­ли, напри­мер линейками.

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

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

плохо

хорошо

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

О вертикальных расстояниях у заголовков:

плохо

хорошо

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

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

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

О вертикальных расстояниях у заголовков:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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