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

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

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

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

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

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

Тест по основам вёрстки

Что не так с вёрсткой списка на иллюстрации?

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

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

Текстовые модули слева и справа имеют одинаковые параметры: ширину, поля, расстояния от заголовка до текста, кегль и интерлиньяж. Укажите проблемы «внутреннего» и «внешнего».

Заголовок «Робинзон Крузо» влезает в интерлиньяж текста
Заголовок «Побег Робинзона из родительского дома» влезает в интерлиньяж текста
Текст «Моим родителям...» влезает в интерлиньяж заголовка
Верхний край формата влезает в интерлиньяж заголовка «Робинзон Крузо»
Верхний край формата влезает в интерлиньяж заголовка «Побег Робинзона из родительского дома»
Раз параметры текста одинаковы, то и проблемы в блоках текста одинаковые

Сколько раз сложить вдвое прямоугольник с пропорциями «золотого сечения», чтобы получить прямоугольник с теми же пропорциями?

Любое нечётное количество раз
Любое чётное количество раз

Сколько раз сложить вдвое прямоугольник с пропорциями формата ДИН, чтобы получить прямоугольник с теми же пропорциями?

Любое нечётное количество раз
Любое чётное количество раз

Какой наиболее естественный порядок элементов для чтения?

Какие достижения невозможны без прямоугольников?

Письменность
Земледелие
Египетские пирамиды
Клавиатура компьютера
Искусство
Телевидение
Айпад
Школа редакторов Бюро Горбунова
Фильм Стэнли Кубрика «2001: Космическая Одиссея»
Книгопечатание
Детские пазлы
Рубашка в клетку
Деньги
Автомобиль «Тесла»
Губка Боб

Укажите на иллюстрациях варианты вёрстки, следующие правилу якорных объектов.

Каковы базовые геометрические примитивы вёрстки?

Шар
Луч
Параллелограмм
Линия
Прямоугольник
Отрезок
Треугольник
Точка

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

Перечислите элементы обложки журнала, выступающие в роли точки

Картинка кухонного комбайна
Крутилка на комбайне
Колонка текста Samstag

На этой же обложке перечислите элементы, функционирующие как линия

Надпись Braun+Design
Надпись Sammler‑Börse ’94/West

Найдите прямоугольники

Колонка с надписями Braun+Design и Sammler‑Börse ’94/West
Колонка текста Samstag

Журнал Браун+Дизайн

Журнал Браун+Дизайн

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест по основам вёрстки

Что не так с вёрсткой списка на иллюстрации?

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

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

Текстовые модули слева и справа имеют одинаковые параметры: ширину, поля, расстояния от заголовка до текста, кегль и интерлиньяж. Укажите проблемы «внутреннего» и «внешнего».

Заголовок «Робинзон Крузо» влезает в интерлиньяж текста
Заголовок «Побег Робинзона из родительского дома» влезает в интерлиньяж текста
Текст «Моим родителям...» влезает в интерлиньяж заголовка
Верхний край формата влезает в интерлиньяж заголовка «Робинзон Крузо»
Верхний край формата влезает в интерлиньяж заголовка «Побег Робинзона из родительского дома»
Раз параметры текста одинаковы, то и проблемы в блоках текста одинаковые

Сколько раз сложить вдвое прямоугольник с пропорциями «золотого сечения», чтобы получить прямоугольник с теми же пропорциями?

Любое нечётное количество раз
Любое чётное количество раз

Сколько раз сложить вдвое прямоугольник с пропорциями формата ДИН, чтобы получить прямоугольник с теми же пропорциями?

Любое нечётное количество раз
Любое чётное количество раз

Какой наиболее естественный порядок элементов для чтения?

Какие достижения невозможны без прямоугольников?

Письменность
Земледелие
Египетские пирамиды
Клавиатура компьютера
Искусство
Телевидение
Айпад
Школа редакторов Бюро Горбунова
Фильм Стэнли Кубрика «2001: Космическая Одиссея»
Книгопечатание
Детские пазлы
Рубашка в клетку
Деньги
Автомобиль «Тесла»
Губка Боб

Укажите на иллюстрациях варианты вёрстки, следующие правилу якорных объектов.

Каковы базовые геометрические примитивы вёрстки?

Шар
Луч
Параллелограмм
Линия
Прямоугольник
Отрезок
Треугольник
Точка

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

Перечислите элементы обложки журнала, выступающие в роли точки

Картинка кухонного комбайна
Крутилка на комбайне
Колонка текста Samstag

На этой же обложке перечислите элементы, функционирующие как линия

Надпись Braun+Design
Надпись Sammler‑Börse ’94/West

Найдите прямоугольники

Колонка с надписями Braun+Design и Sammler‑Börse ’94/West
Колонка текста Samstag

Журнал Браун+Дизайн

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

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

заголовок

текст

иллюстрация

эле­мент управления

ссылка

подпись

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

заголовок

текст

иллюстрация

элемент управления

ссылка

подпись

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

плохо

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

Хорошо

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

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

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

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

плохо

хорошо

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

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

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

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

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

Заголовок

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

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

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

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

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

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

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

Заголовок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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