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

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

Влияние типографики на удобство интерфейса

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

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

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

Есть даже отдельная профессия шрифтовой дизайнер. Таких специалистов мало, но спрос на их услуги есть. Гарнитуры заказывают преимущественно крупные компании, которые хотят выделиться среди конкурентов.

У дизайнеров, которые работают в рунете есть серьёзная проблема — маленький выбор кириллических шрифтов. Большинство вариантов адаптированы под латиницу. Даже если у шрифта заявлена поддержка кириллицы, нет гарантий, что она будет отображаться идеально. Дизайнер должен досконально проверить формат вывода и только потом создавать целостный образ. Лучше показать наброски клиенту, чтобы потом не пришлось переделывать финальный проект.

Выбрать хороший шрифт под конкретный проект легко. Надо лишь выполнить несколько шагов:

  1. Определить цель проекта. Для landing page с изображениями в высоком качестве подойдут гарнитуры, которые не будут отвлекать от основного контента. Текст должен гармонично сочетаться с картинками.
  2. Найти целевую аудиторию. Если макет создаётся для детского компьютерного лагеря — выберите варианты с крупными буквами. Детям будет проще понять текст, и они смогут донести мысль до родителей. Поставьте себя на место конечных потребителей и легко ответите на все вопросы.
  3. Анализируйте другие работы. Используйте для вдохновения портфолио на тематических проектах, вроде Dribbble, Behance, Awwards. Обычно там выкладывают идеальные примеры.
  4. Выберите размеры шрифтов. Для создания качественной типографики надо учитывать не только начертание, но и размеры. Можно использовать золотое сечение или другие подходы.
  5. Покажите наброски клиенту. Создайте стайлгайд для стандартизации типографики и отправьте его клиенту. Для этого можно использовать Sketch или Figma.
  6. Проверьте лицензию. Некоторые шрифты распространяются на бесплатной основе только для некоммерческих продуктов.

Уделите последнему пункту максимум внимания. Новички в веб-дизайне считают шрифты незначительным компонентом и стараются загрузить их бесплатно с пиратских сайтов. В итоге клиент получает вместе с дизайном интерфейса «головную» боль. Если правообладатель определит, что продукт использован неправомерно — он подаст в суд и может потребовать до 5 млн рублей компенсации.

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

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

Montserrat

Шрифт без засечек, получил название от района в Буэнос-Айресе, в котором живёт его создатель. В 2017 году разработчики добавили поддержку кириллицы. Адаптацией гарнитуры занималась целая команды дизайнеров. Они улучшили все начертания и сделали отображение более гармоничным.

Успех Monteserrat обеспечивают две ключевые характеристики: универсальность и узнаваемый дизайн. Гладкую гарнитуру можно адаптировать под любой контент.

Стоимость: бесплатно

Futura

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

Сейчас Futura состоит из 8 кириллических вариантов с разными характеристиками: от классического светлого до italic и полужирного. В каждом решении чувствуется элегантность, внутренняя сила и концептуальная лаконичность.

Стоимость: от 39 €

Roboto

Шрифт стабильно занимает высокие позиции в тематических рейтингах. Разработан корпорацией Google в качестве стандартного решения для мобильной операционной системы Android. Доступен в 12 разных стилях: от классического до italic и bold. Есть вариации с разной интенсивностью жирного.

Стоимость: бесплатно

Proxima Nova

Дружелюбный современный шрифт, который пользуется спросом во всем мире. В нём гармонично сочетается идеальное начертание и эстетика геометрии. Поставляется в 3 вариантах разной ширины. Condensed элегантный, а Extra Condensed строгий. Proxima Nova называют гибридом с выверенными пропорциями и мощной эстетикой.

Стоимость: от 5,10 $

Arial

Шрифт знают даже те, кто далёк от веб-дизайна. Он повсеместно используется в проектах под русскоязычную аудиторию. Arial часто сравнивают с Helvetica. У них совпадают размеры букв, пропорции и плотность. По стилистике шрифты действительно похожи, но назвать их братьями-близнецами нельзя.

Стоимость: от 39 €

Open Sans

Традиционно входит в число самых популярных решений. В библиотеке доступно 13 вариантов с разными характеристиками. Дизайнеры выбирают Open Sans из-за отличной читабельности текста и узнаваемости. Крупные корпорации, вроде Google, часто используют шрифт для оформления сайтов и рекламных носителей.

Стоимость: бесплатно

Helvetica

Мало кто знает, но название шрифта — обозначение Швейцарии на латыни. Гарнитура отличается большой высотой строчных букв и горизонтальными срезами. До 2014 года семейство использовалось в качестве основы для оформления различных носителей корпорации Apple.

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

Стоимость: от 39 €

Georgia

Джорджия была разработана почти 30 лет назад для Microsoft. Гарнитура создавалась специально под web. Перед дизайнерами поставили задачу сделать типографику для идеальной читабельности с монитора. Решение удалось найти с помощью большой высоты строчных букв. Семейство шрифтов похоже на Times, но отличается интенсивностью начертания и размерами.

В 2011 году появились дополнительные версии, включая Georgia Pro с поддержкой дополнительных символов и новыми уровнями насыщенности.

