Люди обычно не разбираются в шрифтах, это нормально. Но есть особенные люди, которые при этом думают, будто разбираются. Это архитекторы.

Если прямо спросить архитектора, понимает ли он в шрифтах — он скромно скажет «нет». Но когда придёт время сделать вывеску для проекта — эта скотина не позовёт никого на помощь, а сделает самостоятельно.

Я же учился в архитектурном. Нам внушали, что архитектура — мать наук. И это главная вещь вообще в мире. И раз так, то архитекторы — это всемогущие такие творцы, они целые города могут придумывать, а уж буковки и подавно. А ещё мы на первом курсе чертили Антикву циркулем и линейкой. Циркулем, блять!

Дорогие мои! Нас обманули. Её нельзя было так чертить.

Буквы — такая же древняя, сложная и запутанная история, как и сама архитектура. И пока вы тратили свои десять тысяч часов, чтобы стать архитектором, кто-то другой потратил их, чтобы стать графическим дизайнером. И стал им, а вы — нет.

Вот, глядите-ка:

Товарищи мои сделали — умнейшие люди, между прочим.

Это даже не тот случай, когда у архитектора была творческая задумка поиграть со шрифтами. Про тот случай я даже не хочу начинать, здоровье дороже, но это и не он. Здесь ребята просто хотели аккуратно поставить надпись.

Не получилось.

Ладно, а так ли важна шрифтовая часть? Главное же — работа с городским контекстом, с функцией и формой, с масштабом, с материалом и фактурой, ну вы сами знаете. А шрифт — да потом, время придёт, всё появится. Так?

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

* * *
Короче, архитекторы, зовите дизайнеров! Если больше некого — зовите нас. Мы нарисуем вам текст для фасада бесплатно. Ко всем обращаюсь — от малых до великих. Вот прямо сегодня письмо — завтра у вас файл с буквами. Честно, не вру, пишите прямо мне: [email protected].

Когда четыре года назад Игорь Штанг впервые приехал в Ростов-на-Дону со своим курсом про типографику, я подумал: «Блин, что, за, бред. Зачем пересказывать учебники, целых три дня часами сидеть пережёвывать всю банальщину по кругу. Ещё и в этой его бесконечно занудной манере. Прямо соревнование, кто раньше заснёт. Короче, ну нет, спасибочки».

Сейчас, когда в нашей команде обнаружилось целых семь юных дизайнеров, я подумал «ШТАНГ ВСКЛ ВЫЕЗЖАЙ РОСТОВ СРОЧНО СПАСИ НАС ЗПТ ОЧЕНЬ ЖДЁМ ТЧК».

И вот, пожалуйста:

Стоит довольно-таки дорого, но мы психанули.

Программа.

Мария, по правде сказать, я не знаю. Но мне тоже интересно. Поэтому я решил позвать в нашу рубрику приглашенного ответчика. Сегодня на вопрос отвечает дизайнер Саша Ягуза. Встречайте!

* * *

В России, по сравнению с западом, рынок печатных сми чувствует себя весьма не очень — так говорят, да и по полкам магазинов видно. Но есть имена.

Определено точно стоит следить за тем что делал и делает Дима Барбанель. Человека опытнее и круче в стране, думаю, нет. К сожалению, многое из того что он сделал в печатных сми, умерло или изменилось до неузнаваемости. Из супер важного — старый русский Interni (2007—2010), редизайн журнала «Вокруг Света» (начало 2010), Сitizen K, журнал «Эрмитаж». Обязательны к ознакомлению работы Кирилла Глущенко — это русский Port, а также относительно новые номера Esquire и Nosorog Magazine. Конечно — Дима Кузмичев, и конечно Иван Величко и Щука.

Пока крупные издательства отказываются от печатных версий своих журналов, появляются примеры независимых интернет-изданий. Примеры таких журналов на западе можно перечислять пару суток, рынок огромен. В России это Asphalt Magazine Артема Стрижкова, литературный журнал Носорог. Пример так популярной на западе арт-инди-эротики (Odisseo, P magazine, Morena) был и в России — Meow Mag, но он уже всё, как я понял.

Отдельной строкой хочу упомянуть Heim magazine, его сделал я, ахах.

Собрал для вас десяток журналов, которые сейчас нравятся. Давайте посмотрим:

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

Мария!

Не получится обхитрить систему и сверстать нескучно, при этом не особо погружаясь в тонкости дизайнерского ремесла. Нескучно сверстать — это неправильная постановка задачи. Надо уметь верстать понятно и аккуратно, попадая в тему и передавая настроение. Тогда, если материал интересный — оно и получится нескучно. Как научиться? Я вижу два возможных направления.

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

См. также: убрать всё лишнее, ещё разок, смешать комки.

Второе направление — комбинаторика. Ну или как его назвать. Смысл в том, что мы же не умеем ничего придумывать, а можем только синтезировать. Собирать в голове новые штуковины из заготовленных шаблонов. Эти шаблоны — важный арсенал. Чем их больше, тем сложнее и интереснее получится вёрстка.

Может показаться, что коллекционирование примеров дизайна работает как заготовка шаблонов. Но нет! Чтобы загрузить в себя шаблон, надо его воспроизвести. Перерисовать своими руками.

Например, предложим начинающему дизайнеру задание: скопируй, пожалуйста, вот эту картинку (слева). Тут достаточно подобрать шрифты, только в середине надо рисовать буквы руками, но они простые. Дизайнер присылает свою версию (справа).

Отлично. А теперь сделай, пожалуйста, то же самое, только по-русски? Да, Мила, это я тебе сейчас говорю — давай, присылай уже!

Пара десятков таких упражнений, и скованность пройдёт, а новый уровень свободы появится. Всего-то — повторить много чужих дизайнов. Помогает магически.

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

