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