Мастер-класс «Почему Стив Джобс любил шрифты» (Алексей Каптерев)
Привет, Хабр! Давно у нас в блоге не было расшифровок мастер-классов. Исправляемся. В этом посте вас ждет грандиозное путешествие в мир шрифтов от древнейших времен до наших дней. Если вы хотите понять, каким образом шрифты влияют на наши эмоции и наконец научиться отличать гуманистический гротеск от ленточной антиквы — добро пожаловать под кат. И да, там очень много картинок. Передаем слово автору.
Шутка, написанная гарнитурой Times, на 10% смешнее той, что написана гарнитурой Arial. Почему? Чёрт знает. Лучшее объяснение, которое я видел: юмор ассоциируется с агрессией, с остротой, с остроумием —, а Times выглядит более острым, чем Arial.
Ещё один любопытный эксперимент, в котором участвовало 45 тыс. человек. Заходишь на сайт, тебе показывают статью Дэвида Дойча, британского физика. В статье автор пишет, что сегодня очень трудно внезапно умереть. Например, от инфекционного заболевания или в уличной драке. Лет сто назад это случалось намного чаще. Главный вывод статьи — сейчас мир безопасен как никогда. В среднем, конечно, ведь где-то постоянно идут локальные военные конфликты.
И после прочтения статьи тебя спрашивали, согласен ли ты с утверждением, что мы живём в эру беспрецедентной безопасности? Варианты ответа: «да» и «нет». Следующий вопрос: насколько ты уверен в своём ответе? Варианты ответа: «не очень уверен», «довольно-таки уверен» и «полностью уверен».
Подопытные не знали, что при заходе на сайт алгоритм случайным образом выбирает для них один из шести шрифтов. Авторы эксперимента хотели на большом количестве участников оценить влияние шрифтов на согласие с текстом и уверенность в ответе.
Анализировались шрифты:
- Baskerville,
- Computer Modern (используется в научных журналах),
- Georgia,
- Trebuchet,
- Helvetica,
- Comic Sans.
Степень «убедительности» текста в зависимости от шрифта:
Между двумя крайними позициями разница в 5%. Большинство людей вообще назовут Baskerville и Georgia одинаковыми шрифтами, однако по статистике один на 2% «убедительнее» другого.
Если положить два текста рядом, то разница едва уловима. Но каким-то образом нашему мозгу один из них внушает больше доверия. Прямо 25-й кадр в действии! Вот в чём проявляется воздействие шрифтов на подсознание людей.
Вы слышали, что недавно Google поменяла два пикселя в логотипе? Учитывая, сколько людей заходят ежедневно на главную страницу поисковика и видят логотип, возможно, это не бессмысленный ход — потратить кучу денег на исследования и смену логотипа. Даже если вы не можете различить шрифты, они всё равно каким-то образом чуть-чуть на вас влияют. А уж если можете различить, то влияют довольно сильно.
Я не знаю, почему так происходит, как работает этот механизм. Для меня это проявление некой внутренней чувствительности. Типографика создает эмоциональную связь между автором и аудиторией. Эта связь возникает в любом случае, но её характер зависит от выбранной гарнитуры.
Это можно назвать метакоммуникацией. Есть текст, а есть моё отношение к тому, что я пишу.
Даже если взять подчёркнуто нейтральный, безликий шрифт, это тоже отношение. Только нейтральное, отстранённое. «Я не иду к вам в объятия»:
Здесь меня явно не любят, на меня хотят просто наорать:
Я часто бываю в Америке, там ситуация с гармоничностью шрифтов — в целом как у нас. Вот здесь человек явно хотел меня напугать, я к нему точно не приду.
В Европе со шрифтами получше.
Типографика выражает отношение к аудитории. Вот пример объявления:
Пришедший за пивом развернётся и уйдёт во всех трёх случаях. Но в каком-то случае он вернётся потом обратно, а в каком-то нет. И нужно написать так, чтобы кому-то на подсознательном уровне понравилось.
Можно ли управлять влиянием типографики на людей? Я считаю, что можно, хотя и не до конца. Для меня это вопрос оптического разрешения. Чтобы можно было выделять тонкие детали, показывать какие-то мелочи.
Вы смотрите, что-то различаете, а дальше спрашиваете себя: что я чувствую, когда вижу это? Затрагивает ли это в глубине души какие-то струны?
От этой картинки некоторые люди почувствуют, насколько разный будет вкус кофе, и поймут, что ценник оправдан.
Какой из этих логотипов Adidas ближе к настоящему? Сразу скажу, что все неправильные. У вас проблем не будет, все легко ответят, какой Adidas больше похож на реальный.
Здесь чуть сложнее определиться.
А вот здесь совсем сложно. Чувствуете, вроде что-то поймали, а потом всё больше и больше сомнений?
Вот настоящий:
Средний шрифт был взят за основу для логотипа и немного перерисован. Обычно логотипы так и делают: берут известный шрифт и изменяют какие-то мелкие элементы, чтобы логотип лучше работал.
А различить вот эти две фразы не способен почти никто.
Один из этих шрифтов называется Arial, а другой — Helvetica. О нём сняли фильм. Насколько мне известно, это единственный шрифт, о котором есть фильм, причём действительно интересный. Шрифтом Helvetica сделаны все эти логотипы.
Про Arial говорят:
«Нельзя создать хорошую типографику шрифтом Arial»
— Мэттью Баттерик
Я зашёл на сайт Артемия Лебедева, поискал по слову «Arial» и нашёл блестящий пример.
В студию Лебедева прислали логотип на рецензию, и в ней написано:
«Шрифт Arial показывает плохое качество», «а вообще, есть простой способ оценить качество дизайна. Если используется Arial, дизайн плохой, нет — можно переходить к оценке».
Тут каждая буква чуть-чуть отличается, но буквально на пару пикселей. Например:
И это разница между epic fail и epic win.
Почему, с какого перепугу? Дело в том, что если вы берёте два правила и применяете их к большому количеству букв, то результаты получаются совершенно разными.
Ещё пример: где настоящая Lufthansa?
Настоящая сверху. Посмотрите на сочетание F и T. «Quadratisch. Praktisch. Gut». Всё очень ровненько и по-немецки. А внизу какой-то бардак.
Вверху — правильный Jeep, с квадратной челюстью, такой американский. А внизу — с открытым ртом. Не Jeep. Верхний вариант хороший, нижний — плохой.
Надёжный признак провинциального дизайна — использование Arial в логотипах.
Для меня шрифты — это следы, оставляемые людьми. Сейчас шрифтами пользуются почти все, у кого есть компьютер. Я могу по этим следам что-то понять о человеке. Увидеть, что он говорит не то, о чём пишет. Это какое-то утерянное нами знание, позабытое. Мы перестали обращать внимание на мелкие подробности.
Давайте попробуем повысить оптическое разрешение.
Думаю, все понимают разницу между печатным шрифтом и имитацией почерка. Почти все из вас различают шрифты с засечками и без засечек. А кто-то может различить антиквы и брусковые? Это две группы, на которые делятся шрифты с засечками.
Антиквы делятся на старые, переходные и новые. Старые делятся на итало-французские и голландские.
Но должен сказать, что единой шрифтовой классификации не существует. В разных странах шрифты классифицируют по-разному. Я буду пользоваться своей, синтетической системой.
Короче, какой надо шрифт, чтобы красиво?
Вопрос хороший, но ответить на него очень сложно. Красиво для кого? Для вас и для аудитории. Поэтому я буду использовать такую систему измерений. Стив Джобс в одной из презентаций говорил, что Apple — это компания, которая стоит на перёкрестке между технологиями и изящными искусствами. К технологиям ближе, но изящные искусства не забыты. И мы все находимся где-то на этом перекрестке, в этом диапазоне. Конечно, есть клинические технари и клинические гуманитарии. Но обе эти крайности уже давно госпитализированы.
Я попробую вам показать, что у шрифтов тоже есть характер. Есть шрифты-технари, есть шрифты-гуманитарии. Может быть, вы выберете шрифт, который вам подходит по характеру. Или который отразит того, кем вы хотите быть в жизни
Вверху — идеализированный технарь, внизу — шрифт Pushkin, имитация почерка Пушкина.
И второй перекрёсток — между старым и новым. Между бессмертной классикой и преходящей модой. Между прошлым и современным. Получается матрица 2 × 2. Посередине будут какие-то нормальные, читаемые шрифты, ровные пацаны, юристы, экономисты. Им, кроме бабла, ничего не нужно. Прагматики.
Очевидно, что прагматичные шрифты мы используем для набора текста, шрифты с характером — для крупных надписей и логотипов. Вероятность совпадения этих двух задач очень мала. Есть очень мало шрифтов, которые и красивые, и хорошо читаются. Придумать и сделать такой шрифт — мечта каждого дизайнера. Очень редкий случай.
Здесь один шрифт более читаемый, другой — менее. Если мы поменяем их местами и размерами, ситуация не изменится.
Почему верхний нечитаем? Потому что красота — это повтор. Красота — это когда есть ровный, предсказуемый ритм.
Посмотрите на буквы Ш и буквы И. В верхнем шрифте они одинаковые, а в нижнем шрифте разные. Поэтому нижний легко читается, а верхний — красивый.
Можно сделать всё одинаково: было бы красиво, но не читалось. Есть какое-то простое правило повторения. Но если вы повторяете слишком часто, получается уже однообразно. Красиво — запоминается, практично — читается. Такой базовый конфликт существует в мире шрифтов.
Что хорошо для дорожного указателя, плохо для приглашения, и наоборот. Это очевидно.
А здесь разница уже не так очевидна, но она есть.
Один из шрифтов значительно лучше читается. Настолько, что в Америке потратили миллионы долларов на замену указателей по всей стране, перешли с одного шрифта на другой. Это нижний шрифт, он даже называется Clearview. Читается примерно на 12% лучше, быстрее воспринимается. Люди реже пропускают свои повороты, меньше нервничают, меньше попадают в аварии.
В Москве есть вот такое приключение: вы едете на машине, и вам нужно принять решение за три секунды — направо или налево?! А там развязка на Третьем кольце.
Все буквы одинаковые, текст сливается в прямоугольный треугольник, и одно от другого не отличить.
Классическое решение для таких случаев:
За счёт выносного элемента у буквы Р нижнее слово начинает заметно отличаться от верхнего. Оно обретает другую визуальную форму, и люди лучше это считывают. Взрослые обычно воспринимают слово как иероглиф. Ты его уже видел раньше, и, опять встретив, сразу «глотаешь» знакомую форму. В верхнем варианте форма просто убита, всё одинаковое.
Читаемость
Если вам нужен «самый читаемый шрифт», то его нет.
Если вы занимаетесь разработкой приложений, надо всё тестировать. Потому что на мобильных устройствах одни законы отображения текста, на настольных компьютерах — другие, на бумаге — третьи. То, что хорошо читается на указателе, будет плохо читаться в книге. Всегда лучше протестировать.
Но есть какие-то общие законы.
Мы знаем, что на бумаге лучше читаются шрифты с засечками, на экране — без засечек. Мы также знаем, что переходная антиква и гуманистический гротеск читаются хорошо. А плохо читаются антиква нового стиля и геометрический гротеск. Если вас волнует читаемость, опирайтесь только на результаты тестирования. Соберите минимум 30 человек и встаньте у них над душой с секундомером.
К сожалению, нельзя ограничиться одним экспериментом на все случаи жизни. Шрифты-прагматики скучные. Их цель: чтобы человек быстро прочитал и пошёл дальше. А всё остальное — интересное и запоминающееся.
Я расскажу сначала об антиквах, у которых есть отчётливый исторический флёр. А потом — о гротесках, довольно современных шрифтах.
Откуда взялись засечки и зачем они нужны?
Чтобы понять душу антиквы, прочувствовать её, нужно понять, что такое засечки. Для этого разберёмся, что такое буква. Вся современная письменность западной цивилизации базируется на финикийском алфавите.
Обратите внимание: нет заглавных букв, только строчные. Никаких засечек, просто не до того. Мне кажется, что людей мучили такие проблемы: «Боже мой, нас всех сегодня убьют».
Потом появились римляне. У них было много свободного времени. Римляне писали на пергаменте тростниковым пером.
Когда ведёшь тростниковое перо по бумаге, получается неравномерный штрих. И римляне стали писать красиво. Они начали добавлять декоративные штришки на концах букв для однородности, а значит, для красоты. Потом оказалось, что так ещё и удобнее читать.
Возникают линии, по которым взгляду легко скользить не срываясь. Для бумаги и камня это оказалось очень важно. Получалось красиво, но медленно. Приходилось долго вырисовывать каждую букву. Поэтому текста было немного.
То есть шрифты, которыми мы пользуемся, это наследники тростникового пера, той архаичной технологии.
Откуда взялись строчные буквы?
Очень долго — примерно девять веков — их не было. Но текстов становилось всё больше. А если долго и много пишешь, то из заглавных букв постепенно образуются строчные.
Где-то сразу ясно, из каких заглавных букв какие строчные образовались. Где-то менее очевидно, но угадать можно.
А где-то очень трудно понять, как образовывались строчные буквы.
Прошло 15 веков. По всей Европе писали вот так:
В Италии чуть-чуть иначе, а в Германии, Англии, Франции писали готикой. Она очень красивая и довольно удобная для письма. Одна-единственная проблема: абсолютно нечитабельна.
У Гутенберга уже появились строчные буквы. Заглавные буквы написаны красным. А потом был француз Николя Жансон, придумавший современную книгу.
Его послал учиться к Гутенбергу французский король. Но когда Жансон приехал к Гутенбергу, у того уже отобрали печатный пресс. Так что, по всей видимости, у Гутенберга Жансон не учился, но много времени провел в Майнце и научился довольно прилично печатать. Даже создал собственные шрифты.
Потом французский король умер, и Жансон решил не возвращаться, а уехать в Венецию. Там начинался Ренессанс, капитализм. Жансон взял рукописный почерк девятого века (в то время у Карла Великого был маленький Ренессанс), в котором встречались только строчные буквы…
… и добавил римские заглавные.
К слову, Жансон был не первым, кто пытался провернуть такой трюк, но ему первому улыбнулась коммерческая удача.
Мне интересно, как он это придумал. «Давайте возьмём буквы, которые разделены девятью веками, просто соединим их и посмотрим, что получится». А получилась красота, которой мы до сих пор пользуемся.
Вот пример ротунды, сделанной Жансоном:
В основном ему заказывали исторические и церковные тексты. Сегодня есть очень похожие шрифты, например Adobe Jenson — оцифрованный шрифт пятнадцатого века, но без кириллицы. Она есть в русской версии шрифта, которая называется Centaur, или Venetian 301. Вы получаете весь вот этот флёр Ренессанса, той новизны, вечного исторического панка.
Откуда взялся курсив
Курсив — это актуальный во времена Жансона итальянский почерк. В Италии в то время писали так:
Это почерк жившего тогда человека по имени Никколо де Никколи. Обратите внимание: заглавных букв нет, только строчные. Кто-то взял его почерк и добавил заглавные буквы. А наклонные заглавные буквы придумали только 50 лет спустя во Франции. В ту эпоху так печатали поэзию.
Почему все эти шрифты называются «антиква»? Потому что таким рукописным почерком переписывали античных авторов. У антиквы вечный исторический флёр.
Посмотрите на конструкцию буквы G. Я взял фрагмент изображения колонны императора Траяна. Видно, что потом G начала меняться, у неё появилась вертикальная ножка. А вот снимок из интернета: человек явно не разбирался, просто взял скучный газетный шрифт и пустил в производство.
Где настоящая Wikipedia?
Средняя. У неё характерная конструкция буквы W. Это был очень разумный, осмысленный выбор: раз мы энциклопедия, нам нужна энергия Возрождения, когда начался расцвет наук.
А это выбор компании, которая хочет быть «гуманитарием среди технарей», которая очень много работает с образованием, заботится о красоте. И десять лет в рекламе Apple применялась антиква старого стиля, шрифт Garamond. Кстати, первый логотип Apple был очень угловатым, рубленым. Этакий робот. А потом они решили нести красоту в массы.
Обратите внимание, что антиква времён Ренессанса невероятно корява. Дело в том, что она очень много унаследовала от рукописного текста, да и отливать типографские гарнитуры в то время умели плохо. Если вам нужно найти антикву именно старого стиля, а не нового, то наложите равнобедренный треугольник внутрь буквы А, если он ляжет с зазорами — это старый стиль.
Потом пришли люди с линейками. Так происходит: как только художники что-то делают и кому-то это нравится, начинает продаваться, тут же приходят люди с линейками и начинают всё оптимизировать. Одним из них был францисканский монах Фра Лука Бартоломео де Пачоли, который изобрёл двойную запись, дебет и кредит.
На ниве оптимизации шрифтов отметился Леонардо да Винчи.
Дюрер очень много пытался конструировать буквы, искал идеальные пропорции. Как раз в те времена придумали золотое сечение.
Но всё это не сработало, не прошло проверку временем. Шрифты получились некрасивыми, ими никто не пользуется. Всё оказалось не так просто. Оптимизаторы хотели простого решения, а его не было. Постепенно технологии улучшились, начертание стало поровнее, но шрифты не изменились. Лишь стали чётче.
Следующая большая революция в типографике связана с именем Джона Баскервилла, художника и бизнесмена.
Он очень долго учился каллиграфии, потом владел типографией. По мнению многих людей того времени, он делал лучшие шрифты в Европе.
В первой букве ещё есть какие-то признаки «перьевого» прошлого, а вторая — совсем другая буква. В ней нет ни грамма рукописности. Это чистая технология. Тогда появились газеты, и требовалось, чтобы в строку влезало больше текста. Шрифты становились у́же и практичнее. Главное, чтобы читалось. Баскервилл всё заострил, сделал засечки отчётливее. До него это тоже делали, но не так хорошо.
Это два компьютерных шрифта, но верхний — рукопись, нижний — печать.
В целом нижний текст читается лучше. Верхний более интересный, историчный, тёплый, душевный. Нижний — холодный, расчётливый, чёткий. Таких шрифтов довольно много.
Century Schoolbook — это первый шрифт, который многие люди видят в жизни, потому что им набирают детские азбуки и книги. Он специально сделан для детей и очень читаемый.
Люди с линейкой не остановились и добились успеха. У них получилась идеальная буква К. Ничего лишнего, всё очень четко. Автора звали Джамбаттиста Бодони. Кстати, он делал и кириллицу. Смотрите, какие яркие буквы. Очень много ненужных украшений, некоторая показушность.
Слева Baskerville, справа Bodoni:
В Bodoni подчёркнуто красивые буквы. Такие прямо: «Посмотрите на меня». А Baskerville — рабочая лошадка.
В шрифте понятие «контраст» означает разницу толщины внутренних элементов буквы.
Джамбаттиста Бодони просто экстремально задрал контраст. И сегодня мы это видим на каждом шагу в газетных киосках, в высокой моде, на театральных афишах.
Получилось очень холодно. Ренессанс — это тепло, душевно и гуманно, а высококонтрастные шрифты — все по линейке и лекалам, очень отстранённо. Вы заходите в дорогой магазин, и сразу видно, что вас там не ждут. И здесь такое же ощущение: «Отойди». Зато красиво. Вот первый выпуск журнала Vogue, конец девятнадцатого века, шрифт вообще ничем не отличается.
Где настоящий Armani?
Внизу. В кои-то веки я могу это легко объяснить. У Armani не такое настроение, как у Gucci. Gucci развратен, а Armani такой: «Чувак, отойди. Я красивый». Gucci смотрит вам в глаза. А в визуальных материалах Armani очень часто используются чёрно-белые снимки, идеально отстранённые образы, взгляд в даль. Это совсем другое настроение, другой шрифт. Всё очень продуманно.
Теперь вы знаете, чем различаются старый стиль, новый и переходный. Самая корявая буква — это старый. Самая красивая — новый. Ни то, ни сё — переходная антиква. То есть посередине скучный, газетный шрифт, слева — тёплая ламповая красота, а справа — холодная цифровая.
Где гуманистический, где переходный, а где шрифт нового стиля?
Самый высокий контраст у третьей буквы: сочетание очень широких и очень узких элементов. Это новый стиль. Самая корявая буква — вторая, старый стиль. Первая — ни то, ни сё, переходная антиква.
А как бы вы классифицировали это?
Такая задача сегодня часто возникает в банковском секторе. Вы — банк, существующий с восемнадцатого века. С одной стороны, вам нужно транслировать надёжность, стабильность и историчность, что вы тут на века. С другой стороны — что вы удобны для молодёжи, что у вас онлайн-кабинет. Как увязать два этих противоположных послания? К слову, в сфере недвижимости такое же затруднение.
Для таких случаев совсем недавно придумали ещё одну группу шрифтов. У них пока нет устоявшегося названия. Их очень условно называют «антиквы с треугольными засечками», хотя по факту засечки не треугольные, а скорее трапециевидные.
В каком-то смысле это возврат к старым формам, попытка геометризировать первый шрифт, сделать его лучше.
В первом случае нет засечки, потом засечка, потом засечка, и потом опять нет засечки: возврат к старому, но в более аккуратной, геометрической форме.
Таких шрифтов довольно много. Если у вас на компьютере есть Word, то можете взять шрифт Constantia. Сбербанк пользуется Fedra. Ещё очень популярен Centro, бывший Agora.
Антиква используется в следующих сферах:
- Образование.
- Мода.
- Торговля предметами роскоши.
- Банковское дело. Хотя в последнее время банки начали переходить на гротеск, шрифты без засечек.
Гротескные шрифты (шрифты без засечек)
История гротеска связана с именем Уильяма Кэзлона IV, правнука очень знаменитого типографа. Правнук решил сделать вот такой шрифт без засечек.
Его очень сильно критиковали, и, честно говоря, действительно получилось довольно коряво. Мужчина реально ничего не понимал в шрифтах. Но постепенно он совершенствовал своё детище.
Сначала такие шрифты называли «египетские», потому что по времени их появление совпало с египетским походом Наполеона. Они были ужасны. Я смотрю на эти шрифты и думаю: «Блин, кто так делает?» Мне трудно объяснить, почему. Просто какое-то общее отвращение. Посмотрите на А: кто её бил так долго, что она такая вся измученная?
В то время в порядке вещей была антиква, люди привыкли к тому, что буква красива. А тут им вываливают такое.
Создатели подобных шрифтов просто брали антикву и делали её моноконтрастной, оставляя конфигурацию без изменений. Выглядело очень странно. Публика дала этим группам шрифтов такие названия: Grotesque, то есть нелепо гротескный, и Gothic, то есть готский (а не готический), варварский.
Потом началась промышленная революция, возникла потребность в инженерах. А инженерам нужны были чертежи, куда прекрасно ложились новые шрифты, антиквы на чертежах совершенно не работают, ничего не разобрать. И вторым «потребителем» гротескных шрифтов стала реклама. Вот рекламное объявление восемнадцатого века о продаже рабов.
При всём уважении и любви к антиква-шрифтам, у них мало вариативности. Всё одинаковое. А с гротесками стало интереснее. Во-первых, людей перестали продавать. Во-вторых, читабельность получше. Но гротескные шрифты использовались только для заголовков. Никто не думал набирать текст такими шрифтами.
Сегодня есть три группы гротесков:
Первые гротески выглядели так:
Мы этим до сих пор пользуемся. По большей части они применялись для подобных задач:
Затем в России произошла революция 1917 года. Возникло новое течение в шрифтах, исключительно русское веяние. Сначала от руки, очень аккуратно, нарисовали две буквы. Постепенно это превратилось в шрифт. Так в историю вошло понятие «русская типографическая революция»: супрематизм, дадаизм и прочее. «Давайте мы возьмём прямоугольник, и все буквы у нас будут как прямоугольник». Получилось интересно. И такого наделано довольно много.
Кстати, школа «Сколково» до сих пор пользуется шрифтом Rodchenko.
В Германии Дюрер давно умер, но люди с линейками остались. Они сказали: прямоугольник нам не подходит, возьмём овал. Точнее, давайте всё сведём к форме стадиона.
Это шрифт DIN, создан в Германии в
