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

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

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

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

Содержание:

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

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

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

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

Розовым отмечен ровный круг. Шрифт 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 с первого взгляда, полезнее понимать, что общего в их характере и какой он.

0
46 комментариев
Написать комментарий...
Артем Калашников

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

Ответить
Развернуть ветку
Два слова: брендинговое агентство
Автор

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

Ответить
Развернуть ветку
Александр

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

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

Ответить
Развернуть ветку
Два слова: брендинговое агентство
Автор

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

Ответить
Развернуть ветку
Алексис Второй

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

Ответить
Развернуть ветку
Два слова: брендинговое агентство
Автор

Любым.

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

Ответить
Развернуть ветку
Тимур Мазукабзов

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

Ответить
Развернуть ветку
Артем Калашников

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

Ответить
Развернуть ветку
Oleg Makarov

Это же шутка юмора. Специально для привлечения внимания

Ответить
Развернуть ветку
Олег Дечев

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Артём Иванов

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

Ответить
Развернуть ветку
Ник Рам

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

Не часть первая, а первое слово! Оно - дороже второго!))

Читать - что угодно, но  часто приходится распознавать и править отсканированные тексты. И тут шрифты с засечками достают (особенно буквы "с" и "е").

))

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Александр

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

Ответить
Развернуть ветку
Али Жакупов

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

Ответить
Развернуть ветку
Олег

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

Ответить
Развернуть ветку
Андрей Чураев

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

Ответить
Развернуть ветку
Вячеслав Григорьев

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

Ответить
Развернуть ветку
Вячеслав Григорьев

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

Ответить
Развернуть ветку
Kirill Oleinichenko

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

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

Ответить
Развернуть ветку
Вячеслав Григорьев

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

Ответить
Развернуть ветку
Kirill Oleinichenko

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

Ответить
Развернуть ветку
Vadim Tarasov

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

Ответить
Развернуть ветку
Ольга Иванцова

М-м-м-м.. читала не спеша текст, вкушая его как коллекционный коньяк дорогой - не спеша. маленькими глоточками :-) Ссылку сохранила

Ответить
Развернуть ветку
Michael Steinberg

Хоть это и не совсем по теме, но почему сейчас в моде печатать тексты бледно-серым или голубым цветом?  Неудобство - налицо, а в чём преимущество, если оно вообще есть?

Ответить
Развернуть ветку
Сергей Трущенков

Учился я, короче на журналиста, да не простого журналиста, а военного, такого который в любых условиях дивизионную газету сможет издать и боевому духу солдат упасть не даст. Это к тому что, в отличие от университетских коллег, мы изучали не только обороты речи и сложносочиненные предложения но и всю полиграфию от киля до клотика, с типографскими шрифтами, короче, знаком не понаслышке и четко знаю что в классификации шрифтов есть всего три характеристики - шрифты рубленые (такие как Arial), шрифты с засечками (такие как Times New Roman) и шрифты с засечками едва наметившимися (таких в стандартном наборе Word нету), у всех эти шрифтов есть три написания - прямое, наклонное и курсивное, у всех этих шрифтов есть три насыщенности - светлая, полужирная и жирная, у всех есть высота выраженная в пунктах (это 1/48 часть дюйма), размеры текстовых шрифтов имеют эмпирические названия в зависимости от высоты - 8 пунктов "Петит", 9 пунктов "Боргес", 10 пунктов "Корпус", 12 пунктов "Цицеро". Каждая отдаваемая в набор статья сопровождалась техническим заданием метранпажу (ну, это наборщик) каким шрифтом что набрать, где разместить заголовок и где фотоснимок. Газета дивизии издавалась трижды в неделю и была жутко популярной среди военнослужащих срочной службы (там бумага была мягкая). Все. Никаких полиграфических выебонов для нормальной газеты не требуется.

Ответить
Развернуть ветку
Александр Булгаков

ну  и о чём статья хуйня полная. я это 10 лет как знаю, автор ты что?

Ответить
Развернуть ветку
Michael Steinberg

Наверно, статья написана не для таких великих знатоков.

Ответить
Развернуть ветку
Цветочек Господства

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

Ответить
Развернуть ветку
Два слова: брендинговое агентство
Автор

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

Ответить
Развернуть ветку
Тарас Атавин

Что за бред? Какая к чёрту динамичность ШРИФТА? Какой к фигам характер? И как можно умудриться не наклонить рукописные овалы в право?

Ответить
Развернуть ветку
Michael Steinberg

Попробуй писать широким (плакатным) пером - сам увидишь, куда наклонятся овалы из-за различий в толщине.
К тому же речь идёт не о скорописи, а о рисованных буквах.

Ответить
Развернуть ветку
Евгений Рублев Петренко

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

Ответить
Развернуть ветку
Roman Sergeevich

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

Ответить
Развернуть ветку
Murad

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

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

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

Ответить
Развернуть ветку
Margo Garipova

в дополнении ко всему вышесказанному, поделюсь ещё одним классным и полезным ресурсом, который можно использовать в работе: https://almanac-rus.readymag.com/fonts/ (альманах про шрифтовые пары)

Ответить
Развернуть ветку
Ирина Камаха

Овен в Меркурии. Ох.... Не, статья хорошая, полезная, вот только Овен...

Ответить
Развернуть ветку
Инесса Михайловна

Спасибо! Интересная и познавательная статья! Мимолётно задумывалась о разности шрифтов и их огромном количестве, но выбирала почти всегда Times New Roman. Возможно, в дальнейшем буду более осознанно относиться к выбору. 

Ответить
Развернуть ветку
Alexander Besedin

На смену Times New Roman пришёл Calibri, который в текстовом редакторе MS Word сейчас идёт по умолчанию.Очень УДОБОчитаемый шрифт, и нечего заморачиваться. Если, конечно, к форматированию текста не предъявлены "особые" требования...

Ответить
Развернуть ветку
Геннадий Иванов

самый распространенный шрифт на предприятии?

Ответить
Развернуть ветку
Клим Григорьевич Чугункин

спасибо, за то, что избежали предиката "читабельность"
ныне тайп-дизайнеры зело страдают оным.. паче клиентов даже..

Ответить
Развернуть ветку
Николай Богданов

Спасибо. Полезный материал. Ума не приложу, почему лет 20 назад, в зрелом возрасте сев за компьютер, выбрал Times New Roman и не могу сменить его на другой. Может быть, из-за сходства со шрифтом пишущей машины, с которой я всю жизнь?

Ответить
Развернуть ветку
Два слова: брендинговое агентство
Автор

У пишущих машинок обычно моноширинные шрифты. Как Courier, например

Ответить
Развернуть ветку
Oleg Makarov

Спасибо. Для тех, кто не дизайнер, но хочет быть в теме — самое то, чтобы разобраться

Ответить
Развернуть ветку
43 комментария
Раскрывать всегда