🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку
Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку
Типографика и вёрстка
Типографика и вёрстка
Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.
К сожалению, из многочисленных книг о типографике и модульных сетках остаётся непонятно, как именно собрать выразительный макет с прочной конструкцией. В лучшем случае дизайнеру остаётся выуживать крупицы смысла и копировать удачные примеры.
«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.
Оглавление
Основы 4
Базовые элементы 34
Модули 74
Страницы 115
Заключение 155
Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.
К сожалению, из многочисленных книг о типографике и модульных сетках остаётся непонятно, как именно собрать выразительный макет с прочной конструкцией. В лучшем случае дизайнеру остаётся выуживать крупицы смысла и копировать удачные примеры.
«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.
Оглавление
Основы 4
Базовые элементы 34
Модули 74
Страницы 115
Заключение 155
Заголовок обычно «накрывает» текстовый модуль, к которому относится, и принимает его форму. Заголовок помогает отделить соседние модули и подсказать направление чтения, например, в этом горизонтальном модуле.
Если длины заголовка не хватает, чтобы накрыть модуль, соседние модули по вертикали могут вступить в незапланированные связи и нарушить порядок чтения.
В таких случаях приходится дополнительно отделять модули, например линейками.
Заголовок обычно «накрывает» текстовый модуль, к которому относится, и принимает его форму. Заголовок помогает отделить соседние модули и подсказать направление чтения, например, в этом горизонтальном модуле.
Если длины заголовка не хватает, чтобы накрыть модуль, соседние модули по вертикали могут вступить в незапланированные связи и нарушить порядок чтения.
В таких случаях приходится дополнительно отделять модули, например линейками.
Заголовок узкого вертикального модуля обычно переносится на несколько строк.
При этом важно соблюдать правила переносов и не допускать чрезмерного количества строк в заголовке — это выглядит уродливо и ломает сетку любого сайта или издания.
плохо
хорошо
Спасают положение составные заголовки, выбор подходящего кегля и, конечно, редакционная политика.
О вертикальных расстояниях у заголовков:
О правиле внутреннего и внешнего 4
Формат, поля и интерлиньяж 21
плохо
хорошо
Заголовок узкого вертикального модуля обычно переносится на несколько строк.
При этом важно соблюдать правила переносов и не допускать чрезмерного количества строк в заголовке — это выглядит уродливо и ломает сетку любого сайта или издания.
Спасают положение составные заголовки, выбор подходящего кегля и, конечно, редакционная политика.
О вертикальных расстояниях у заголовков:
О правиле внутреннего и внешнего 4
Формат, поля и интерлиньяж 21
Графомания, на первый взгляд, отражает мелодический полифонический роман, но не рифмами. Стилистическая игра отражает холодный цинизм, именно поэтому голос автора романа не имеет никаких преимуществ перед голосами персонажей.
Текст
Текст — базовый элемент вёрстки.
Текст — несжимаемая жидкость, принимающая форму сосуда. Верстальщик определяет форму, пропорции и объём контейнера, впускает в него воздух, разделяет на сообщающиеся сосуды. Один и тот же текст заполняет стакан или расползается лужей по плоскости страницы.
Графомания, на первый взгляд, отражает мелодический полифонический роман, но не рифмами. Стилистическая игра отражает холодный цинизм, именно поэтому голос автора романа не имеет никаких преимуществ перед голосами персонажей.
Текст
Текст — базовый элемент вёрстки.
Текст — несжимаемая жидкость, принимающая форму сосуда. Верстальщик определяет форму, пропорции и объём контейнера, впускает в него воздух, разделяет на сообщающиеся сосуды. Один и тот же текст заполняет стакан или расползается лужей по плоскости страницы.
Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.
В отличие от заголовка, который стремится по форме к линии, текст — это прямоугольник. По пропорциям прямоугольник может быть широким — горизонтальным, высоким — вертикальным или квадратным.
В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.
Кегль экранного текста обычно лежит в диапазоне 12…16 пунктов, а интерлиньяж — 1,2…1,4 от значения кегля.
Кегль 16 п. / Интерлиньяж 20 п.
12 п. / 15 п.
14 п. / 20 п.
Иногда дизайнер влияет на объём текста, задавая редакторам ограничения длины подзаголовков, цитат, въездов и других особых элементов. Но чаще текст — это данность, а верстальщик работает с его формой.
В отличие от заголовка, который стремится по форме к линии, текст — это прямоугольник. По пропорциям прямоугольник может быть широким — горизонтальным, высоким — вертикальным или квадратным.
В «резиновой» вёрстке дизайнер задаёт не только форму контейнера для текста, но и правила, по которым она меняется в зависимости от размеров окна и экрана.
Кегль экранного текста обычно лежит в диапазоне 12…16 пунктов, а интерлиньяж — 1,2…1,4 от значения кегля.
Кегль 16 п. / Интерлиньяж 20 п.
12 п. / 15 п.
14 п. / 20 п.
11 п. / 12 п.
11 п. / 15 п.
Интерлиньяж — это функция кегля, длины строки и формата. Чем длиннее строка по количеству слов, тем больше должен быть интерлиньяж. И наоборот, слишком узкая колонка из коротких строк уродливо смотрится даже со стандартным интерлиньяжем. В таком случае интерлиньяж допускается немного уменьшить.
Формат — это модуль, плашка или страница, на которых набран текст. По «правилу внутреннего и внешнего» поля вокруг текста должны быть больше межстрочных просветов. Поэтому если формат слишком маленький, кегль и интерлиньяж не должны быть слишком большими — для больших полей не останется места.
Текст дробится на абзацы. В экранной модульной вёрстке абзацы обычно отделяют вертикальными отступами. В канонической швейцарской сетке, привязанной к базовым линиям, отступ между абзацами строго равен одной строке, поэтому его иногда называют «слепой строкой». На «бесконечной» экранной странице эта условность не имеет смысла, поэтому межабзацный отступ часто уменьшают до половины строки или даже сильнее.
11 п. / 12 п.
11 п. / 15 п.
Интерлиньяж — это функция кегля, длины строки и формата. Чем длиннее строка по количеству слов, тем больше должен быть интерлиньяж. И наоборот, слишком узкая колонка из коротких строк уродливо смотрится даже со стандартным интерлиньяжем. В таком случае интерлиньяж допускается немного уменьшить.
Формат — это модуль, плашка или страница, на которых набран текст. По «правилу внутреннего и внешнего» поля вокруг текста должны быть больше межстрочных просветов. Поэтому если формат слишком маленький, кегль и интерлиньяж не должны быть слишком большими — для больших полей не останется места.
Текст, выровненный влево
с рваным правым краем, должен
«дышать» справа, то есть
край формата или соседняя
колонка не должны подходить
к нему слишком близко.
Я правая колонка, и я отступаю от рваного правого края.
Текст дробится на абзацы. В экранной модульной вёрстке абзацы обычно отделяют вертикальными отступами. В канонической швейцарской сетке, привязанной к базовым линиям, отступ между абзацами строго равен одной строке, поэтому его иногда называют «слепой строкой». На «бесконечной» экранной странице эта условность не имеет смысла, поэтому межабзацный отступ часто уменьшают до половины строки или даже сильнее.
Горбунов Артём Сергеевич
Типографика и вёрстка
Aвтор и арт‑директор Артём Горбунов
Дизайнер Александр Кан
Фотограф Владимир Колпаков
Каллиграф Анна Данилова
Метранпаж и соавтор тестов
Сергей ФроловРазработчики Рустам Кулматов,
Василий Половнёв
и Андрей Ерес
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015
Горбунов Артём Сергеевич
Типографика и вёрстка
Aвтор и арт‑директор Артём Горбунов
Дизайнер Александр Кан
Фотограф Владимир Колпаков
Каллиграф Анна Данилова
Метранпаж и соавтор тестов
Сергей ФроловРазработчики Рустам Кулматов,
Василий Половнёв
и Андрей Ерес
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»Дизайн‑бюро Артёма Горбунова
Большая Новодмитровская улица,
дом 36, строение 2
Москва, Россия, 127015