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

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

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

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

 
между важными местами
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

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

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

Базовые элементы по функции:

  • заголовок — крупная надпись, называющая страницу или её блок;

  • текст — основное сообщение;

  • иллюстрация — картинка, сопровождающая сообщение;

  • элемент управления — функциональная часть пользовательского интерфейса, например поле ввода или кнопка;

  • подпись — пояснение к иллюстрации или элементу управления;

  • гиперссылка — цветная подчёркнутая надпись, ссылающаяся на другую страницу или элемент.

Задачи вёрстки сводятся к размещению этих элементов на странице.

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

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

Базо­вые эле­менты по функции:

  • заго­ло­вок — круп­ная над­пись, назы­ва­ю­щая стра­ницу или её блок;

  • текст — основ­ное сообщение;

  • иллю­стра­ция — кар­тинка, сопро­вож­да­ю­щая сообщение;

  • эле­мент управ­ле­ния — функ­ци­о­наль­ная часть поль­зо­ва­тель­ского интер­фейса, напри­мер поле ввода или кнопка;

  • под­пись — пояс­не­ние к иллю­стра­ции или эле­менту управления;

  • гиперс­сылка — цвет­ная под­чёрк­ну­тая над­пись, ссы­ла­ю­ща­яся на дру­гую стра­ницу или элемент.

Задачи вёрстки сво­дятся к раз­ме­ще­нию этих эле­мен­тов на странице.

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

плохо

И это первое знание о базовых элементах: они не должны быть хаотично перемешаны на странице. В бюро называют это вёрсткой «с комками» — как в неудачной манной каше.

Хорошо

Поле + подпись

Заголовок + ссылка

Текст + ссылки

Однако допустимо совмещать функции разных элементов, уменьшая их количество.

плохо

хорошо

Поле + подпись

Заголовок + ссылка

Текст + ссылки

И это пер­вое зна­ние о базо­вых эле­мен­тах: они не должны быть хао­тично пере­ме­шаны на стра­нице. В бюро назы­вают это вёрст­кой «с ком­ками» — как в неудач­ной ман­ной каше.

Однако допу­стимо сов­ме­щать функ­ции раз­ных эле­мен­тов, умень­шая их количество.

Заголовок

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

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

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

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

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

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

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

Заголовок

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

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

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

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

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

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

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

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

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

плохо

хорошо

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

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

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

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

плохо

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

хорошо

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

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

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

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

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

Бирка

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

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

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

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

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

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

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

Бирка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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