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

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

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

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

http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
 
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
между важными местами
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
Shift
http://d.pr/i/16l92http://d.pr/i/16l92http://d.pr/i/16l92
между
разворотами

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

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

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

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

Изда­тель­ство Бюро Гор­бу­нова
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