Михаил!

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

Думаю, активное использование этих шрифтов обусловлено доступностью: наверняка, число пиратских копий измеряется сотнями тысяч. Но дело ещё и в культуре. В способности дизайнеров, их клиентов и конечных потребителей улавливать нюансы. Чем ниже эта способность, тем более яркие шрифтовые решения будут востребованны. А эти буквы очень выразительные.

Не думаю, что шрифт стоит оценивать по десятибалльной шкале ущербности. Плохой шрифт встречаются раз в тысячу реже, чем плохой дизайн, сделанный из отличных шрифтов. Это двусторонний процесс: дизайнеры и их клиенты формируют спрос, а производители шрифтов задают планку качества. И я бы не сказал, что производители отстают. Думаю, слабое звено здесь — дизайнеры. Особенно штатные дизайнеры рекламно-производственных компаний. Именно они ответственны за большую часть плохого дизайна на улицах.

Людям, которые не любят тратить деньги на дизайн, я советую взять любой текстовый шрифт. Не какой-нибудь особенный, а «обычный». И не набирать одними заглавными. Это обеспечит нормальную читаемость и современный вид через пять, а то и двадцать пять лет. Как найти такой шрифт — например, сделать выборку с тегами text и cyrillic на myfonts.com.

Никита!

Вёрстка вполне культурная, серьёзных проблем не вижу.

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

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

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

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

Простейшая книжная страница состоит из колонки сплошного текста и окружающих его полей. Если оставить только текст, читатель справится. Мозг человека хорошо распознаёт объекты: книгу от окружающей обстановки отделит без проблем. Но надо понимать, что эта задача решается не раз и навсегда. Мозг приспособлен к динамичной среде, поэтому будет «включать распознавание» постоянно: «так, дочитали эту строчку, дальше внешний мир, нам туда не надо, ищем новую». Незачем нагружать подсознание читателя этой работой. С «нейтральной зоной», явно отделяющей текст от окружающего мира, живётся проще.

Если текст разместить на плашке или в контурной рамке — внутри тоже понадобятся отступы. Казалось бы, для изоляции блока достаточно физической границы. Но она мешает читать текст. Фотке не нужны дополнительные поля, а тексту нужны. У набранного левым флагом текста правое поле делаем шире, чтобы правая граница не прижимала свободный край. Нижнее поле стоит сделать существенно больше верхнего: расстояние до последней неполной строки должно быть сопоставимым с расстоянием до предпоследней, тогда придёт гармония.

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

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

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

Красивые поля отличают от уродливых так же, как всё красивое отличают от уродливого. На глаз. Сначала настраиваешь внутренний камертон — смотришь на то, что авторитетные люди сочли прекрасным, и говоришь себе: «вот это, стало быть, хорошо». И так много раз. Прислушиваясь к себе, но не считая своё сегодняшнее мнение особенно важным. Потом с осторожностью применяешь.

Дима!

Строго говоря, я люблю на сайтах не крупный, а нормальный текстовый кегль. Такой, чтобы читать было удобно. Но сейчас его приходится называть «крупным» — распространённая норма слишком мелкая.

Если смотреть на вопрос с технической стороны — дело в изменении параметров мониторов. Лет 10-15 назад типичный экран компьютера выдавал разрешение 72—96 ppi. Текст в браузерах не сглаживался. Надписи, набранные 10-м шрифтом выглядели вполне разборчиво, а 12-й уже тянул на комфортное чтение. Сейчас используются экраны с разрешением в пределах 95—135 ppi (данные отсюда). Пиксель уменьшился — уменьшился и заданный в пикселях текст.

Много лет назад Лебедев писал, что разрешение экранов со временем повысится, указанные в пикселях размеры потеряют смысл, в экранную графику придут метрические единицы, устройства будут знать своё разрешение и научатся правильно переводить заданные размерности в собственные пиксели (это мой вольный пересказ).

Получилось не совсем так. Это пиксель превратился из абсолютной величины (светящаяся лампочка в матрице) в относительную — «CSS-пиксель». Устройства с ретина-экранами научились переводить CSS-пиксели в свои собственные. Но «обычные» экраны отображают CSS-пиксели без масштабирования. Можно задавать кегль в «емах» или процентах — это ничего не изменит. На 11-дюймовом Макбук-Эйре (экран с разрешением 135 ppi) текст будет выглядеть почти в полтора раза мельче, чем тот же текст на 21-дюймовом Аймаке (105 ppi). И оба варианта будут сильно мельче, чем на старом добром 15-дюймовом мониторе с разрешением 1024 × 768 (82 ppi). Простое решение в том, чтобы писать крупнее.

Кроме того, размеры мониторов увеличились. Ширина текстовой колонки — один из факторов, сдерживающих величину кегля, ведь оптимальная длина строки выражается в уместившихся знаках. Шире экран — шире текстовая колонка — можно писать крупнее.

Собственно, дело не только в размере монитора. Сменилась композиционная парадигма. Раньше веб был сплошь многоколоночным. Дизайнер видел перед собой прямоугольник экрана и старался уместить туда всё. Теперь сайт — это длинная вертикальная колбаса, непрерывный поток информации. Базовый элемент этого потока — основная колонка текста. Единственная или очевидно доминирующая, а значит и занимающая значительную часть ширины экрана. Шире колонка — мы это знаем — крупнее текст.

И ещё, зэ ласт бат нот зэ лист: чем крупнее типографика в десктопной версии — тем меньше движений при адаптации вёрстки к экрану телефона. Вплоть до отсутствия такой необходимости.

P.S. Друзья, буду благодарен вам за примеры. Положительные и отрицательные, с подтверждающими или опровергающими комментариями. Просто примеры тоже сойдут.