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

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

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

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

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

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

Суще­ствуют осо­бые про­пор­ции и спо­собы деле­ния прямоугольников:

Напри­мер, пря­мо­уголь­ник с про­пор­ци­ями «золо­того сече­ния» отсе­ка­ется квад­ра­том из дру­гого пря­мо­уголь­ника с «золо­тым сече­нием». И так до бесконечности.

А пря­мо­уголь­ник c длин­ной сто­ро­ной, рав­ной диа­го­нали квад­рата с его корот­кой сто­ро­ной, вос­про­из­во­дится в мень­шем раз­мере при деле­нии попо­лам. Это свой­ство в основе линейки фор­ма­тов бумаги ДИН.

Существуют особые пропорции и способы деления прямоугольников:

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

А прямоугольник c длинной стороной, равной диагонали квадрата с его короткой стороной, воспроизводится в меньшем размере при делении пополам. Это свойство в основе линейки форматов бумаги ДИН.

Конфигурация татами в типовых комнатах. Показан тон текстуры циновок при падении света слева. Хайно Энгель. Параметры и конструкция японского дома

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

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

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

Повсеместное производство татами привело к стандартизации их размеров. А стандартизация татами привела к особой системе мер и пропорций всего японского дома. Это пример модульного дизайна в архитектуре.

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

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

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

Повсе­мест­ное про­из­вод­ство татами при­вело к стан­дар­ти­за­ции их раз­ме­ров. А стан­дар­ти­за­ция татами при­вела к осо­бой системе мер и про­пор­ций всего япон­ского дома. Это при­мер модуль­ного дизайна в архитектуре.

Конфигурация татами в типовых комнатах. Показан тон текстуры циновок при падении света слева.
Хайно Энгель. Параметры и конструкция японского дома

С изоб­ре­те­нием пись­мен­но­сти и бумаги пря­мо­уголь­ники при­шли в кни­го­из­да­ние. Книги, стра­ницы и текст прямоугольны:

Галилео Галилей. Звездный вестник. Венеция, 1610

Нема­те­ри­аль­ная инфор­ма­ция полу­чила физи­че­скую пря­мо­уголь­ную форму — «флет­ланд» в тер­ми­но­ло­гии Эдварда Тафти.

В 20 веке типо­графы при­ду­мали делить стра­ницу на неви­ди­мые пря­мо­уголь­ники — изоб­рели модуль­ную сетку.

Вариации макетов по модульной сетке из 32 ячеек.
Йозеф Мюллер‑Брокман. Модульные системы в графическом дизайне

С изобретением письменности и бумаги прямоугольники пришли в книгоиздание. Книги, страницы и текст прямоугольны:

Галилео Галилей. Звездный вестник. Венеция, 1610

Нематериальная информация получила физическую прямоугольную форму — «флетланд» в терминологии Эдварда Тафти.

В 20 веке типографы придумали делить страницу на невидимые прямоугольники — изобрели модульную сетку.

Вариации макетов по модульной сетке из 32 ячеек.
Йозеф Мюллер‑Брокман. Модульные системы в графическом дизайне

Новая компания. № 12, 1974

Типографический ежемесячник. № 1, 1964

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

Уни­фи­ци­ро­вали раз­меры не только иллю­стра­ций, но даже их частей.

Новая компания. № 12, 1974

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

Типографический ежемесячник. № 1, 1964

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

«Пря­мо­уголь­ни­ками» высту­пают не только эле­менты вёрстки, но и про­стран­ство между ними. Дизай­нер Сер­гей Серов пишет о швей­цар­ской типографике:


Как.ру

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

Разворот газеты «Ди Цайт»

Разворот газеты «Ди Цайт»

Разворот газеты «Ди Цайт»

«Прямоугольниками» выступают не только элементы вёрстки, но и пространство между ними. Дизайнер Сергей Серов пишет о швейцарской типографике:

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

Как.ру

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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