Как работать со шрифтами, чтобы привлечь внимание

Время прочтения: 20 минут

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

Важно не недооценивать силу шрифта, потому что шрифт — это не просто текст в курсовой работе, написанный Times New Roman 14 размером. Шрифт может выполнять и другие функции (смотрим картинки ниже):

  • используя только шрифт можно создавать божественные целостные композиции (1);
  • шрифт может лечь в основу айдентики и быть его характерной особенностью, по которому бренд будет узнаваемый (2);
  • доносить информацию в больших и малых объемах (3);
  • выполнять функцию идентификации, то есть функцию информирования, в данном случае — названия улиц, домов, достопримечательностей (4).
Шрифт и гарнитура
Прежде чем перейти к классификации, давай разберемся, что к чему в типографике (это искусство оформления текста), чтобы говорить на одном языке. В типографике важно понимать различие между гарнитурой, шрифтом и видами шрифта.

Гарнитура — название шрифтовой семьи, внутри которой есть различные начертания: bold, regular, medium, light, italic и т.д. К примеру, Arial, Times New Roman, Open Sans, которые имеют свои начертания (Arial Regular, Arial Bold, Arial Light и т.д.)

Шрифт — это одно начертание в рамках гарнитуры, как шрифт Arial Regular, шрифт Arial Bold, Open Sans Light. И еще шрифт — это файл со шрифтом, которые мы скачиваем и устанавливаем себе (обычно формат ttf, otf).

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

Текстовые шрифты используем для больших массивов текста (тот же диплом, статья в журнале, в посте и сторис, где больше 2-3 строк). Они должны быть простыми и читабельными.

Акцидентные шрифты — шрифты, которые используются для акцидентной продукции (афиши, постеры, для шрифтовых выделений, то есть для заголовков и т.п.).

Если коротко, то это вычурные шрифты, с нестандартными пропорциями, рукописные, декоративные и другие. Их уместно использовать для заголовков в сторис, постах, или в качестве декора (например, на заднем фоне можно использовать контурные буквы короткого слова). Их нельзя использовать в больших массивах текста, так как они нечитабельны.
Сравни на картинке ниже два примера. Где легче читается текст?
В первом варианте — в заголовке акцидентный шрифт, а в текстовом блоке – текстовый. Во втором варианте — наоборот, и это уже невозможно читать.
Классификация по строению. Идем дальше. Шрифты делятся на три группы: антиква (с зачеками), гротеск (без засечек), брусковый (с большими засечками).

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

Антиква (SERIF) – шрифты с засечками. Обычно ее используют и для набора основных текстов и для заголовков.

Найти шрифты с засечками можно на Google Fonts в категории Serif (это удобный инструмент для поиска бесплатных шрифтов).

Шрифты данной группы — классические, выглядят достаточно утонченно и элегантно. К таким шрифтам относятся Times New Roman, Georgia, Garamond, Baskerville Old Face, Centaur, Vidaloka, Vogue, Playfair Display, Didot и другие.
Гротеск (SANS SERIF) — это шрифты без засечек. Гротески выглядят более современно, новаторски и «стильно-молодежно». К гротескам относятся: Calibri, Helvetica, Arial, Futura, Montserrat, Myriad Pro, Oswald, Avenir, Gill Sans, Bebas Neun и прочие.

Посмотреть какие бывают шрифты с засечками можно на Google Fonts в категории Sans Serif.
Брусковый (SLAB SERIF) — шрифты с мощными засечками, а точнее — засечки равны ширине самого штриха. Оно довольно сильно похожи на антикву, но при этом выглядят современно и уверенно.

Вот несколько примеров данного типа шрифтов: Solway, Roboto Slab, Ultra, Clarendon, Copse, Silverfake, Galeria.
К нашему удивлению, в Instagram практически никто не использует брусковые шрифты. Это можно объяснить тем, что у многих они не ассоциируются с современностью. Возможно, именно брусковый шрифт станет той самой фишкой, которая выделит тебя среди конкурентов ;)

Каждой ситуации — свой шрифт.

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

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

В первую очередь тебе нужно спросить: «Какую функцию он будет выполнять?», «Какое настроение я хочу передать?».

