«Типографика»: влияние формы и цвета на буквы
Рассказываем, почему идеальная геометрия не работает в типографике и какие контрасты делают вёрстку выразительнее.
![](https://248006.selcdn.ru/main/iblock/e5f/e5f73e03438ca05a1e8dc028d75edd6f/bf5fca8521526f807defe72bf43b0135.png)
![](https://248006.selcdn.ru/main/iblock/e5f/e5f73e03438ca05a1e8dc028d75edd6f/bf5fca8521526f807defe72bf43b0135.png)
Иллюстрация: katemangostar / freepik / Meery Mary для Skillbox Media
![](/upload/setka_images/09214626022022_05638fd8117734ab11801b0129bc5dcf0a765469.jpg)
«Служить передаче письменной информации» — так Эмиль Рудер описывает единственную задачу шрифтового дизайна.
В книге «Типографика» Рудер делится накопленным за 25 лет профессиональным опытом: о форме букв, их связи со смыслом и технических тонкостях работы со словом.
Издатель — Дмитрий Аронов.
Эмиль Рудер — швейцарский типограф и графический дизайнер. C 1942 преподавал общую типографику в Базельской школе искусств и впоследствии стал её директором. Рудер вместе с дизайнером Армином Хофманом разработал целостный подход к обучению типографике, на основе которого построил образовательный курс.
Рассказываем, каких принципов придерживался Рудер при работе со словом и как их можно применить в вашей работе.
Функция и форма
Удобочитаемость текста зависит от простейшей и рутинной типографской работы — с кернингом, интерлиньяжем, пробелами, выключкой. Рудер считал, что типограф должен чувствовать и сознательно применять свои знания об этих простейших элементах типографики, а не относиться к ним как к необязательной работе. Иначе баланс между функцией и формой нарушится и текст перестанет выполнять свою задачу.
С изобретением книгопечатания и, следовательно, с возросшими читательскими запросами отношения функции к форме сделались многосложными. Известны периоды гипертрофии типографической формы, безразличной к сути слова, будь то титульные листы эпохи барокко или конструктивистская типографика времён Баухауса. С другой стороны, первоиздания Гёте и Шиллера показывают, как формообразование может быть попрано из соображения удобочитаемости.
Эмиль Рудер
Чтобы понять, как форма влияет на удобочитаемость, посмотрите слово buch (в пер. с нем. «книга») в разных вариантах вёрстки:
![](/upload/setka_images/09104326022022_accf102caaa970ce65d217b9ae9a8e9a57caa67c.jpg)
![](/upload/setka_images/09104326022022_08fda0244b5397e030ee401fd2bea5b24f78a72b.jpg)
![](/upload/setka_images/09104326022022_6896a8696b8038f4fc8989ab005e4fccc3b90047.jpg)
![](/upload/setka_images/09104326022022_c7c2d6650fe8dd3125b1541cb39af56649bd56fa.jpg)
![](/upload/setka_images/09104326022022_0ed1686442ac630326a48ddcef43684fa02b904b.jpg)
![](/upload/setka_images/09104326022022_b30ff17d14b759c017197570526ff51b33cc83c5.jpg)
![](/upload/setka_images/09104326022022_fc9956ee2f4201e204a5532c68850c6715ed24e0.jpg)
![](/upload/setka_images/09104326022022_6caf85fa09e0642959e62c753d9a2f18236eb1da.jpg)
Изображения: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
Рудер не терпел крайностей — он считал, что форма и функция могут спокойно существовать вместе и не мешать удобочитаемости. Например, в этих работах нарочито выделена форма. Без дополнительных усилий прочитать их очень трудно:
![](/upload/setka_images/09104426022022_c0c954a3a268bfc515e88839a41a25de5bd1b194.jpg)
Изображение: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
А эти обложки Рудер назвал примером «нетворческого и вялого оформления», которое только отталкивает своей скучностью:
![](/upload/setka_images/09104426022022_cece785eb92cd643f5e788e5f37e3d933a76f56c.jpg)
Рудер отмечает поздние работы Джамбаттиста Бодони, как примеры с интересной формой, которая не препятствует функции:
Шедевры типографики демонстрируют совершенное единство слова и типографической формы. В венецианских изданиях XVI века и в поздних работах Джамбаттиста Бодони высокая культура формы не препятствует, однако, смысловому раскрытию слова. Эти произведения выражают, безусловно, гармоническое согласие функции и формы.
Эмиль Рудер
![](/upload/setka_images/09104326022022_faa30a2db0792d892b4dd09799064793c3747129.jpg)
Изображения: Джамбаттиста Бодони / Archive Franco Maria Ricci / Wikimedia Commons / «Manuale Tipografico», 1818
Вы наверняка замечали за собой, что вы можете долго засматриваться на плакаты, где текст написан на незнакомом языке. Рудер считает, что именно незнанием и обусловлен такой интерес к иноязычной типографике. Это применимо и к современным работам типографов, и к наскальным письменам:
Иноязычные, непонятные формы шрифта завораживают нас: мы упиваемся их формами, подобно тому, как любуемся произведениями искусства. Умей читать эти письмена, мы потеряли бы интерес к их форме. Как сказал Честертон при виде огней ночного Бродвея в Нью-Йорке: «Каким фантастическим волшебным садом представилось бы всё это тому, кто имеет счастье быть неграмотным!»
Эмиль Рудер
![](/upload/setka_images/09104526022022_78433c55719a43196f42f00ecd2640a082430f51.jpg)
![](/upload/setka_images/09104326022022_0cab9ef2c368a7efaecf8a55f0f2d81a135a2d95.jpg)
Изображения: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
Геометрическое, оптическое и органическое
Рудер считал, что невозможно построить геометрически правильную букву, которую люди бы не признали плохой. Дело в том, что человеческий глаз искажает видимую форму, поэтому типографу важно научиться с этим работать.
Глаз склонен к преувеличению всего горизонтального и к более слабому восприятию вертикальных частей. Оптические иллюзии нельзя просто отбросить как пустяки, и всякий проектировщик должен представлять себе связанные с этим проблемы.
Эмиль Рудер
Оптических иллюзий в типографике очень много. Ниже — лишь некоторые из них:
![](/upload/setka_images/09104426022022_2229e417950c39bd1ac90259b6c781a232a40430.jpg)
![](/upload/setka_images/09104426022022_71b97f3681cfd481f98f8279e17d064ae63ea66a.jpg)
![](/upload/setka_images/09104426022022_b76bc71fa80c20942ed01e19c21ead7b69ad6b89.jpg)
![](/upload/setka_images/09104426022022_1c076733da30d01108464d85a8ffad1517acec59.jpg)
![](/upload/setka_images/09104426022022_1cc7c7aaff1472b38801633d33e2f9e6221a290f.jpg)
![](/upload/setka_images/09104426022022_62bf1942effdabf0107c530d35221fdf53489254.jpg)
![](/upload/setka_images/09104426022022_ea2b2f998665356b094cbc9e4d99ecdc646b93d5.jpg)
![](/upload/setka_images/09104426022022_b200d8bc76303a5287d3954213dd40d331052ae4.jpg)
Изображение: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
Посмотрите на оригинал рисунка буквы О из шрифта Universe. Вокруг неё начерчена окружность, чтобы помочь вам увидеть отклонения рисунка от геометрической выверенности.
![](/upload/setka_images/09104426022022_178ae943fb180dbd85da113c997e71d410f43eb6.jpg)
Изображение: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
Для хорошей формы букв одной геометрии недостаточно, поскольку боковые выступы прямых штрихов не могут быть просто добавлены к ним снаружи с помощью циркуля. Выступы штрихов строятся изнутри наружу, и для устойчивости букв верхние выступы должны быть меньше, чем нижние. Так же и все иные переходы от дуг к прямым нуждаются в дополнительной доработке.
Эмиль Рудер
Дизайнер может эффектно использовать особенность геометрического контраста. Например, посмотрите на логотип журнала L’oeil: l и i построены геометрически правильно, а лигатура oe органична и учитывает восприятие окружностей. Благодаря этому в логотипе возникает эффектный контраст:
![](/upload/setka_images/09104426022022_acb3891951eada938d821fe8c18ea10c2884033f.jpg)
Изображение: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
Подобный эффект можно встретить и вне типографики. На фоне конструктивно-технических форм дома Фокс-Ривер сильно выделяются деревья — возникает контраст геометричного и органичного:
![](/upload/setka_images/09104426022022_00ef4ecbef33723c9293d85ddb5e396ecc049496.jpg)
Точка, линия, плоскость
Основные формы в типографике — точка, линия и плоскость. Рудер считал, что всё состоит в движении и каждая форма может сама по себе создавать новые: из точки можно получить линию, а из линий — плоскость.
Ниже — примеры, как работают основные формы в типографике и как их может использовать дизайнер:
![](/upload/setka_images/09104426022022_6ed0b04ccb1af0573cd045b2bd21a60938919582.jpg)
![](/upload/setka_images/09104426022022_d879e3a09b3d33248cfb9e16b5b5b31c5891b3f5.jpg)
![](/upload/setka_images/09104426022022_1b9538555bc8b6bb16a0625a682661edb953ea1c.jpg)
![](/upload/setka_images/09104426022022_5d2552f3c147808bd3c9149b748f69964400c85d.jpg)
![](/upload/setka_images/09104426022022_7b6ae682f40573d2c3c9364d21893c206fdb58bd.jpg)
![](/upload/setka_images/09104426022022_3a951572a2150028f8727110976985967433bc44.jpg)
![](/upload/setka_images/09104426022022_3b7708faf9e65ed911a092d713c25e363002f0d0.jpg)
![](/upload/setka_images/09104426022022_1f995b601aba92748690c952130d3d6669d3fcca.jpg)
![](/upload/setka_images/09104426022022_174dab7e39076657c683b5ce7334147bbc186e9b.jpg)
![](/upload/setka_images/09104426022022_f6a03683afb636aed1c2d98a66b99d839599856a.jpg)
![](/upload/setka_images/09104426022022_f1dba46f5eb3018402b190ecf8fd0ee8a8f3b6eb.jpg)
![](/upload/setka_images/09104426022022_c276ca8d399eee73a1c079a8558d4d7cc1304846.jpg)
![](/upload/setka_images/09104426022022_b2d44a98fb0ab389c6e9b7d88859ec7c32c16caa.jpg)
![](/upload/setka_images/09104426022022_787cd23beca8deedb64c04891cba8e155a2f0297.jpg)
![](/upload/setka_images/09104426022022_a7f41f7e241a23287e43cf7b32196328f3ee98f4.jpg)
![](/upload/setka_images/09104526022022_01c985b720c9d485c3202f0fd3f67804db43c17c.jpg)
На плакате Музея ремёсел в Базеле дизайнер выделяет курсив, сместив каждую строку. Благодаря этому вся композиция превращается в линию.
![](/upload/setka_images/09104426022022_9525e600c00aed34bf6c2755bef38ff6475ec765.jpg)
Надпись «BERLIN» выполнена так, что возникает контраст линейного и плоскостного. Жирный шрифт образует плоскость и контрастирует с белыми линиями.
![](/upload/setka_images/09104526022022_2c5403f1cd9ee1933cf532496fafb2ce478e0387.jpg)
Контрасты
Человеку сложно понять свойства предмета, если его не с чем сравнивать. А некоторые понятия и вовсе теряют смысл без противоположности: например, верх и низ, горизонтальное и вертикальное, светлое и тёмное.
Человек нашего времени мыслит противоположностями, для него плоскость и ёмкость, далёкое и близкое, наружное и внутреннее — не суть несовместимые понятия, для него уже не существует просто «или — или», но скорее «как то, так и другое».
![](/upload/setka_images/09104526022022_4befbbf7beb24b094ca5962098ccd429e6e324f3.jpg)
![](/upload/setka_images/09104526022022_eb823e3041592498a67d0467d7f20f0a25c5e9c3.jpg)
![](/upload/setka_images/09104526022022_d81689b9daafeb4e05f4e50806f8a0badeb35b86.jpg)
![](/upload/setka_images/09104526022022_1622475d52a034371ea48c0023d01b008673fa58.jpg)
![](/upload/setka_images/09104526022022_f97d5b11e515b18d5d5295783fdc805222e4f88c.jpg)
![](/upload/setka_images/09104526022022_8f85803226cefdc30c30f3f11042ddfd3818c031.jpg)
![](/upload/setka_images/09104526022022_12742049cfec34d8c30d4ce9b526e047c04b5ef2.jpg)
![](/upload/setka_images/09104526022022_a1275543725065f8730d69d970e1f6667980bbc1.jpg)
Изображения: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
Чтобы композиция оставалась гармоничной, Рудер советует не доводить контрасты до предела. Например, посмотрите на чёрный логотип в этом извещении о рождении ребёнка:
![](/upload/setka_images/09104526022022_d4a257e8a8db61e530cda0520f82a52efcff4bf2.jpg)
Отношения большое — малое и тёмное — светлое доведены до предела, из-за чего равновесие вёрстки нарушается.
В сопоставлении противоположностей следует сохранить общее впечатление цельности. Излишне резкий контраст, как, например, светлого и тёмного, либо большого и малого, может дать одному из элементов такой перевес, что его равновесие с антиподом нарушается или утрачивается вовсе.
<…>
Контраст до́лжно строить таким образом, дабы у обоих антиподов оставалась возможность развития.
Эмиль Рудер
На этом плакате для художественной выставки композиция построена на контрастах прямого — круглого, жёсткого — мягкого. Мелкий шрифт помогает округлым формам обрести монументальность, а вертикаль цифры 1 и мелких надписей перебивает строка zurcher maler.
![](/upload/setka_images/09104326022022_7861540e65a35963f752cbb241404266b4d735a8.jpg)
На этой обёрточной бумаге lucien lelong явно заметен простой, но эффектный контраст наклонного и прямого:
![](/upload/setka_images/09104526022022_f0d8386452fbe1c9362fa4ea6d46c3ed0e23a37a.jpg)
Изображение: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
Не менее эффектные контрасты есть и внутри самих шрифтов. Например, в этой композиции на примере буквы u — демонстрация, как типограф может использовать контрасты шрифта Universe в пределах одной гарнитуры: тонкое — жирное, линия —плоскость, узкое — широкое, светлое — тёмное, прямое — наклонное, статическое — динамическое.
![](/upload/setka_images/09202628022022_4dd07e6a16f38a524bcdde8ad3f4a7e4053910de.jpg)
Цвет
В типографике ведущим цветом всегда был чёрный с оттенками серого. Он может сочетаться с любыми яркими цветами, но прежде всего — с красным. В первопечатных книгах именно этот цвет противопоставлен большому массиву чёрного, что позволяло выделять важные мысли и добиваться интересной композиции минимальными средствами.
Яркий цвет должен находиться в напряжённых соотношениях с чёрным, что вполне очевидно уже из первого эскиза произведения печати. Красное может доминировать, <…> что отвечает внутренней сути этого цвета, властного, неохотно подчиняющегося другим цветам. Однако в малом количестве красное, противоположенное большей массе чёрного и тесно сопоставленное с ним, выигрывает в ценности и яркости.
Эмиль Рудер
![](/upload/setka_images/09203528022022_cdd498f9c3841c80aeb2a4aa8527a4b2ab28bed1.jpg)
![](/upload/setka_images/09204128022022_d813ff2ec103e776333d3cca1cb1bf0644892def.jpg)
![](/upload/setka_images/09204628022022_33115a33fd5c954ca2576353c27428a3b86a9a33.jpg)
![](/upload/setka_images/09205228022022_822aa0f31dbf3a94d9a659370194b6b4f636e317.jpg)
![](/upload/setka_images/09210128022022_dbf4f129650802a52ca6fb0011cba1d701c19843.jpg)
![](/upload/setka_images/09210728022022_24f9bd347e859b477d3ed4e0d651c28606558ae2.jpg)
Изображения: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
На формуляре счёта издательства Артура Нигли AG красный цвет введён в минимальном количестве — это помогает выделить его и сделать «драгоценным». При этом дизайнер смог добиться ясного соотношения всех трёх цветов — красного, серого и чёрного.
![](/upload/setka_images/09104526022022_759c4fe169fbe050ab6e769dea1b847467cde436.jpg)
В обложке журнала Typographische Monatsblätter явно преобладает красный. А компактное чёрное пятно только усиливает яркость пятна. Кстати, если прикрыть надпись, то красный цвет уже не будет казаться настолько ярким.
![](/upload/setka_images/09104326022022_bca392c83b2e3712120ce32130749c4635c2eb78.jpg)
Изображение: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
Единство текста и формы
Задача типографа — облегчить человеку чтение издания. Но задачи у каждого текста разные, поэтому Рудер призывает подходить к своей работе с головой. Например, не стоит использовать старые шрифты в современном переиздании старой книги:
Когда переиздаётся книга XVIII века, есть два аргумента против применения в её наборе шрифта той же эпохи. Во-первых, новая книга есть продукт XX века и должна нести черты издания нашего времени, хоть её содержание и принадлежит прошлому. Во-вторых, не дело типографа — интерпретировать литературу на свой лад. Литература говорит сама за себя: либо содержание интересно читателю, либо нет.
Эмиль Рудер
А в сфере рекламы наоборот — важно зацепить читателя и заставить его как можно дольше изучать вёрстку плаката или брошюры. В таких задачах у дизайнера практически неограниченные возможности для личной интерпретации текста:
В рекламе значение содержания одного слова, порой — целого текста должно быть выявлено посредством типографики, поскольку воспринимается публикой в первую очередь оптически и лишь затем уже читается. Типограф должен также стремиться к тождеству значения слова и его типографического воплощения.
Эмиль Рудер
![](/upload/setka_images/09104326022022_5fbc85200676377a9290f40437f16339c117c96e.jpg)
Изображение: Эмиль Рудер, „Типографика“ / Издатель Дмитрий Аронов, 2017
![](/upload/setka_images/09104526022022_48babdd02a92d9d1eda93087ac2618311dedddf8.jpg)
Изображение: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
![](/upload/setka_images/09104326022022_17579118077d1802da21796dfd0b4275c7a20adf.jpg)
Изображение: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
![](/upload/setka_images/09104326022022_a63448bed7903b35374760823b1a2c4642a2f2d6.jpg)
Изображение: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
![](/upload/setka_images/09104526022022_ac78ab3f35109d6bf0682fe6aa099c0c12d2fa43.jpg)
Изображение: Эмиль Рудер, „Типографика“ / Издатель Дмитрий Аронов, 2017
![](/upload/setka_images/09104526022022_31e0fb8f0548ac71e76231855bc2bfe1ee3a9941.jpg)
Изображение: Эмиль Рудер, «Типографика» / Издатель Дмитрий Аронов, 2017
Больше обзоров книг о дизайне