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

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

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

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

 
между важными местами
Shift
между
разворотами

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

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

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

Изда­тель­ство Бюро Гор­бу­нова
2015
Артём Горбунов

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

Издательство Бюро Горбунова
2015
удк 655.262
ббк 85.15
г67
Гор­бу­нов А. С.
г67
Типо­гра­фика и вёрстка. —
М.: Изд‑во Бюро Гор­бу­нова, 2015
ISBN 978‑5‑9907024‑0‑0

Пер­вая книга Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по типо­гра­фике и вёрстке с акцен­том на маке­ти­ро­ва­нии для экрана. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров и разработчиков.

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

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

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Изда­тель­ство
Бюро Гор­бу­нова, 2015

Оглавление

    Основы 4

    Базо­вые эле­менты 34

    Модули 74

    Стра­ницы 115

    Заклю­че­ние 155

удк 655.262
ббк 85.15
г67
г67
Горбунов А. С.
Типографика и вёрстка. —
М.: Изд‑во Бюро Горбунова, 2015
ISBN 978‑5‑9907024‑0‑0

Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.

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

«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Издательство
Бюро Горбунова, 2015

Оглавление

    Основы 4

    Базовые элементы 34

    Модули 74

    Страницы 115

    Заключение 155

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

Плохо

Хорошо

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

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

Плохо

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

Хорошо

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

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

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

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

Модульная

Текстовая

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Брендбук Скайсканера

Брендбук Скайсканера

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

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

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

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

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

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

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

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

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

Для успешной работы дизайнеру необходимо:

  1. Понимать принципы дизайна.

  2. Разбираться в типографике и вёрстке.

  3. Знать основы дизайна пользовательского интерфейса.

  4. Уметь управлять задачами и проектами.

  5. Освоить инфостиль и основы редактуры.

  6. Быть готовым к переговорам и работе с ожиданиями клиента.

Особенности Школы бюро:

  • 1) дистанционное обучение;

  • 2) беспощадная система отбора и отсева на всех ступенях;

  • 3) бесплатные места для лучших студентов;

  • 4) гарантия трудоустройства;

  • 5) чистая радость познания.

Обратить внимание:

  • а) на правильность,

  • б) однородность,

  • в) целесообразность.

— Элементы списков обозначаются:

  • — арабскими цифрами с точкой;

  • — арабскими цифрами или русскими буквами со скобкой;

  • — графическими маркерами;

  • — втяжкой.

— Элементы списков обозначаются:

  • арабскими цифрами с точкой;

  • арабскими цифрами или русскими буквами со скобкой;

  • графическими маркерами;

  • втяжкой.

— Обратить внимание:

  • на правильность,

  • однородность,

  • целесообразность.

Списки

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

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

В «Справочнике издателя и автора» Аркадия Мильчина приведены подробные рекомендации по оформлению разных видов списков. Ниже — самые употребительные варианты.

Нумерованные и упорядоченные

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

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

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

Ненумерованные списки

Вместо цифр и букв в ненумерованных списках элементы часто обозначаются графическими маркерами или символами.

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

Списки

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

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

В «Спра­воч­нике изда­теля и автора» Арка­дия Миль­чина при­ве­дены подроб­ные реко­мен­да­ции по оформ­ле­нию раз­ных видов спис­ков. Ниже — самые упо­тре­би­тель­ные варианты.

Нумерованные и упорядоченные

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

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

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

Ненумерованные списки

Вме­сто цифр и букв в нену­ме­ро­ван­ных спис­ках эле­менты часто обо­зна­ча­ются гра­фи­че­скими мар­ке­рами или символами.

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

Для успеш­ной работы дизай­неру необходимо:

  1. Пони­мать прин­ципы рабо­то­спо­соб­ного дизайна.

  2. Раз­би­раться в типо­гра­фике и иметь навыки вёрстки.

  3. Знать основы про­ек­ти­ро­ва­ния поль­зо­ва­тель­ского интер­фейса и пред­став­ле­ния информации.

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

  5. Осво­ить инфор­ма­ци­он­ный стиль и основы редактуры.

  6. Пони­мать юри­ди­че­скую сто­рону дизайна.

  7. Быть гото­вым к пере­го­во­рам и работе с ожи­да­ни­ями клиента.

Осо­бен­но­сти Школы бюро:

  • 1) дистан­ци­он­ное обучение;

  • 2) бес­по­щад­ная система отбора и отсева на всех ступенях;

  • 3) бес­плат­ные места для луч­ших студентов;

  • 4) гаран­тия трудоустройства;

  • 5) чистая радость познания.

Обра­тить внимание:

  • а) на правильность,

  • б) однородность,

  • в) целесообразность.

Эле­менты спис­ков обозначаются:

  • — араб­скими циф­рами с точкой;

  • — араб­скими циф­рами или рус­скими строч­ными буквами;

  • — с закры­ва­ю­щей скобкой;

  • — гра­фи­че­скими мар­ке­рами или набор­ными знаками;

  • — втяжкой.

Эле­менты спис­ков обозначаются:

  • араб­скими циф­рами с точкой;

  • араб­скими циф­рами или рус­скими строч­ными буквами;

  • с закры­ва­ю­щей скобкой;

  • гра­фи­че­скими мар­ке­рами или набор­ными знаками;

  • втяжкой.


Обра­тить внимание:

  • на правильность,

  • однородность,

  • целесообразность.

Таблицы

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

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

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

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

На при­мере оформ­ле­ние таб­лицы с заго­лов­ком и пояс­ня­ю­щим текстом.

Употребление кофе в Коворкафе осенью 2013 и 2014 годов

Пока­зано коли­че­ство выпи­тых чашек без учёта кофе‑брей­ков на кур­сах бюро. Дан­ных за ноябрь пока нет.

Эспрессо Капучино Лате Американо Всего
2013
Сентябрь 61 20 70 61 212
Октябрь 68 29 56 60 213
Ноябрь 70 21 13 17 121
2014
Сентябрь 54 65 28 35 182
Октябрь 59 77 51 53 240

Таблицы

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

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

Порядок строк должен также упрощать поиск и сравнение. Почти всегда можно найти более удачный способ сортировки, чем просто по алфавиту.

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

На примере оформление таблицы с заголовком и поясняющим текстом.

Употребление кофе в Коворкафе осенью 2013 и 2014 годов

Показано количество выпитых чашек без учёта кофе‑брейков на курсах бюро. Данных за ноябрь пока нет.

2013
Сен
Эсп.61
Капуч.20
Лате70
Америк.61
Всего142
Окт
Эсп.68
Капуч.29
Лате56
Америк.60
Всего157
Ноя
Эсп.70
Капуч.21
Лате13
Америк.17
Всего108
2014
Сен
Эсп.54
Капуч.65
Лате28
Америк.35
Всего154
Окт
Эсп.59
Капуч.77
Лате51
Америк.53
Всего189
Скрыто 40 разворотов

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось