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