В оформление постов и сторис, каждый стиль текста (заголовок, абзац текста) несет свою функцию, от этого и отталкиваемся:

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

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

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

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

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

Подростки скорее обратят свое внимание на необычный акцидентный шрифт, чем классический Arial. А старичкам — наоборот: такие шрифты ни за что не прочитать.

3. Ищи вдохновение

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

4. Обрати внимание на детали шрифта

Именно они формируют характер бренда. Посмотри какой интересный вариативный шрифт у gBar. Если бы это был условно стандартный Arial, то он бы просто был обычным, ничем не выделяющимся. А вот этот шрифт — другое дело: посмотри, какие характерные у G завитушки, какие миленькие A и S в словах.

Все эти детали добавляют визуального характера бренду и ему легче масштабировать свой визуал. Если gBar не будет писать свой логотип на визуалах, но будет юзать свой вариативный шрифт — он все равно останется узнаваемым. Или skvot: эти пиксельный буквы ты узнаешь везде :)
Ну а теперь чек-лист:

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

1. Сочетай шрифт в рамках одной гарнитуры

Тебе и правда одного шрифта может быть вполне достаточно.

Главное, чтобы там было несколько начертаний. Например, Regular для больших массивов текста, Bold для заголовка. Чтобы выделить информацию и иерархию можно менять кегль шрифта, масштаб, цвет и пропорции композиции в целом. Если будет больше начертаний — тоже хорошо, но двух может быть вполне достаточно.

Например: Kyiv Sans Bold и Kyiv Sans Regular.

2. Сочетай шрифты в рамках шрифтовой семьи

Шрифтовые семьи — это шрифты одной серии, которые хорошо сочетаются между собой и отлично работают в контрастных кеглях и начертаниях.
Например: шрифтовая семья Roboto: Roboto, Roboto Mono, Roboto Slab, Roboto Condensed; шрифтовая семья Kyiv Type: Kyiv Sans, Kyiv Serif, Kyiv Titling.

3. Используй типографические пары

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

Например, @kukuruza_blog используют два шрифта: Ermilov Bold – для заголовков и небольших элементов дизайна, Open Sans и его начертания – для основного текста.
Типографическую пару ты можешь подобрать самостоятельно или же воспользоваться уже готовыми сервисами и подборками: fontpair.co, canva.com/font-combinations, typotheque.com/fonts/combinator/latin.

Также советую обязательно прочитать статью от Readymag про типографические пары.

4. Помни про правила:

Если ты все еще не хочешь останавливаться на одном шрифте, то вот комбинации шрифтов, которые работают:

  • антиква+гротеск;
  • гротеск+гротеск;
  • гротеск+брусковый

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

2. Не используй акцидентные (декоративные, рукописные и т.д.) шрифты разного размера и цветов одновременно.
Будет сложно воспринимать текст и понимать его суть.

3. Не используй акцидентные (декоративные, рукописные и т.д.) шрифты в больших массивах текста
Его будет сложно читать. Человек после двух строчек просто устанет на него смотреть.

4. Не используй больше одного акцидентного (декоративные, рукописные и т.д) шрифта.
Ты также усложнишь восприятие текста, и он будет выглядеть «дешево».

Давай рассмотрим пример ниже из домашки участницы этого потока. Для контекста: это одна страница А4, но мы ее разбили на две части, чтобы было понятнее.

Просмотри и скажи, быстро считывается информация, все понятно и удобно читать до конца?
А вот пример, как выглядела бы эта же домашка, если использовать всего один шрифт и два его начертания (Open Sans Regular, Open Sans Bold):
Получилось просто? Да. Легко ли воспринимается информация и все ли понятно? Тоже да. А в этом и есть главная функция дизайна: донести информацию так, чтобы была понятна суть.

Можно также поиграться: оставить акцидентный заголовок и подзаголовок, а для массива текста использовать Open Sans — читабельность от этого не особо поменяется, но выглядеть будет интереснее.

Помним: иногда не стоит уходить в дизайн там, где он по сути не нужен (в массивах текста, например).

