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

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

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

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

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

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

Прямоугольник делится на другие прямоугольники — и в остатке прямоугольники

Модульность

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

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

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

Модульность

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

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

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

Прямоугольник делится на другие прямоугольники — и в остатке прямоугольники

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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