В двух словах о шрифтах, часть первая

Обычно клиенты совсем ничего не понимают в шрифтах. Многие всё ещё считают любой шрифт с засечками «стандартным вордовским». Как дизайнеры мы страдаем от этого, но как стратеги — вместо того чтобы страдать и злиться, объясняем всё по порядку.

В закладки
Аудио

Такую статью можно было бы составить из сплошных дисклеймеров вроде «рассматривать будем только современные европейские системы письменностей, когда Овен в Меркурии». Мы так и сделали, а потом всё это убрали, но несколько предупреждений пришлось-таки оставить.

  • Просим отойти от экранов специалистов по шрифтам и буквам. Эта статья от простых ребят из брендинга для простых любопытствующих.
  • Не будем брать для разбора экстремальные варианты (ещё их называют акцидентными). С ними сложно. С первого взгляда может показаться, что в их оценке — сплошная вкусовщина, но на деле для этого нужно обладать большим опытом. Так и во многих других сферах бывает, ничего страшного. Просто продолжайте.
  • Общепринятой классификации шрифтов нет. Если бы она существовала, не существовало бы этой статьи. Как ни группируй их, всегда найдётся тот, который входит сразу в несколько категорий.

Содержание:

Удобство чтения

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

С годами и с опытом стало ясно, что, вообще-то, невозможно построить хороший шрифт с помощью чёткой геометрии. Такие шрифты просто неудобно читать. Даже те из них, которые выглядят как вычерченные, на самом деле скомпенсированы для комфортного восприятия человеком.

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

Розовым отмечен ровный круг. Шрифт Futura

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

Ребрендинг Oppo от Pentagram

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

Шрифт Circe

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

Но что если читаемость текстов не очень-то и важна? Например, для бренда, который коммуницирует с аудиторией через Instagram, используя визуальные образы. В таких имиджевых случаях стоит обращать внимание на образ, который вызывает шрифт. Может быть, здесь всё наконец-то субъективно? Попробуем разобраться.

Для описания шрифтов и их классификации существует много различных параметров. Остановимся на нескольких принципиальных.

Засечки и их отсутствие

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

Синим обозначены засечки. В верхней части букв — по две односторонних засечки. Шрифты Lava, NWT Bodoni и Rockwell

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

Антиква Times New Roman, гротеск Arial, брусковый Rockwell и гротеск-антиква Opium New

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

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

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

Антиква может выглядеть прогрессивней гротеска, всё дело в деталях. Шрифты Bluu Next и Impact

До недавнего прошлого бытовал миф, будто в текстах большого объёма антиквы читаются быстрее и комфортнее. Это было справедливым, когда люди в основном имели дело с текстом, напечатанным на бумаге. Но мы уже давно гораздо больше читаем с экранов компьютеров и смартфонов. А там царят гротески. Люди просто-напросто перестроились и привыкли к шрифтам без засечек.

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

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

Брусковые шрифты Rockwell и Clarendon

Контраст, наклон овалов и открытость знаков

Под контрастом имеется в виду разность толщины горизонтальных и вертикальных штрихов в буквах.

Более сильный контраст в Times New Roman в сравнении с Arial

Наклон овала наиболее очевиден в букве о, но и в буквах с полуовалами он тоже есть. Как правило, наклон овалов одинаков во всех буквах шрифта.

И снова Times New Roman и Arial, разные наклоны осей их овалов

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

Закрытая Helvetica и открытый PT Sans

Эти три свойства (а вообще-то их больше) объединены в одну группу, так как зависят от одного важнейшего аспекта, на который мы наконец-то обратим внимание, — рукописных истоков шрифта.

В большинстве случаев основа текстовых шрифтов лежит в физическом письменном инструменте. Это может быть кисть или зубило для высекания на мраморе. Однако самые популярные — ширококонечные или остроконечные перья.

Ширококонечное перо

Ширококонечное перо аналогично плоской кисти или даже ширококонечному маркеру. Главное, что след, который оставляют эти инструменты, — узкий отрезок, и ширина штриха у букв, нарисованными ими, зависит от направления инструмента. Именно поэтому русская буква И не равна отражённой латинской N.

Буквы И и N в шрифтах Lava и Circe

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

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

Шрифт Adobe Jenson

Есть ещё гуманистические гротески, несущие в себе те же или близкие свойства. Но если гуманистичность антиквы говорит о её близости к истокам производства шрифтов, то с гротесками сложнее.

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

Johnston — один из первых гуманистических гротесков (1916 год). Его автора Эдварда Джонстона некоторые называют отцом современной каллиграфии. Здесь представлена цифровая версия шрифта от ITC

Остроконечное перо

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

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

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

Гуманистическая антиква Leksa и антиква нового стиля NWT Bodoni

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

При этом как и гротески они имеют меньший контраст штрихов. Один из самых известных шрифтов, Helvetica, принадлежит этому типу.

Неогротеск Helvetica и гуманистический гротеск Gill Sans. Второй должен читаться с меньшим напряжением и быстрее

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

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

Тем не менее в кириллице тоже есть устоявшиеся правила изображения знаков. Поскольку они логичны, нарушать их просто невыгодно. Трудно объяснить их более ёмко и кратко, чем это сделала Александра Королькова. Поэтому просто дадим ссылку на её легендарную статью.

