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