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

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

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

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

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

Оглавление

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

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

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

плохо

хорошо

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

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

плохо

хорошо

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

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

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

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

Графо­ма­ния, на пер­вый взгляд, отра­жа­ет мело­ди­че­ский поли­фо­ни­че­ский роман, но не риф­ма­ми. Стили­сти­че­ская игра отра­жа­ет холод­ный цинизм, именно поэто­му голос авто­ра рома­на не име­ет ника­ких пре­иму­ществ перед голо­са­ми персонажей.

Текст

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

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

Графо­ма­ния, на пер­вый взгляд, отра­жа­ет мело­ди­че­ский поли­фо­ни­че­ский роман, но не риф­ма­ми. Стили­сти­че­ская игра отра­жа­ет холод­ный цинизм, именно поэто­му голос авто­ра рома­на не име­ет ника­ких пре­иму­ществ перед голо­са­ми персонажей.

Текст

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

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

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

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

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

Кегль экран­но­го тек­ста обыч­но лежит в диа­па­зоне 12…16 пунк­тов, а интер­ли­ньяж — 1,2…1,4 от зна­че­ния кегля.

Кегль 16 п. / Интерлиньяж 20 п.

12 п. / 15 п.

14 п. / 20 п.

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

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

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

Кегль экран­но­го тек­ста обыч­но лежит в диа­па­зоне 12…16 пунк­тов, а интер­ли­ньяж — 1,2…1,4 от зна­че­ния кегля.

Кегль 16 п. / Интерлиньяж 20 п.

12 п. / 15 п.

14 п. / 20 п.

11 п. / 12 п.

11 п. / 15 п.

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

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

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

11 п. / 12 п.

11 п. / 15 п.

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

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

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

Я правая колонка, и я отступаю от рваного правого края.

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

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

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

Кегль 16 п., интерлиньяж 20 п., между абзацами 10 п. Поля больше межстрочных просветов, содержат поправку на гравитацию и дополнительный воздух справа: сверху 30 п., снизу 60 п., слева 20 п., справа 40 п.

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

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

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

Кегль 16 п., интерлиньяж 20 п., между абзацами 10 п. Поля больше межстрочных просветов, содержат поправку на гравитацию и дополнительный воздух справа: сверху 30 п., снизу 60 п., слева 20 п., справа 40 п.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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