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

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

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

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

 
между важными местами
Shift
между
разворотами

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

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

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

Изда­тель­ство Бюро Гор­бу­нова
2015
Артём Горбунов

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

Издательство Бюро Горбунова
2015
удк 655.262
ббк 85.15
г67
Гор­бу­нов А. С.
г67
Типо­гра­фика и вёрстка. —
М.: Изд‑во Бюро Гор­бу­нова, 2015
ISBN 978‑5‑9907024‑0‑0

Пер­вая книга Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по типо­гра­фике и вёрстке с акцен­том на маке­ти­ро­ва­нии для экрана. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров и разработчиков.

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

«Типо­гра­фика и вёрстка» после­до­ва­тельно отве­чает на вопрос как. Автор вво­дит прин­ципы модуль­но­сти и якор­ных объ­ек­тов, пра­вило внут­рен­него и внеш­него. Затем шаг за шагом наглядно объ­яс­няет, как добиться акку­рат­ной и плот­ной вёрстки сай­тов, сер­ви­сов и СМИ.

УДК 655.262
ББК 85.15

Оглавление

удк 655.262
ббк 85.15
г67
г67
Горбунов А. С.
Типографика и вёрстка. —
М.: Изд‑во Бюро Горбунова, 2015
ISBN 978‑5‑9907024‑0‑0

Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.

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

«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.

УДК 655.262
ББК 85.15

Оглавление

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

От геометрии к типографике

В «советы» обра­тился Игорь Г. с прось­бой рас­ска­зать о вырав­ни­ва­нии строк по вертикали:

«Лет шесть назад один арт‑дирек­тор научил меня вырав­ни­вать строки в инпу­тах, табах, кноп­ках, любых кон­тро­лах и эле­мен­тах интер­фей­сов по вер­ти­кали таким обра­зом: необ­хо­димо цен­три­ро­вать строку отно­си­тельно строч­ных букв. Таким обра­зом по массе строка будет рас­по­ла­гаться в цен­тре объекта.

Объ­яс­не­ние логич­ное, и я взял его за пра­вило. Но с тех пор много воды утекло. Я при­ме­няю это пра­вило и по сей день, но подоб­ных при­ме­не­ний не вижу от дру­гих спе­ци­а­ли­стов. На кар­тинке при­мер — строки в инпу­тах и кэпшн на кнопке авто­ри­за­ции скайпа при­биты к низу, как мне кажется, это жутко некра­сиво и неправильно».

Строки в полях прибиты к низу

Строки в полях прибиты к низу

От геометрии к типографике

В «советы» обратился Игорь Г. с просьбой рассказать о выравнивании строк по вертикали:

«Лет шесть назад один арт‑директор научил меня выравнивать строки в инпутах, табах, кнопках, любых контролах и элементах интерфейсов по вертикали таким образом: необходимо центрировать строку относительно строчных букв. Таким образом по массе строка будет располагаться в центре объекта.

Объяснение логичное, и я взял его за правило. Но с тех пор много воды утекло. Я применяю это правило и по сей день, но подобных применений не вижу от других специалистов. На картинке пример — строки в инпутах и кэпшн на кнопке авторизации скайпа прибиты к низу, как мне кажется, это жутко некрасиво и неправильно».

«Гори­зон­таль­ным стеб­лем» строки слу­жат строч­ные буквы, и при ком­по­новке отдель­ных тек­сто­вых эле­мен­тов, как пра­вило, можно пре­не­бречь рас­ту­щими вверх и вниз «листьями» — про­пис­ными бук­вами и вынос­ными эле­мен­тами. «Сте­бель» огра­ни­чен снизу базо­вой линией, сверху — высо­той строч­ных букв, не име­ю­щих вынос­ных эле­мен­тов, напри­мер х или п. Верх­нюю линию так и назы­вают — линия строч­ных или высота строч­ных, по‑английски — x‑height.

В зави­си­мо­сти от задачи «стебли» вырав­ни­ва­ются по верх­ней, сред­ней или ниж­ней линии.

Конечно, ни один из этих спо­со­бов нельзя счи­тать универсальным.

Пре­не­бре­гать про­пис­ными и вынос­ными эле­мен­тами не все­гда пра­вильно. Чем ближе мас­штаб к отдель­ным стро­кам и сло­вам, тем больше нюан­сов. Иде­аль­ные законы пере­стают дей­ство­вать, как в физике.

«Стебли» выравниваются по верхней, средней или нижней линии

Анатомия слов

«Стебли» выравниваются по верхней, средней или нижней линии

Анатомия слов

«Горизонтальным стеблем» строки служат строчные буквы, и при компоновке отдельных текстовых элементов, как правило, можно пренебречь растущими вверх и вниз «листьями» — прописными буквами и выносными элементами. «Стебель» ограничен снизу базовой линией, сверху — высотой строчных букв, не имеющих выносных элементов, например х или п. Верхнюю линию так и называют — линия строчных или высота строчных, по‑английски — x‑height.

В зависимости от задачи «стебли» выравниваются по верхней, средней или нижней линии.

Конечно, ни один из этих способов нельзя считать универсальным.

Пренебрегать прописными и выносными элементами не всегда правильно. Чем ближе масштаб к отдельным строкам и словам, тем больше нюансов. Идеальные законы перестают действовать, как в физике.

Если элемент вёрстки имеет масштаб слова, он должен принимать во внимание его анатомию. Обратите внимание, как автограф занимает отведённое ему место в прямоугольнике на заставке «Везер‑ченела».

Слова, выровненные по строчным без учёта прописных букв и выносных элементов, стоят высоковато. На вкус автора:

Поле ввода — однострочный элемент управления, то есть легко становится в строку‑стебель:

