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

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

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

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

 
между важными местами
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

Оглавление

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

Номер страницы, кружок‑фактоид и фотография на белом фоне играют роль точек на полосе «Афиши‑Еды»

Плакат Энтони Нейла Дарта с цитатами Массимо Виньелли. Точечные объекты тяготеют к углам и краям своих модулей

В вёрстке применимы любые точечные объекты: отдельные буквы и цифры, знаки, логотипы, пиктограммы. Они имеют разнообразную форму, но в отличие от линий и прямоугольников, «центростремительны». У точечного объекта один фокус внимания, он создаёт на странице акцент.

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

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


Заметность объекта‑точки зависит от его размера, плотности, контраста к фону, окружающего свободного пространства. И, конечно, всегда измеряется относительно соседних элементов.

Точечные объекты в вёрстке часто выступают в качестве якорных объектов, тяготеют к углам и краям своих модулей.

В вёрстке при­ме­нимы любые точеч­ные объ­екты: отдель­ные буквы и цифры, знаки, лого­типы, пик­то­граммы. Они имеют раз­но­об­раз­ную форму, но в отли­чие от линий и пря­мо­уголь­ни­ков, «цен­тро­стре­ми­тельны». У точеч­ного объ­екта один фокус вни­ма­ния, он создаёт на стра­нице акцент.

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

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


Замет­ность объ­екта‑точки зави­сит от его раз­мера, плот­но­сти, кон­тра­ста к фону, окру­жа­ю­щего сво­бод­ного про­стран­ства. И, конечно, все­гда изме­ря­ется отно­си­тельно сосед­них элементов.

Точеч­ные объ­екты в вёрстке часто высту­пают в каче­стве якор­ных объ­ек­тов, тяго­теют к углам и краям своих модулей.

Номер страницы, кружок‑фактоид и фотография на белом фоне играют роль точек на полосе «Афиши‑Еды»

Плакат Энтони Нейла Дарта с цитатами Массимо Виньелли. Точечные объекты тяготеют к углам и краям своих модулей

Адрес компании «Я расту» в две строки внизу бланка

Реклама на Гугле

Строка с результатами выборов мэра Москвы на Яндексе

Меню Гугль‑документа

Якори слева и справа

Якорь в центре

Этикетка на картридже Т2

Линия

В геометрии точки составляют прямую линию. Линия в типографике — это строка, второй важнейший примитив.

Строка — самый удобный, читабельный, лаконичный, скромный и спокойный элемент вёрстки. Большая удача, если объекты собираются в строку — ей всегда найдётся место в макете.

Адрес компании «Я расту» занял две строки внизу бланка и освободил всё место наверху для логотипа.

Строка — один из способов «впихнуть невпихуемое», например, срочное объявление, как реклама на Гугле, или временный блок на сайте, как результаты выборов мэра Москвы на Яндексе.

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

Строка отлично подходит для организации меню и панелей инструментов.

Неоднородная строка должна следовать правилу якорных объектов. Строка одномерна, поэтому якоря располагаются слева и справа. Или в центре, как в газетных колонтитулах и меню календаря в Айпаде.

Этикетка на картридже Т2 в строку с двумя якорями — логотипом слева и артикулом справа.

Линия — типичная форма уличных надписей и вывесок

Воз­можно, ошибка в рек­ви­зи­тах ООО «Тор­го­вая фирма „Герметик“»

Новая ком­па­ния ООО «Альфа»

Про­ве­рить и обно­вить...
Создать...

Адрес компании «Я расту» в две строки внизу бланка

Реклама на Гугле

Строка с результатами выборов мэра Москвы на Яндексе

Меню Гугль‑документа

Якори слева и справа

Якорь в центре

Этикетка на картридже Т2

Линия

В гео­мет­рии точки состав­ляют пря­мую линию. Линия в типо­гра­фике — это строка, вто­рой важ­ней­ший примитив.

Строка — самый удоб­ный, чита­бель­ный, лако­нич­ный, скром­ный и спо­кой­ный эле­мент вёрстки. Боль­шая удача, если объ­екты соби­ра­ются в строку — ей все­гда най­дётся место в макете.

Адрес ком­па­нии «Я расту» занял две строки внизу бланка и осво­бо­дил всё место наверху для логотипа.

Строка — один из спо­со­бов «впих­нуть нев­пиху­е­мое», напри­мер, сроч­ное объ­яв­ле­ние, как реклама на Гугле, или вре­мен­ный блок на сайте, как резуль­таты выбо­ров мэра Москвы на Яндексе.

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

Строка отлично под­хо­дит для орга­ни­за­ции меню и пане­лей инструментов.

Неод­но­род­ная строка должна сле­до­вать пра­вилу якор­ных объ­ек­тов. Строка одно­мерна, поэтому якоря рас­по­ла­га­ются слева и справа. Или в цен­тре, как в газет­ных колон­ти­ту­лах и меню кален­даря в Айпаде.

Эти­кетка на кар­три­дже Т2 в строку с двумя яко­рями — лого­ти­пом слева и арти­ку­лом справа.

Линия — типичная форма уличных надписей и вывесок


Прямоугольник

Пря­мо­уголь­ник — тре­тий при­ми­тив вёрстки.

Инфор­ма­ци­он­ные носи­тели — экран, бумага, реклам­ный щит, — имеют пря­мо­уголь­ную форму. Пря­мо­уголь­ник — самая тех­но­ло­гич­ная фигура, спо­соб­ная делиться на дру­гие пря­мо­уголь­ники без отходов.

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

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

Модуль­ная вёрстка — это поиск наи­бо­лее удач­ной ком­по­новки пря­мо­уголь­ника. Про­дол­жим поиски в сле­ду­ю­щих главах.

Прямоугольные объекты на сайте «Свисс Тайпфейсес»

Прямоугольник

Прямоугольник — третий примитив вёрстки.

Информационные носители — экран, бумага, рекламный щит, — имеют прямоугольную форму. Прямоугольник — самая технологичная фигура, способная делиться на другие прямоугольники без отходов.

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

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

Модульная вёрстка — это поиск наиболее удачной компоновки прямоугольника. Продолжим поиски в следующих главах.

Прямоугольные объекты на сайте «Свисс Тайпфейсес»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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