{"id":8545,"title":"\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0437\u0430\u043a\u0443\u043f\u0438\u0442\u044c\u0441\u044f \u0431\u0430\u0442\u0430\u0440\u0435\u0439\u043a\u0430\u043c\u0438 \u0438 \u043d\u0435 \u043f\u0440\u043e\u0433\u043e\u0440\u0435\u0442\u044c","url":"\/redirect?component=advertising&id=8545&url=https:\/\/vc.ru\/special\/isource&placeBit=1&hash=2b5b7b247ca83e67628673cba216c312801b86af12a116e7df5c8ab9fae04e8c","isPaidAndBannersEnabled":false}

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

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

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

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

Содержание:

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

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

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

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

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

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

14

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

25

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

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

3

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

44
Социологический бас

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

1

Любым.

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

7

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

–1

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

1

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

1

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

0
Социологический бас

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

6

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

6

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

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

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

))

0

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

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

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

11

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

0

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

3

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

3

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

3
Социологический бас

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

0
Социологический бас

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

5

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

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

1
Социологический бас

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

0

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

1

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

1

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

1

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

1

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

0

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

–4

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

2

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

0

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

1

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

0

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

1

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

0

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

0

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

0

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

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0
Читать все 46 комментариев
"Тестировщик" – это просто
Из науки в IT: как создать свой стартап и стать преподавателем

Как перейти в IT из другой сферы? Как разработать курс, которому нет аналогов? Как студенту получить максимум пользы от занятий? Рассказывает преподаватель OTUS Сергей Окатов, руководитель курсов «Kotlin Backend Developer» и «Kotlin Developer. Basic».

Как команде расставить приоритеты, когда всё кажется важным

Мы в WEEEK часто ошибались с приоритетами — брались не за те задачи, постоянно всё пересматривали, путались и т. д. Отчасти из-за этого хаоса мы работали в реактивном режиме — действовали «по обстановке», а не «по плану». Это довольно обычное дело для стартапа, но наша-то цель — помогать людям и командам приводить свои дела в порядок. Поэтому мы…

@АнтиспамБот — когда ты реальная заноза в з@днице, или как давали отпор «П0шлым_Дев4енкам»

Прошло меньше двух недель с того дня, как в статье на vc.ru я рассказал про @antispamname_bot, предназначенный для борьбы со спамом в никнейме юзеров телеграмма вида «PEАЛЬНЫЕ_ZНAКОМСТVА» и «ПОИСК_PAPTHЕRОV».

Документы сгорели, а главный свидетель выпал из вертолёта: история золотого месторождения, стоившего акционерам $3 млрд Статьи редакции

Проект разработки «крупнейшего золотого месторождения» компанией Bre-X на острове Борнео оказался мошенничеством на миллиарды долларов, за которое так и не смогли никого наказать.

Команда Bre-X на Борнео, около 1997 года, слева направо: менеджер участка Джером Альто, старший вице-президент Джон Фельдерхоф, менеджер по разведке Майкл де Гузман и геолог Сезар Пуспос Сalgary Herald
Завод по производству идей. Как работают акселераторы, зачем они нужны стартапам и куда идти с идеей прямо сейчас

По данным Startup Genome, 9 из 10 стартапов терпят неудачу. Возможных причин «смерти» много: недостаточно протестированная гипотеза, неподтвержденная юнит-экономика, неверная стратегия или просто неудача в подходе к продажам.

Теория тупости: как немецкий пастор нашёл объяснение мирового порядка

И вскоре отправился в концлагерь.

Хочу кухню как у подруги: зачем в Циан сделали поиск квартир по фото

Рассказывает Юлия Зыкова, руководитель команды «Аудитория» в Циан.

Авито возглавила три рейтинга App Annie
Что Tele2 предлагает клиентам в «черную пятницу»

На главной распродаже года клиентов компании ждут сразу несколько интересных предложений: скидки на смартфоны, пакеты SMS и безлимитный трафик на YouTube, Яндекс.Карты, Яндекс.Навигатор.

Истории поиска product/market fit от основателей Netflix, Uber, Airbnb и других успешных компаний Статьи редакции
null