Стоимость: от 49 €

Uni Sans

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

Стоимость: от 29 $

Gotham

Необычный шрифт, транслирует напористость и силу. Некоторые дизайнеры сравнивают его с геометрической гарнитурой Proxima Nova. Создатели вдохновлялись вывесками Нью-Йорка середины XX века. Изначально концепт разрабатывался для журнала GQ. Редакторы медиа хотели создать узнаваемый стиль с нотками мужественности и брутальности.

Gotham часто используется в титрах фильмов, социальных сетях и коммерческих проектах. У него есть что-то общее с Готэмом, в котором обитает известный супергерой Бэтмен.

Стоимость: от 100 $

Muller

Современная гротескная гарнитура с поддержкой кириллицы. В платной библиотеке 20 стилей, которые подойдут для реализации разных проектов. Первые наброски появились в 2011 году. В процессе переосмысления изначальные концепты сильно изменились и от начального подхода почти ничего не осталось. Для персонального использования бесплатно доступны 6 вариантов: от жирного до тонкого и красивого Narrow.

Стоимость: от 23,5 $ за стиль

Circe

На русском языке название звучит как Цирцея. В греческой мифологии — это дочь Гелиоса. В витиеватых формах Circe прослеживаются отсылки к древним рукописям. Создатели гарнитуры называют её «геометрическим гротеском с человеческим лицом». За шрифтом кроется история с мощным посылом, и она отлично передаётся в каждый текстовый фрагмент.

Дизайнеры посредством Circe могут наслаждаться созданием вдохновляющих форм. Шрифт идеально подходит для набора мелких абзацев и заголовков крупным кеглем. Остаётся только найти подходящий проект и уговорить заказчика на покупку лицензии.

Стоимость: от 2000 рублей за стиль 

Fira Sans

Любимый шрифт правительства Новой Зеландии. Рубленая гарнитура без засечек тесно связана со шрифтом Meta, который используется в качестве стандартного решения корпорации Mozilla Foundation. Гарнитура создавалась с прицелом на максимальную читабельность. Текст должен был оставаться удобным для восприятия на всех устройствах и в разном контексте.

Стоимость: бесплатно

Calibri

Если спросить людей, далёких от веб-дизайна, о популярных шрифтах, в списке обязательно будет Calibri. Он повсеместно используется в информационных и коммерческих проектах. Гарнитура создавалась для программного обеспечения Microsoft.

Calibri отличается углами и скруглёнными штрихами, которые особенно заметны на больших кеглях. Реализована поддержка дополнительных символов и нескольких языков. Одним из вариантов начертания является уникальный курсив.

Стоимость: от 46 €

Mont

Геометрический шрифт без засечек поддерживает алфавит 130 языков. Для бесплатного использования доступны 2 варианта, остальные поставляются на платной основе. Mont отличается заострённой буквой «t» и большой шириной букв. Кириллический текст выглядит читабельно и лаконично. Bold версия отлично подходит для заголовков медиа и других информационных проектов.

Стоимость: от 35 $

PT Root UI

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

PR Root UI сочетает изящность и строгость. Шрифт можно использовать для проектов любого типа: от информационных до презентации коммерческих продуктов.

Стоимость: бесплатно

Squad

Создатели шрифта называют его «гуманистическим гротеском». Авторы черпали вдохновение в работах известного дизайнера Адриана Фрутигера. Доступно 18 начертаний, гарнитура поддерживает 130 языков. Кириллические тексты, написанные Squad, выглядят просто и доступно. Оформление чем-то напоминает стандартные Calibri и Arial.

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

Стоимость: от 27 $

Peace Sans

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

Peace Sans отлично подходит для крупных заголовков и акцентных абзацев. Некоторые проекты используют его для оформления логотипов и других элементов фирменного стиля.

Стоимость: бесплатно

Gilroy

Ещё один геометрический шрифт с поддержкой OpenType. Каждое начертание поддерживает несколько языков, включая кириллицу, символы и знаки. С помощью гарнитуры дизайнеры могут освежить любой макет. Разработчик предоставил возможность загрузить 2 варианта: тонкий и жирный.

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

Стоимость: от 25 $

Intro

Большое семейство шрифтов, в библиотеке около 50 стилей. Автор даёт возможность использовать 2 варианта бесплатно. Они подходят для оформления заголовков и логотипов. Текстовые фрагменты, написанные Intro, выглядят разборчиво и красиво. Идеально сбалансированный кёрнинг и дизайн с упором на геометричность помогают шрифту выделяться на фоне конкурентов.

Стоимость: от 23,5 $

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

Многие веб-студии используют преимущественно платные решения. Студия Артемия Лебедева в большинстве случаев стараются работать с авторскими продуктами.

На российском рынке есть два основных поставщика: студия Лебедева и магазин Paratype. В последнем источнике можно купить за рубли большинство гарнитур, которые мы упомянули в статье. Малому бизнесу, студентам и тем, кто любит экономить, будет полезен проект Font Escort, где можно загрузить шрифты с поддержкой кириллицы за 299 рублей.

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