Чек-лист:

  • используй максимум два шрифта одновременно;
  • сочетай шрифты в рамках одной гарнитуры;
  • сочетай шрифты в рамках шрифтовой семьи;
  • используй типографические пары;
  • попробуй использовать комбинации шрифтов, которые работают (из теории);
  • не сочетай очень похожие шрифты;
  • не используй декоративные шрифты разных размеров;
  • не используй больше одного декоративного шрифта;
  • не искажай шрифт;
  • не делай обводку и не добавляй тень.
Характеристики шрифта
Теперь давай немного углубимся в характеристики шрифта, с которыми тебе нужно будет работать (ниже найдешь видео, где искать все это в Figma):
Теперь давай посмотрим как с этим работать в Figma, и в каких случаях нам это пригодится:
Пожалуйста, ни в коем случае не делай это со шрифтом:

  1. Не изменяй шрифт самостоятельно (не растягивай, не стягивай, не искажай);
  2. Не делай обводку тексту: это же не мемчики со шрифтом impact, а качественный дизайн;
  3. Не добавляй тень. Зачем? Это выглядит дешево. Чтобы добиться «заметности», используй другие инструменты: цветовой контраст, шрифтовой контраст, пространство, композиция и т.д.
  4. Не давай жирность шрифту обводкой. Есть же начертание Medium, Bold, Black и т.д.
Как работать с текстом правильно
Лови еще несколько моментов, на которые стоит обращать внимание, когда ты работаешь с оформлением текста.

1. Не делай текст сильно мелким

Иначе его просто не будут читать.

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

Это правило часто нарушается в экспертных блогах. Да, в таких постах информация может быть супер важной, но разве кто-то захочет её читать, если пост выглядит так?
Если у тебя большой массив текста на несколько картинок, сокращай его, структурируй. Если всё не помещается в один пост — сделай 2 части. Не пытайся засунуть в карусель всю информацию. Всё-таки Instagram — это про визуал. Напиши основные тезисы на картинках, добавь примеры, а развернутую информацию можно дать в описании.

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

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

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

3. Следи за интерлиньяжем (межстрочным интервалом)

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

Только в заголовках. Если много строк, то текст может сложно читаться, как бы визуально хорошо он не смотрелся.
5. Не делай строки слишком длинными или слишком короткими

Самый оптимальный вариант — это примерно 60-70 символов, условно 3-4 слова, меньше — уже не очень хорошо.
6. Не оставляй вдовы и висяки в конце строки
Вдовы — это одинокое слово, которое осталось в последней строке. Редактируй текст, меняй размер так, чтобы такого не случалось.

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

Также нельзя переносить знаки пунктуации на следующую строку: тире, двоеточие, точку запятую и т.д. Мы оставляем их в конце строки.

7. Используй правильные кавычки

В кириллице мы используем «кавычки-ёлочки», а в латинице “кавычки-лапки”.

8. Используй длинное тире

Вот этот знак «-» обычно все ставят и как дефис, и как тире. Но это неправильно.

1. Длинное тире —
Используем между словами в предложениях:
Он — Маяковский. Тире — это знак пунктуации.

2. Короткое тире –
Оно используется между цифрами:
5–7 мая. 100–200 пунктов

3. Дефис -
Используется в словах:
что-то, где-то, когда-либо
Где искать шрифты
Лицензия на шрифт. Во-первых, мы не используем пиратские шрифты (то есть платный шрифт, который ты скачал бесплатно). 

Используем либо бесплатные шрифты в открытом доступе, такие как Google Fonts (здесь хорошие качественные шрифты с открытой лицензией), либо покупаем их. 

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

а) не этично;
б) грозит судебным иском.

Где искать шрифты:
https://fonts.google.com/
https://www.awwwards.com/awwwards/collections/free-fonts/
https://www.myfonts.com/hotnewfonts/
https://pangrampangram.com/
https://t.me/shrift_free
https://www.behance.net/ (с запросом Free Font)

Дополнительные медиа о шрифте:
http://rus.paratype.ru/
https://minttype.com/
https://yurigordon.com/en/shop/fonts
https://type.today/ru

Telegram-каналы для насмотренности:
https://t.me/awdee
https://t.me/typeschool
https://t.me/newfonts
https://t.me/paradigm_graphics

Тема шрифтов получилась довольно большая, надеемся, что тебя это не отпугнуло. А теперь попробуй пройти этот тест по типографике :)
Чек-лист:

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