Хочу поделиться с вами своей коллекцией лучших и самых интересных, на мой взгляд, кириллических шрифтов для использования в интерфейсе, веб-сайтах и мобильных приложениях. Эту коллекцию я собирал долгие годы и отобрал для вас десятку лучших.
Многие просили меня поделиться своей подборкой шрифтов, я постарался учесть все пожелания и создал этот контент.
Я понимаю, многим эти шрифты покажутся одинаковыми, но тот, кто давно работает с интерфейсами, внимателен к деталям и в целом изучал хоть немного шрифты, быстро увидит, что все они имеют разных характер.
Для того, чтобы было наглядно, как шрифт выглядит в использовании, я создал прототипы макетов, где шрифт используется в различных сценариях. Так легче понять, сильные и слабые стороны шрифта.
Как я выбирал шрифты?
Сложно объяснить, почему тебе нравится тот или иной шрифт, когда ты каждый день проводишь время в графическом редакторе, работаешь с дизайном и анализируешь тысячи визуальных решений. Большинство шрифтов было найдено случайно, когда я собирал мудборды, делал ресерч или просто находил интересные проекты.
Хороший шрифт заставляет мгновенно на себя обратить внимание. Ты контактируешь с ним и сразу думаешь: "Вау, а что это за шрифт тут использовался, выглядит круто". Начинаешь изучать исходники и пополняешь свою коллекцию новыми находками.
В каждом представленном шрифте есть что-то особенное. У одного шрифта очень красивый крупный заголовок, у другого цифры, третий отлично подойдет для основного текста. Где-то шрифты более сбалансированные и их отлично использовать и в заголовке и в основном тексте. А где-то лучше комбинировать с другим шрифтом.
Я надеюсь, вы найдете свой любимый шрифт из этой коллекции, а если нет, то поделитесь в комментариях своим самым любимым шрифтом.
1. Gotham Pro
Один из самых красивых шрифтов, которых я встречал. Шрифту 20 лет, а буквы выглядят по сей день невероятно красиво. Он довольно популярный, как и прекрасный Gilroy, и многим может показаться надоевшим, но это не отменяет его красоту.
Gotham - семейство геометрических шрифтов без засечек, разработанное американским шрифтовым дизайнером Тобиасом Фрер-Джонсом и Джесси Раганом и выпущенное в 2000 году. Формы букв Gotham были вдохновлены образцами архитектурных знаков середины двадцатого века.
Стоимость Gotham Bundle $299.00
Скачать шрифт: Gotham Pro
Кроме этого, шрифт можно скачать бесплатно на GitHub https://github.com/Seafnox/Gothampro
2. Visuelt Pro
Visuelt - это кириллический шрифт без засечек. Этот шрифт разработали Энтони Шерет и Эдд Харрингтон. Visuelt издан на Colophon Foundry в 2014 году. Это очень уникальный и удивительный шрифт. У этого шрифта 7 начертаний, и у каждого начертания 2 стиля, что означает, что у Visuelt всего 14 стилей. Этот шрифт был разработан как индивидуальный шрифт для конференции по идентичности дизайна 2013 и 2014 годов, которая также известна как Национальная норвежская награда за дизайн.
Стоимость Visuelt Pro Complete Family $718
Скачать шрифт: Visuelt Pro
3. TT Norms Pro
Один из моих любимых шрифтов. Norms Pro включает 26 шрифтов, 1581 символ в каждом шрифте, 24 функции OpenType, поддержку более 260 языков (расширенная латынь, расширенная кириллица, греческий и т. Д.) И многое другое.
Стоимость TT Norms Pro Complete Family $249.00
Скачать шрифт: TT Norms Pro
4. Eastman
В этом шрифте мне очень нравится как выглядят крупные заголовки. Кстати, к созданию этого шрифта я даже немного причастен. Мне очень понравился этот шрифт, но после покупки, оказалось, что там есть проблемы с некоторыми кириллическими буквами. Они были сделаны неправильно. Поправили вместе с издателями кириллицу и теперь он полностью готов к использованию. Мой фаворит 2020 года.
Кириллический шрифт Eastman был разработан в 2020 году для Zetafonts Франческо Кановаро и Андреа Тартарелли с помощью Соленн Бордо. Это семейство рабочих лошадок с геометрическим рисунком, разработанное для максимальной универсальности как при отображении, так и при использовании текста, с широким диапазоном веса и прочной монолинейной конструкцией с высокой высотой x, что делает Eastman чрезвычайно удобочитаемым на бумаге и на экране.
Стоимость Eastman Full Family 297$
Скачать шрифт: Eastman
Есть бесплатный аналог этого шрифта: Montserrat, шрифты очень похожи, но в деталях отличаются.
5. RF Tone
Очень чистый и приятный шрифт. Тон был вдохновлен классическими геометрическими шрифтами без засечек, но имеет отчетливый современный дух. Содержит 16 стилей от сверхлегкого до черного: 8 обычных и 8 курсивных. Имеют многоязычную поддержку и большое количество функций OpenType.
Этот шрифт удобен для чтения при небольшом размере. Отлично подходит для больших фрагментов текста или в качестве основного шрифта в дизайне веб-сайтов. Логотипы и брендинг, упаковка, плакаты, музыкальные обложки, навигационные системы, видео - это лишь некоторые области, в которых Tone может вам помочь.
Стомость RF Tone Full Pack 178$
Cкачать шрифт: RF Tone
6. Value Sans Pro
Немного "острый" шрифт, но выглядит чистым и современным. Value - это современное семейство двух гарнитур. Value Sans и Value Serif были созданы в ответ на разговоры, посвященные понятиям культурного и финансового обмена: Value Sans заимствует стиль и поведение у таких прецедентов, как Elegant Grotesk (Германия) и Granby (Великобритания); Value Serif отдает дань уважения таким предкам, как Plantin Infant (Франция, США) и Italian Old Style (США).
Стоимость Complete Sans Family 437$
Скачать шрифт: Value Sans Pro
7. Gordita
Gordita - максимально приближенный шрифт к стандартному, но со своей особенной красотой. Впервые я его увидел, когда искал приложение для менеджмента и тестировал Asana, мне сразу понравился дизайн и интерфейс приложения. Шрифт Gordita прекрасно подойдет для основного текста. Особенно хорош будет в сложных и больших интерфейсах: таблицы, данные, статистика и прочее.
Стомость Gordita Complete Family 140$
Скачать шрифт: Gordita
8. Mabry
Mabry "игривый" шрифт с оттенком трендовых "ломанных" шрифтов. Обратите внимание на "подрезанные" буквы М или И. Но при этом, он сделан настолько аккуратно, что прекрасно вписывается в UI, не отнимая на себя много внимания. Отлично подойдет для молодых, дерзких и и современных проектов.
Первоначально заказанный шрифт Mabry в 2014 году для лос-анджелесской компании по производству одежды Nasty Gal - названной так в честь альбома 1975 года и одноименной песни влиятельной фанк-певицы Бетти Дэвис (родившаяся Бетти Мабри, 1945) - Mabry является коммерческой версией первого Н.Г. Гротеск.
Стоя одной ногой среди идиосинкразических форм гротесков конца 19 века, а другой - среди рациональной математики геометрических шрифтов без засечек начала 20 века, Мабри позиционирует себя как несколько вещей одновременно: современных и исторических, строгих и жестких, объективный и субъективный, культурный и неточный; одновременно изысканный и грубый.Красивый и удивительный шрифт.
Стоимость Complete Family Mabry: 547$
Скачать шрифт: Mabry
9. Averta
Averta - очень аккуратный и приятный шрифт. Придаст элегантность и легкость любому вашему проекту.
Averta - это семейство геометрических шрифтов без засечек, созданное знаменитым дизайнером Костасом Бартсокасом. Шрифты с засечками простые, но привлекательные с характерной индивидуальностью. Чисто геометрические закругления, открытые апертуры и низкоконтрастные штрихи позволяют передать немодерированный, прямой тон, что приводит к модернистскому, нейтральному и дружелюбному шрифту.
Стоимость Averta Family: 149$
Скачать шрифт: Averta
10. Mont
Изысканный, дружелюбный, немного "острый" шрифт с интересным балансом разных характеров.
Mont - это геометрический шрифт без засечек, состоящий из 10 цветов от линии волос до черного с соответствующим курсивом. Он поддерживает расширенную латиницу, кириллицу и греческий - всего более 130 языков.
Сбалансированная характеристика Mont с уникальными деталями, такими как заостренная буква «t» и выдающаяся высота по оси X, делают его идеальным для ярких заголовков и ярких логотипов, а также для длинного текста.
Стоимость Mont Family 245$
Скачать шрифт: Mont
Топ 10 списком лучших кириллических шрифтов для использования в веб-сайтах и мобильных приложениях:
💫 Бонус
Можете скачать эту презентацию одним красивым PDF и поделиться с коллегами по работе в общих чатах.
⚡ Если тебе понравился этот материал, ты можешь подписаться на мой Instagram / Facebook / Medium / Linkedin. Там ты найдешь больше интересных материалов о дизайне. Источник: www.komarov.design
Шрифты неплохие, но здесь, как правило, шрифты одного типа, геометрические гротески, наследники Proxima Nova (тренду лет 7-8). Делать такую подборку — это все равно что в подборке «лучшие блюда современности» показывать одни борщи с разными вариациями.
я просто мимо крокодил. к дизайну и шрифтам не имею никакого отношения
Большинство тяжелые геометрические гротески или произошли от них. Это может заметить любой по абсолютно круглой «О», что для большинства шрифтов вообще-то (сюрприз) не характерно.
Вам может быть интересна статья об этом тренде. В конце ее вы найдете еще несколько новых шрифтов этого типа себе в коллекцию.
И опять ни слова о Roboto и Segoe - действительно лучшие шрифты для веб-интерфейса, доступные и читабельные в любом размере, а не та дорогая эстетская экзотика, что накидана в статье.
Ещё очень классный шрифт Inter. Помимо наличия огромного количества языков и символов, он полностью бесплатный. А подборка очень крутая, спасибо автору!
Плюсую. Тоже хотел его видеть в этой подборке)
А ещё мне Merriweather нравится - его формы цепляют внимание
Ближайший родственник San Francisco, системного шрифта в iOS и macOS
И всё-таки лучший санс-шрифт как для веба, так и для приложений (и даже мб и печати) - Manrope.
Он бесплатный до уровня OFL (те бесплатно для коммерции, можно делать производные и тд), поддерживает хорошо всё:
Кириллицу, всякие европейские заморочки, немецкие буквы, арабские буквы, иврит и тд, умеет в красивые цифры, умеет в красивые лигатуры, умеет в символы (те -> превращается в стрелку и тд), умеет делать выравнивание символов аля @ в зависимости от регистра.
Короче, как открыл шрифт для себя, так не могу перестать пользоваться
Знаешь, очень неплохой. Мне в нем не нравится, что он довольно узкий, сейчас все таки более широкие шрифты в теме. И в нем еще цифры, словно с другого семейства. Д - очень занижена буква. Да и внутри тоже такое ощущение, что буквы сражаются между собой какой стиль лучше. Ч - тоже странновато выглядит на фоне остальных, и Б.
Вот Д, Ч, Б такое ощущение, что взяли с других шрифтов.
А английский выглядит потрясающе кстати.
Огромное спасибо за подборку!
Мои любимые шрифты:
Proxima Nova
Circe
Gotham Pro
Museo Sans
А вы гурман. Хорошие шрифты, правда я их уже давно затер до дыр. Gilroy ещё прекрасен. Но тоже попсовый очень.
*Включил режим зануды*
…но тот, кто давно работает с интерфейсами, внимателен к деталям и в целом изучал хоть немного шрифты…
У вас в примерах то дефис, то тире, предлоги висят, высота строки странно подобрана, крайне скучная вёрстка. Внимания к деталям не нашёл :–)
*Выключил режим зануды*
Вообще очень удобно критиковать кого-то, при этом иметь пустой профиль, который не дает возможность получить критику в ответ.
Ты написал статью на ресурс, где есть возможность обсуждения. Никто не говорит, что ты дурак или непрофессионал. Здесь идёт обсуждение твоей статьи. Комментатор высказал мнение. Ты в первом абзаце нормально ответил, а потом понеслось.
Если ты дизайнер, то должен нормально работать с критикой и аргументировать свой выбор, а не использовать совсем уж стыдный приём, а-ля «сначала сам сделай, потом критикуй».
Зачем мне иметь полный профиль, чтобы написать аргументированную критику? Вы всегда критикуете в ответ, только потому что получили порцию замечаний?)
Как критика верстки относится к подборке шрифтов? С таким успехом можно еще раскритиковать меня в том, что я макеты в ЧБ сделал.
Я ждал этого комментария. Но решил, не тратить еще пару дней на статью, вылизывая верстку, чтобы собрать на один лайк больше и понравится всем занудам. Мне есть чем заняться, поверьте.
И как я писал стате это скетч, набросок, а не какой то финальный дизайн для продукта. Вам надо верстку идеальную увидеть, или иметь общее представление как выглядят шрифты в интерфейсе? Мы вроде не верстку тут обсуждаем, а шрифты.
Лучшие шрифты это те что есть по умолчанию в вашем браузере.
Один из подрядчиков на одной из моих работ делал сайт в котором он подключал 10мегабайт шрифтов. А потом когда я туда устроился, не было сразу понятно кто и зачем это сделал, и с какой лицензией эти веб шрифты. Позже оказалось что дизайне просто украл эти шрифты и вставил как ttf прямо в сайт, а затем уволился. Хорошо ещё правообладатель не успел подать иск..
Так что мой совет всегда любить web safe шрифты, (это встроенные в операционные системы шрифты), а уж потом смотреть на кастом.
Для проблемы веса кастомных шрифтов существует понятие сабсеттинга. Так, тот же TT Norms Pro в моем продукте весит 50 Кбайт вместо огромного архива в несколько мегабайт. Могло быть значительно меньше, если бы не была нужна поддержка кучи языков. Если какие-то доходяги не умеют сабсеттировать шрифтовые файлы, это не значит, что кастом априори плох.
На второй тысяче лет до Ольки начнет понемногу доходить, что латиница лучше выглядит, и тут явно есть какая-то связь.
mabry и eastman для тебя одинаковые шрифты)))? Возможно ты просто не дизайнер?)
Я бы еще добавил сюда гельветику, хоть и для многих это уже забытая классика. А при грамотном использовании она выглядит невероятно футуристично и современно
Если нужно, то для web, сейчас использую чаще всего связку Montserrat + Roboto + PT Sans.
Бывает использую Rubik + Proxima + Ubuntu. Не знаю почему, но в некоторых местах мне Ubuntu очень заходит.
P.S. 20 лет назад, когда в 99% случаях использовали Times New Roman и Arial, я юзал Tacoma.
Ну да, примерно с 2012 года, когда стал распространен bootstrap. Я просто этим на хлеб не зарабатываю, но иногда нужно сделать. Montserrat, вроде, сначала был без кириллицы, и это было грустно.
Обидно, когда подбирал совершенно разные по настроению, характеру, смыслу шрифты, а тебе говорят , что они все одинаковые 🙈😄.
Я надеюсь, тот, кто видит разницу оценит по достоинству шрифты )))
Если они и одинаковые, то только в том, что все они одинаково прекрасны. 👌🏻
Очередная подборка того, что уже сказано миллион раз. Почти не читаю статьи по дизайну, потому что почти все они — мусор. Иногда натыкаешься на бриллиант, например лонгрид от Дани Ковчего: «Образы и модели». Там очень много и можно было бы сократить, конечно, но это на 5 голов выше 90% статей о дизайне.
Как это относится к шрифтам? Мы тут как бы обсуждаем какой шрифт для интерфейса лучше брать, если не хотим использовать стандартные. Имейте немного уважение к труду людей.
Из 1000 шрифтов, что за многие годы я тестировал в дизайне интерфейсов я поделился лучшими, которые адекватнее всего выглядят в проекте. Потратил все свои выходные, чтобы сделать этот пост.
Потому что таких статей очень много на любом ресурсе. Они как дошик — залил кипятком и готово. Более серьёзное блюдо приготовить сложнее. Ими заполнены хабр, VC, не говоря уже о всяких ux.pub, там вообще треш.
Статей таких ты не читаешь, но зато комментируешь.
Когда же бессмысленные мамкины сынули и дочули поймут, что их комменты больше говорят о них самих, чем о предмете обсуждения?
Я по делу написал и сообщил автору, что нужны статьи более серьёзные и что таких целая куча в интернетах.
Ты же пишешь о каких-то «мамкиных сынулях и дочулях». Знаток психологии и интернет-споров. Думаю, твой коммент больше относится к твоему комменту :)
Какие - серьёзные? Почему автор полюбил именно эти шрифты, историю их создания, соответствие золотому сечению, или что ещё нужно в авторской подборке красивых шрифтов?
Его статья про шрифты не плохая сама по себе. Просто темы:
- лучшие шрифты,
- лучшие градиенты,
- как дизайнеру прокачать себя,
- тренды года и т.д.,
настолько изъездили, что смысла в очередной такой статье нет. Это информационный мусор с уникальностью, стремящейся к нулю.
И читая заголовок "10 лучших шрифтов", должно быть понятно, что это не статья о дизайне, а просто список шрифтов.
что скажите про Commissioner?
Он без характера. Стандартный. У него неплохой основной текст, до 16pt. Но вот если делать большой заголовок - шрифт выглядит грубо. Bold тоже какой-то неопрятный. И еще не нравятся чрезмерные скругления на а и е.
Еще у него точка в i выглядит очень инородно. Слишком массивная и грубая.
а новые использовали в проектах - Gravity, Objectivity (Object Sans)?
Спасибо.
Из бесплатных - самая пиздатая кириллица в Raleway. Вот только с плотностью у него есть проблемы, но они решаемы благодаря достаточному количеству начертаний.
И еще Rubik очень хорош - когда нужно что-то построже Рейлвея, но не такое бездушное, как Робото.
там же фонт-стек, ну. на яблоках рендерится гельви и сан франциско
дёргаются системные шрифты, чтобы нейтрализовать эмоциональную окраску шрифта
Helvetica Neue
Graphik LCG
Unica77, но полная лицензия только стоит охулиард евро
Proto Grotesk
Studio Sans
Basis
TT Norms
PT Root
Druk
Neue Haas Unica
Комментарий удален
Комментарий удален
DIN — классика, Exo2 Королькова приводила как пример плохой кириллизации.
Актуальный блик
Поддержу оратора рядом, в Эксо паршивейшая кириллица, да и шрифт с не самым универсальным характером, почти не встречал его употребление к месту.
Если вы на уровне, что готовы 700 $ за шрифт платить - можно и свой заказать.
если вы уже готовы потратить 700 $ - повод доплатить и заказать свой шрифт.
Смысл в том что во первых кастомный шрифт от 400-500к начинается ценник, то есть доплатить надо будет где то еще 6-7 тысяч долларов — за такие деньги это обычно либо микро команда 2-3 человека, либо вообще один человек. Во вторых это время на разработку концепции и самого шрифта + технический весь процесс по керну, хотя бы два языка, хуева туча символов, знаков итд. Потом еще надо баги все словить и много много раз его проверить в разных контекстах. Я не понимаю как 700 долларов переводят вас из задачи «купить шрифт для проекта» в полностью другой процесс «разработать шрифт с нуля». Это две абсолютно разные задачи и такой бюджет смешной никак не ставит вас даже близко к сумме на разработку своего — это всего лишь 52к рублей.
Автор гурман. Действительно лучшие собрал 👍🏼 благодарю за статью. Сохранил в закладки
Вообще не вижу смысла в этих шрифтах для веба учитывая ограничения лицензии 10 000 просмотров в месяц
Хорошая подборка. Если будет время и желание, запили сочетания шрифтов заголовок-текст.
Спасибо за подборку! Как раз сейчас актуально, буду использовать) За PDF +30 в карму ;)
«Я понимаю, многим эти шрифты покажутся одинаковыми»
включая автора, ведь в 9 и 10 пунктах один и тот же макет...
ох уж эти дизайнеры...
ваши шрифты можно смело смыть в туалет сразу после того как ваш сеошник (или вы) озаботится скоростью загрузки страниц.
моя короткая история: делал я как-то пачку сайтов с разным дизайном (да, сайты генеренные и однотипные - но для этого примера как раз подходят) и перед выпуском их в свет (добавлением в гугл вебмастер) мое внимание привлекли 2 из них - скорость загрузки их страниц была на границе красной и желтой. напомню, все сайты шаблонные - т.е. везде одинаковые скрипты и прочие части. разный - только дизайн и расположение блоков. ковыряя их несколько часов проблема оказалась очень проста - шрифт не из стандартных.
ЕЩЕ РАЗ: выбирая шрифт не из числа стандартных вы сильно тормозите загрузку страниц сайта!
а так да - много красивых разных шрифтов на любой вкус...
Скажем так, проксима сама по себе ужасная. От нее просто тянет блевать уже.
Не про интерфейсы, но раз пошла такая тема...
А что из годного есть для кириллических "типа рукописных" курсивов?
Друг интересуется.
Че тут читать, я картинки с примерами открыл и альт-табался, чтобы сравнивать)
Кстати, высоту строки в некоторых примерах хорошо бы увеличить, смотреть больно :-\
Давай улучшим. Подскажи, пожалуйста где строки слиплись. Я думаю ты понимаешь, когда у тебя такой массив данных, глаза устают ))
У Eastman и Gordita, в блоке "Чем лидер отличается от менеджера".
У RF Tone в том же блоке.
Навскидку я бы чуть сократил расстояние в "гд", "де", "ед", "это", "эта", "уч". В целом выглядит так, что это потребует большого внимания. То есть придётся тщательно причесать кернинг если и не на всех возможных, то хотя бы на большинстве основных пар.
Сложно сказать. Они все очень неплохи. Надо применять на практике. Да и для каждого проекта какой-то конкретный шрифт больше подойдёт по настроению.
Демонстрация шрифтов отличная, все кроме сраного затертого всеми лендос мейкерами готама — достойные шрифты. Спасибо что хоть без мюллера.
а что это за лендос мейкер со шрифтом готама?
я думал Gilroy еще взять, но он мне показался более попсовее чем готам. Готам я редко где встречаю, если честно.
да просто последние лет 5 самая попсовая пара для всех лендосов дешевых это готам + мюллер. Во всяких гавно пабликах постоянно вижу это в подборках типа «топ 5 самых лучших шрифтовых пар» и там он обычно тоже первый или второй недалеко от лобстера. Гилрой, дин и тому подобные думаю смысла нет показывать. Остальные в подборке неплохие варианты когда заебали всякие дины, авениры, монсераты и circe. Сделай в таком стиле чего нибудь с серифами, интересно посмотреть будет.
Уважаемый автор и не менее уважаемые собеседники, я в этом деле дилетант, посему с удовольствием все прочитал. В своей работе я пока пользуюсь вот этим набором https://эл-ипатов.рф/upload/shrifti/_shrifti.htm
Возможно, кому-то это понадобится...
Чой-то? Когда интерфейсы стали отличаться от прочих представлений визуального контента? И главное — чем. Экранные шерифы так же хорошо держат строку, как и на бумаге. Знай лишь толк в подборе гарнитур.
ойой... Речь-то об интерфейсах или о шрифтах только?
Есть же разница в читабельности?
Понравился Mabry из подборки. Спасибо.
А мой любимый шрифт — гугловский Product Sans.