Если эле­мент вёрстки имеет мас­штаб слова, он дол­жен при­ни­мать во вни­ма­ние его ана­то­мию. Обра­тите вни­ма­ние, как авто­граф зани­мает отве­дён­ное ему место в пря­мо­уголь­нике на заставке «Везер‑ченела».

Слова, выров­нен­ные по строч­ным без учёта про­пис­ных букв и вынос­ных эле­мен­тов, стоят высо­ко­вато. На вкус автора:

Поле ввода — одно­строч­ный эле­мент управ­ле­ния, то есть легко ста­но­вится в строку‑стебель:

Тест по основам вёрстки

Что не так с вёрсткой списка на иллюстрации?

Нарушено правило внутреннего и внешнего: в тексте слишком маленькие пробелы, слова слипаются
Плохо, что расстояние между элементами списка такое же, как расстояние между строками
Нарушено правило внутреннего и внешнего: элементы списка не отделены друг от друга дополнительными отступами
Всё в пределах нормы

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

Текстовые модули слева и справа имеют одинаковые параметры: ширину, поля, расстояния от заголовка до текста, кегль и интерлиньяж. Укажите проблемы «внутреннего» и «внешнего».

Заголовок «Робинзон Крузо» влезает в интерлиньяж текста
Заголовок «Побег Робинзона из родительского дома» влезает в интерлиньяж текста
Текст «Моим родителям...» влезает в интерлиньяж заголовка
Верхний край формата влезает в интерлиньяж заголовка «Робинзон Крузо»
Верхний край формата влезает в интерлиньяж заголовка «Побег Робинзона из родительского дома»
Раз параметры текста одинаковы, то и проблемы в блоках текста одинаковые

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

Любое нечётное количество раз
Любое чётное количество раз

Сколько раз сложить вдвое прямоугольник с пропорциями формата ДИН, чтобы получить прямоугольник с теми же пропорциями?

Любое нечётное количество раз
Любое чётное количество раз

Какой наиболее естественный порядок элементов для чтения?

Какие достижения невозможны без прямоугольников?

Письменность
Земледелие
Египетские пирамиды
Клавиатура компьютера
Искусство
Телевидение
Айпад
Школа редакторов Бюро Горбунова
Фильм Стэнли Кубрика «2001: Космическая Одиссея»
Книгопечатание
Детские пазлы
Рубашка в клетку
Деньги
Автомобиль «Тесла»
Губка Боб

Укажите на иллюстрациях варианты вёрстки, следующие правилу якорных объектов.

Каковы базовые геометрические примитивы вёрстки?

Шар
Луч
Параллелограмм
Линия
Прямоугольник
Отрезок
Треугольник
Точка

Отметьте самый лучший вариант положения полосы набора и пропорций полей из представленных.

Перечислите элементы обложки журнала, выступающие в роли точки

Картинка кухонного комбайна
Крутилка на комбайне
Колонка текста Samstag

На этой же обложке перечислите элементы, функционирующие как линия

Надпись Braun+Design
Надпись Sammler‑Börse ’94/West

Найдите прямоугольники

Колонка с надписями Braun+Design и Sammler‑Börse ’94/West
Колонка текста Samstag
Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест по основам вёрстки

Что не так с вёрсткой списка на иллюстрации?

Нарушено правило внутреннего и внешнего: в тексте слишком маленькие пробелы, слова слипаются
Плохо, что расстояние между элементами списка такое же, как расстояние между строками
Нарушено правило внутреннего и внешнего: элементы списка не отделены друг от друга дополнительными отступами
Всё в пределах нормы

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

Текстовые модули слева и справа имеют одинаковые параметры: ширину, поля, расстояния от заголовка до текста, кегль и интерлиньяж. Укажите проблемы «внутреннего» и «внешнего».

Заголовок «Робинзон Крузо» влезает в интерлиньяж текста
Заголовок «Побег Робинзона из родительского дома» влезает в интерлиньяж текста
Текст «Моим родителям...» влезает в интерлиньяж заголовка
Верхний край формата влезает в интерлиньяж заголовка «Робинзон Крузо»
Верхний край формата влезает в интерлиньяж заголовка «Побег Робинзона из родительского дома»
Раз параметры текста одинаковы, то и проблемы в блоках текста одинаковые

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

Любое нечётное количество раз
Любое чётное количество раз

Сколько раз сложить вдвое прямоугольник с пропорциями формата ДИН, чтобы получить прямоугольник с теми же пропорциями?

Любое нечётное количество раз
Любое чётное количество раз

Какой наиболее естественный порядок элементов для чтения?

Какие достижения невозможны без прямоугольников?

Письменность
Земледелие
Египетские пирамиды
Клавиатура компьютера
Искусство
Телевидение
Айпад
Школа редакторов Бюро Горбунова
Фильм Стэнли Кубрика «2001: Космическая Одиссея»
Книгопечатание
Детские пазлы
Рубашка в клетку
Деньги
Автомобиль «Тесла»
Губка Боб

Укажите на иллюстрациях варианты вёрстки, следующие правилу якорных объектов.

Каковы базовые геометрические примитивы вёрстки?

Шар
Луч
Параллелограмм
Линия
Прямоугольник
Отрезок
Треугольник
Точка

Отметьте самый лучший вариант положения полосы набора и пропорций полей из представленных.

Перечислите элементы обложки журнала, выступающие в роли точки

Картинка кухонного комбайна
Крутилка на комбайне
Колонка текста Samstag

На этой же обложке перечислите элементы, функционирующие как линия

Надпись Braun+Design
Надпись Sammler‑Börse ’94/West

Найдите прямоугольники

Колонка с надписями Braun+Design и Sammler‑Börse ’94/West
Колонка текста Samstag
Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

2
Базовые
элементы

2
Базовые
элементы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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