Насыщенность шрифта

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

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

Шрифты с тонкими штрихами из-за слабого контраста с фоном читать тоже непросто. Они визуально «шумят» и могут даже пропадать в мелком размере из-за особенностей печати или разрешения экрана устройства. Поэтому крайние варианты насыщенности всегда лучше оставлять для заголовков или других особых случаев с короткими текстами.

Да, сначала вы посмотрели направо, но всё равно читать легче текст по центру. Шрифт Montserrat

Плотность шрифта

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

Шрифт Grtsk

Возможно, дело в том, что в мире шрифтов, как и везде, присутствует мода и тренды. Не всегда графические дизайнеры думают только о функциональности дизайна.

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

Заключение

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Два слова: бренд&консалтинг", "author_type": "self", "tags": ["\u0448\u0440\u0438\u0444\u0442\u044b","\u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430","\u043b\u0438\u043a\u0431\u0435\u0437","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 28, "likes": 144, "favorites": 479, "is_advertisement": false, "subsite_label": "design", "id": 82050, "is_wide": true, "is_ugc": true, "date": "Fri, 06 Sep 2019 12:10:42 +0300", "is_special": false }
0
{ "id": 82050, "author_id": 153720, "diff_limit": 1000, "urls": {"diff":"\/comments\/82050\/get","add":"\/comments\/82050\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/82050"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
28 комментариев
Популярные
По порядку
Написать комментарий...
10

Серьезно - "В двух словах о шрифтах, часть первая"?

Ответить
18

Серьезно!
Мы шуток не любим.

Ответить
3

Вы просто не умеете их готовить!

А по делу, статья вроде годная. Но не понял, как применить полученные знания, для извлечения прибыли))

Ответить
33

1. Читайте статью.
2. Начинаете разбираться в шрифтах.
3 ???
4. ПРИБЫЛЬ!

Ответить
0

Каким шрифтом и в каком регистре написать логотип проекта с наименованием из 7 латинских букв, чтобы привлечь за 3 года инвестиций от $48 млн? Ваше мнение?

Ответить
5

Любым.

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

Ответить
0

Тщортав еврюга:)))

Ответить
1

Да меня, собственно, смутило - "Часть первая". Тогда бы уж "В двух частях о шрифтах"

Ответить
0

Статья отправилась в закладки

Ответить
6

"В двух словах о шрифтах. Часть 1 из 89"

Ответить
5

Просто если не в двух словах, то там талмуд страниц под тысячу может набраться.

Ответить
11

Про историю засечек — вообще мимо, при написании статьи нужно было изучить этот вопрос подробнее.

Засечки появились тогда, когда люди начали высекать буквы на камне. Об этом писал Яков Чернихов в своей книге "Построение шрифтов":

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

Ответить
0

В статье не всё так хорошо через час, как хотелось бы?

Ответить
3

У наших три шрифта на все случаи жизни: Uni Sans, Docker и Roboto :)

Ответить
3

Очень любопытно. Спасибо за статью!

Ответить
3

Спасибо за статью!
Очень хотелось бы прочитать не сложный туториал где, что и почему лучше использовать. Круто было бы провести пару анализов, как вам шрифты бутстрепа 4, или как вам шрифты медиума. Что бы я (человек ни чего не понимающий в шрифтах), смог хоть как-то адекватно выбрать шрифт для проекта.

Ответить
0

Расскажите про шрифт Inter, планирую его юзать в своем проекте, как минимум под веб версию, возможно и в мобайл на смену SF.

Ответить
5

Спасибо за ответ, обратная связь пушка вышка.

Ответить
0

Возможно, ответы на ваши вопросы есть в статье команды Figma про его разработку? Вот она: https://www.figma.com/blog/the-birth-of-inter/

И вот перевод на русский: https://ux.pub/rozhdenie-shrifta-inter/

Ответить
0

Конечно спасибо, но раз я выбрал этот шрифт, то понятное дело что первым делом уже прочел эти статьи, причем узнал о нем как раз с ux pub. Я хотел узнать больше с личного опыта работы с ним, если таковой имеется. А гуглить вроде не разучился.

Ответить
1

А, ну сорян, вопрос был задан очень общо, и я его неправильно понял :–)

Ответить
1

Интенресная и познавательная статья.
Спасибо!!!

Ответить
0

Спасибо.
Замеряли скорость чтения и понимание на разных шрифтах?

Ответить
0

Терпеть не могу Гельветику.
Простите...

Ответить
0

Так, а можно со шрифтами еще поиграть, нужно больше вариантов.

Ответить
0

Вы пишете везде dva slova, потому что для указанных вами шрифтов нет поддержки кириллицы?) Знакомая проблема. В двух словах о шрифтах: "Юзайте Noto".

Ответить
0

Неправда, в посте есть картинка с кириллицей

Ответить
0

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

У вас есть какие-нибудь объективные данные касательно комфортности чтения? Я, к примеру, практически не читаю текстов на бумаге, но читать электронные книги мне намного комфортнее в антикве.

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ] { "page_type": "default" }