Шрифты в фигме для русского: Красивые шрифты в фигме на русском |

Содержание

Гайд по работе с текстом и шрифтами в Фигме — Дизайн на vc.ru

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

28 048
просмотров

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

Выбор шрифта для контента разного типа

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

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

Связь Figma и Google Fonts

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

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

Variable шрифты

Как известно, 2 шрифта отличаются друг от друга многими параметрами: шириной и высотой символов (кеглем), отступом между буквами и т.д. И когда мы выбираем шрифты для нашего сайта, то должны так подобрать пару, чтобы шрифт с одним набором параметров, гармонично смотрелся с другим. И даже если в теории вы знаете, какое соотношение свойств вы ищете, найти 2 и более шрифта с таким свойствами довольно проблематично. Но здесь есть лазейка.

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

Одним из представителей, такого шрифта является Roboto Flex.

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

В первом случае нам нужно перенести конфигурацию в панель настроек Figma. Для этого выберите нужный шрифт (В нашем случае Roboto Flex), нажмите на “…” (три точки) и в открывшемся меню перейдите на вкладку “Variable”.

Для подключения в css нужно либо скачать шрифт с Google Fonts, либо воспользоваться ссылкой. Оба способа доступны в правом открывшемся sidebar-е.

Как подобрать пару для шрифта

Представим, что у вас есть на примете шрифт, который вам нравится. И вы хотите с одной стороны иметь его в проекте, но с другой найти пару. Которая сочеталась бы с ним. Для этой цели можно использовать генератор шрифтов. В сети их довольно много, но в основном это генераторы, которые сразу предлагают вам готовую пару, но есть и исключение. С помощью Font Joy, можно подобрать пару к уже имеющемуся шрифту.

Для этого выберите нужный вам шрифт в панели слева и зафиксируйте его, нажав на замочек. После чего нажмите на “Generate”. Как пишут сами разработчики, сервис сгенерирует 2 парных шрифта, при помощи ИИ. И да, данный ресурс создает сразу 3 парных шрифта (Для заголовка, подзаголовка и текста). Но если для вас это избыточно, всегда можно отбросить один из них.

Кроме Font Joy также есть Designs AI. По функционалу очень похожи, хотя у второго на мой взгляд более симпатичный интерфейс.

Рукописные, декоративные (и не только) шрифты

Если в вашем проекте планируется использовать, в некоторой степени “необычные” шрифты, то вы опять же можете обратиться к Google Fonts и при помощи фильтров выбрать нужные шрифты, однако даже здесь число этих фильтров довольно скудное (язык, с засечкам/без, рукописные). В общем-то на этом практически все.

Однако, также существует ресурс, с большей вариацией различных типов шрифтов. Это Fonts Online.

Здесь можно выставить фильтр на декоративные, кириллические, английские, курсивные шрифты, шрифты для заголовков и множество других подвидов. К сожалению далеко не каждый шрифт, который вы найдете будет находиться в коллекции Google Fonts, а значит он не будет доступен вам из коробки в Фигме. Поэтому здесь у вас 2 выхода:

Как добавить шрифт, если не хватает стандартных

По большому счету при создании макета в фигме вы можете пользоваться шрифтами только из 2-х источников. Это Google Fonts, как уже было много раз озвучено, и шрифты, которые установлены у вас локально на компьютере. В случае с веб версией, гугловые шрифты доступны сразу, а вот установленные у вас на локальном пк фигма не видит, для этого нужно установить специальное дополнение Font installer.

Устанавливаете его себе на пк и забываете про него. Оно работает в фоновом режиме и будет запускаться при старте системы. Теперь все что вам осталось, скачать нужный шрифт, кликнуть дважды по файлу и нажать кнопку “Install”, чтобы установить шрифт в систему. После этого перезагрузите окно браузера в Фигме и установленный шрифт будет доступен.

Ссылка — на цикл статей по Фигме.

Как добавить шрифт в Figma

by WEB-WriterОпубликовано23.01.2021

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

Как сделать жирный шрифт

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

Добавляем текст в проект.
Выделяем его курсором или двойным кликом по площади текста.
Обратите внимание на блок под названием Text. Здесь будет одно из значений текущего шрифта: Regular, Italic, Bold.
Нажмите на это значение, чтобы появилась возможность выбрать другое пердставление текста.
Чтобы сделать его жирным, выберите Bold, курсив – Italic, обычный – Regular.

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

Читайте также: Как сохранить файл в Фигме.

Можно ли добавить шрифт в Figma через браузер

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

Для выхода из проекта нажмите вверху на кнопку меню и выберите пункт Back to file.
Выберите свой никнейм в системе и нажмите кнопку Settings.
Внизу находим синюю кнопку Download и нажимаем её.
Подтверждаем загрузку и установку утилиты.
Открываем в браузере сайт со шрифтами, скачиваем их на ПК и устанавливаем. Запомните название, чтобы легче было найти его в списке.
Перезагружаем страницу с Фигмой, чтобы найти добавленный шрифт.
Нажимаем на кнопку с выбором шрифта и находим здесь тот, который вы только что установили на ПК. Чтобы быстрее найти его по названию, нажимайте на клавиатуре латинскую букву, с которой начинается название шрифта.

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

Где взять красивые шрифты для Figma

Русские шрифты для онлайн-редактора можно найти на уже известном портале Fonts-online.ru. Множество разновидностей, в том числе русских шрифтов, на сайте https://fonts.google.com. Необходимо выбрать из списка понравившийся и нажать на подвид. На экране справа находится ссылка Download для загрузки шрифта.

Чтобы установить его, выберите скачанный файл в папке компьютера. И подтвердите установку. Он будет отображаться в списке всех установленных на ПК редакторов. В том числе в Figma.

Как установить плагин в Фигма

Плагин – это небольшой скрипт в нашем случае, который добавляется в Figma. Он позволяет открыть новые возможности, которых ранее не было в редакторе. С их помощью Фигму можно превратить в ещё более удобный и полезный инструмент.

Чтобы найти плагины в Figma онлайн, нужно открыть главное меню (не проект).
Затем выбрать слева в меню пункт Community.
В основном окне найдите две едва заметные вкладки и выберите Plugins.
Ниже находится список плагинов для Фигмы. Чтобы установить один из них, нажмите кнопку Install напротив.

Возможно, во всех нет необходимости, но среди них можно найти полезные инструменты. Unsplash – сервис, помогающий быстро найти фотографии в хорошем качестве. Iconify – содержит сотни прикольных иконок, которые можно будет использовать в своём проекте. Плагин Handz предоставляет трёхмерные, разноцветные иконки рук в виде указателей.

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

Как сделать текст по кругу в Фигма

Иногда в проектах может понадобится скруглить текст. Или разместить его так, чтобы он обогнул весь круг какого-либо объекта. Встроенных инструментов в Фигма для этого нет. Но вы можете воспользоваться плагином Circular Text. Вверху по ссылке нажмите на кнопку Install.

Теперь заходим в проект.
Нажимаем вверху слева кнопку меню и выбираем пункт Plugins.
Выбираем плагин с названием Circular Text и вводим в пустую строку слово или фразу, которую нужно изобразить по кругу.
Выбирайте начертание шрифта, название, размер – всё так же, как с обычным текстом. Увеличивайте размер круга при помощи регуляторов по углам.

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

Posted in Интернет

Установить Figma Отсутствующие шрифты и какие шрифты поддерживает Figma

Лаура Анжелика обновлено 2023-03-23 14:48:53

Хотите использовать больше стилей шрифтов, чем Figma? Попробуйте это!

Wondershare Mockitt Prototype Designer предлагает огромную библиотеку стилей шрифтов, значков, виджетов и макетов. Обладайте функцией перетаскивания, чтобы с легкостью проектировать. Попробуйте!

Design Free

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

Часть 1. Какие шрифты поддерживаются в Figma — 5 наиболее часто используемых шрифтов
Часть 2. Как использовать шрифты Figma и исправить отсутствующие шрифты Figma
Часть 3. Лучшая альтернатива Figma — больше стилей шрифтов для использования

Источник: Figma

Какие шрифты поддерживаются в Figma — 5 наиболее часто используемых шрифтов

Давайте посмотрим на основных шрифтов в Figma , которые вы можете использовать. В идеале доступность шрифтов Figma будет зависеть от того, используете ли вы веб-приложение или его настольное приложение.

Шрифты Figma для онлайн-приложения
Шрифты Figma для настольных приложений
Топ-5 наиболее часто используемых шрифтов в Figma

Шрифты Figma для онлайн-приложения

Веб-приложение Figma наследует весь каталог веб-шрифтов Google. Вы можете получить доступ к веб-шрифтам Google во всех поддерживаемых браузерах, таких как Chrome или Firefox.

Каталог веб-шрифтов Google может быть не таким обширным, но в нем есть все основные шрифты. На данный момент шрифты Figma можно перечислить в следующих категориях:

Семейство шрифтов с засечками (например, Georgia, Times New Roman и Palatino)
Семейство шрифтов Sans Serif (например, Helvetica, Arial, Gothic и Futura)
Семейство шрифтов Slab Serif (например, Antique, Clarendon и Italienne)
Семейство моноширинных шрифтов (например, Courier, Courier New и Lucida Console)
Семейство шрифтов Script (например, Tangerine, Pacifico и Lobster)
Семейство рукописных шрифтов (например, Permanent Marker и Gloria Hallelujah)

Шрифты Figma для настольного приложения

Если вы используете настольное приложение Figma, вы также можете получить доступ к большему количеству локальных шрифтов. Помимо набора инструментов Google Web Fonts, вы также можете использовать собственные шрифты, предоставляемые вашим Mac или ПК с Windows соответственно.

Топ-5 наиболее часто используемых шрифтов в Figma

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

1. Пары шрифтов Ubuntu

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

2. Сочетание шрифтов Raleway

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

3. Сочетания шрифтов Nunito

Nunito — один из типичных шрифтов для использования в Figma. Его простой и простой шрифт без засечек широко используется в заголовках и абзацах. Комбинация Nunito, Lora и Roboto — одно из классических применений для большинства пользователей Figma. Если вы сомневаетесь в выборе шрифтов, просто выберите Nunito.

4. Пары моноширинных шрифтов

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

5. Сочетания шрифтов Roboto

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

Советы, которые вы должны знать

Если вы ищете альтернативу Figma или хотите использовать больше стилей шрифтов, попробуйте Wondershare Mockitt Prototype Designer!

Зарегистрируйтесь, чтобы создать сейчас

Как использовать шрифты Figma и исправить отсутствующие шрифты Figma

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

Установите шрифты Figma на свой компьютер

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

Во-первых, просто запустите Figma и нажмите на свой аватар, чтобы перейти к опции Настройки учетных записей .
Когда откроется раздел «Настройки учетной записи», прокрутите вниз и щелкните вкладку « Шрифты ».
Из доступных вариантов просто нажмите кнопку « Загрузить установщик для включения локальных шрифтов ».
Это просто запустит интерфейс набора инструментов Figma Font Helper . Теперь вы можете выполнить простой процесс автоматической установки шрифтов Figma со своего компьютера.

Источник: Vimeo

Примечание: Здесь вы также можете выбрать шрифты Figma Adobe, если на вашем компьютере уже установлен набор инструментов Adobe Fonts.

Исправление отсутствующих шрифтов в Figma

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

1. Любой отсутствующий стиль шрифта в Figma будет заменен на «A?» икона. Чтобы получить доступ к этой функции, вы можете просто перейти в верхний правый угол и щелкнуть значок отсутствующего шрифта .

Источник: Figma

2. Теперь помощник шрифтов Figma запустит специальное окно со всеми отсутствующими шрифтами. Вы можете просто выбрать шрифт и выбрать его ближайшую замену (предложено Figma).

3. После этого нажмите кнопку « Заменить шрифты », чтобы помощник шрифтов Figma автоматически исправил все отсутствующие шрифты в вашем дизайне.

Источник: Figma

Лучшая альтернатива Figma

Поскольку работа со шрифтами Figma может быть немного сложной, вы можете вместо этого использовать Wondershare Mockitt. Это чрезвычайно удобное и профессиональное приложение для дизайна, к которому вы можете бесплатно получить доступ онлайн или на своем рабочем столе с той же учетной записью.

Зарегистрируйтесь для бесплатного использования

Поддерживаемые шрифты:

На Mockitt вы уже можете просматривать широкий спектр доступных шрифтов. Поэтому нет необходимости устанавливать или импортировать набор инструментов для шрифтов. В настоящее время Mockitt поддерживает 22 шрифта и 88 стилей шрифтов.

Вот некоторые шрифты, поддерживаемые Mockitt: Roboto, Open Scans, Lato, Playfair Display, Source Scans Pro, Montserrat, Nunito.

Другие функции:

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

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

Шаг 1: Запустите новый проект

Для начала вы можете просто зайти на панель инструментов Mockitt и нажать « Create > Prototype ». Теперь вы можете просто добавить новый проект, чтобы получить рабочий холст.

Шаг 2: Работа со шрифтами Mockitt

После открытия нового холста вы можете найти все виды виджетов на боковой панели. Из плавающих ярлыков справа выберите встроенные виджеты и перетащите текстовое поле на холст.

Теперь вы можете просто щелкнуть текстовый виджет, чтобы дать ему заголовок. На боковой панели вы можете найти различные параметры форматирования. Например, вы можете перейти на боковую панель > панель «Текст », чтобы изменить ее шрифты и внешний вид.

Таким же образом вы можете использовать любой другой виджет в Mockitt и дополнительно настраивать его по своему усмотрению.

Шаг 3: Поделитесь своим проектом и просмотрите его

Если вы довольны результатами, вы можете поделиться проектом с другими, получив его ссылку или QR-код. Вы также можете предварительно просмотреть свой дизайн или экспортировать его в различные форматы.

Попробуйте бесплатно

Ну вот! Прочитав этот пост, вы сможете работать с различными шрифтами Figma или исправить проблему с отсутствующими шрифтами Figma. Однако, если вы ищете более простую альтернативу, вы можете попробовать Wondershare Mockitt. Находчивый и онлайн-инструмент, он оснащен множеством функций, отвечающих всем вашим потребностям в дизайне в кратчайшие сроки.

Вопросы, связанные с продуктом? Свяжитесь с нашей службой поддержки, чтобы получить быстрое решение >

Laura Angelica

20 лучших шрифтов Figma для современного дизайна пользовательского интерфейса

Дизайн, пользовательский интерфейс, UX, идеи, вдохновение

Комбинации шрифтов Google и пользовательские шрифты для вашего следующего проекта Figma

Если вы ищете лучшие шрифты Figma, чтобы украсить ваш следующий UI/UX дизайн в 2023 году, вы обратились по адресу.

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

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

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

Заголовок: Обзор статьи

Каковы лучшие шрифты Figma?
Как выбрать лучшие шрифты Figma?
Как добавить шрифты в Figma?

Какие шрифты Figma лучше всего подходят для современного дизайна пользовательского интерфейса?

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

Хорошая новость: мы собираемся просмотреть лучшие шрифты Figma, на которые можно сделать ставку для ваших дизайнов. Все шрифты в подборке удобочитаемы, эффективны и удобны для мобильных устройств. И что самое приятное, большинство из них можно использовать бесплатно.

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

Плита Монтегю

Шрифт: Montagu Slab
Тип: Сплошные засечки
Библиотека: Шрифты Google

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

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

Пары Ubuntu

Шрифт: Ubuntu x Lora, Ubuntu x Kreon, Ubuntu x Rokkit, Ubuntu x Cabin, Ubuntu x Source Sans Pro и Ubuntu x Prompt
Тип: Ubuntu без засечек x 3 шрифта с засечками; 3 шрифта без засечек.
Библиотека: Google Fonts Пары шрифтов Ubuntu

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

Семейство шрифтов Ubuntu идеально сочетается с Lora, Kreon, Rokkit, Cabin, Source Sans Pro и Prompt.

Моноширинные пары

Шрифт: IBM Plex Mono x IBM Plex Sans; Робото Моно х Монтсеррат; и Source без Pro x Ubuntu Mono
Тип: Моноширинные шрифты
Библиотека: Google Fonts Пары моноширинных шрифтов

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

Монтсеррат

Шрифт: Монтсеррат
Тип: Без засечек
Библиотека: Шрифты Google

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

Playfair Display

Шрифт: Playfair Display
Тип: С засечками
Библиотека: Шрифты Google

Playfair Display — шрифт Transitional serif с открытым исходным кодом и высококонтрастными штрихами, что делает его более подходящим для категории Modern. Вдохновленный шрифтами 18-го века, такими как Baskerville, Playfair Display — отличный шрифт для заголовков и заголовков.

PT Serif

Шрифт: PT Sans
Тип: С засечками
Библиотека: Шрифты Google

PT SerifTM — второе семейство панкириллиц, созданное для «Государственных шрифтов Российской Федерации». Это переходный шрифт с засечками и гуманистическими окончаниями. Его показатели, пропорции, вес и дизайн гармонируют друг с другом, и он предназначен для использования с PT Sans. Шрифт включает в себя стандартные западные, центральноевропейские и кириллические кодовые страницы, что делает его особым инструментом для современного цифрового дизайна.

Roboto

Шрифт: Roboto Sans Serif
Тип: Геометрический шрифт без засечек
Библиотека: Шрифты Google

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

Теперь давайте оживим ситуацию лучшими пользовательскими шрифтами Figma, которые вы сможете попробовать в 2023 году.

Великий Моряк

Шрифт: Великий Моряк
Тип: Отображаемый шрифт с засечками
Магазин: Креативный рынок

Great Sailor Display — это простой плоский викторианский шрифт с засечками. В нем сочетаются прямые, прямые буквы, производящие сильное впечатление. Он отдает дань уважения изысканному типографскому дизайну 19 века и вдохновлен типом шрифтов, которые часто использовались на этикетках сигарных коробок того времени.

Увеличить

Шрифт: Увеличить
Тип: Без засечек
Магазин: Элементы Envato

Magnify предлагает семейные пакеты и 16 различных стилей. Он простой, аккуратный и современный. Прописные буквы O, G, C и Q, а также строчные буквы O, A, C и E имеют слегка овальную форму. Magnify имеет 8 начертаний: от Matching Oblique до Bold.

Avalon Sans Serif

Шрифт: Avalon
Тип: Без засечек
Магазин: Креативный рынок

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

Лев и Заяц

Шрифт: Лев и Заяц
Тип: Без засечек Сжатый
Магазин: Креативный рынок

Семейство шрифтов Lion & Hare с высокой степенью сжатия источает силу и мощь. Чтобы придать шрифту более последовательный геометрический вид, края символов остаются достаточно прямыми. Семейство шрифтов имеет 6 стилей и поддерживает 27 различных языков. Идеально подходит для заголовков веб-сайтов, макетов журналов, логотипов, брендинга и многого другого.

Ramexon Experimental Display

Шрифт: Ramexon
Тип: Шрифт без засечек
Магазин: Креативный рынок

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

Лучано

Шрифт: Лучано
Тип: Дисплей без засечек
Магазин: Креативный рынок

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

Mellifluous Slab Serif

Шрифт: Mellifluous
Тип: Гладкая засечка
Магазин: Master Bundles

Slab Serif Mellifluous отлично подходит для подписей, заголовков и всего остального.

Heralite Floral Display

Шрифт: Heralite Monogram
Тип: Дисплей с засечками
Магазин: Master Bundles

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

Lunatoire Modern Serif

Шрифт: Lunatoire
Тип:

с засечками

Магазин: Креативный рынок

Lunatoire (история луны) — вариант традиционного шрифта с засечками, созданный для редакционных проектов и фирменного дизайна. В пакете есть прописные и строчные буквы; цифры и знаки препинания; акцентированные символы; и многоязычная поддержка для универсального использования.

Woodman Slab Serif

Шрифт: Woodman
Тип:

с засечками

Магазин: Креативный рынок

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

Proxima Nova

Шрифт: Proxima Sans
Тип: Без засечек
Магазин: Font Spring

Proxima Sans — это редизайн семейства Proxima Nova. Теперь к исходным шести шрифтам добавлено 48 полнофункциональных шрифтов OpenType. Proxima Nova, Proxima Nova Condensed и Proxima Nova Extremely Condensed — это три доступные ширины. Каждая ширина состоит из 16 шрифтов.

Petricor Monospaced Sans Serif

Шрифт: Petricor Monospaced
Тип: Без засечек
Магазин: Master Bundles

Petricor Моноширинный шрифт без засечек — гибкий шрифт, идеально подходящий для заголовков и заголовков. Его профессиональный вид дополнит любой деловой и корпоративный дизайн.

Resist Sams

Шрифт: Resist Sans
Тип: Тип Отдел
Магазин: Master Bundles

Свободолюбивый Resist Sans уравновешивает минималистичные качества неогротесков с интригующим чутьем сопротивления с его глубокими чернильными ловушками.

Как выбрать лучшие шрифты Figma для UI/UX?

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

Цель вашего проекта. В качестве первого шага выберите реакцию аудитории на ваши шрифты. Как бы вы хотели, чтобы ваши шрифты персонализировали ваш бренд?

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

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

Размер действительно важен. Выбор идеального размера шрифта — еще один аспект, который значительно улучшает дизайн и улучшает читаемость текста. Хотя не существует установленного стандарта для мобильной веб-типографики, вы всегда можете обратиться к следующим правилам:

Стандарты основных систем дизайна всегда можно использовать в качестве руководства. Например, в Material Design используются шрифты Roboto размером 14px и 16px соответственно. iOS, с другой стороны, использует SF Pro 15 пикселей для вторичного и 17 пикселей для основного.

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

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

Используйте один или два шрифта одновременно. Слишком большое количество шрифтов может отвлечь ваших пользователей, что поставит под угрозу их взаимодействие с пользователем. Чтобы избежать этого, используйте не более одного-двух шрифтов одновременно. Работать только с одним семейством шрифтов — самый безопасный вариант.

Вот как их найти:

Изучите работы других дизайнеров: Если есть UI/UX-дизайнер, чья работа вам нравится, просто спросите его, какой шрифт он использовал для своего потрясающего дизайна. Многие люди были бы польщены и хотели бы ответить.

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

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

Ищите вдохновение: Когда вы разрабатываете что-то конкретное (например, приложение для еды), перейдите на такие платформы дизайна, как Behance, Dribbble или Awwwards, чтобы увидеть самые популярные и получившие самые высокие оценки дизайны. Найдите те, которые больше всего отражают атмосферу, которую вы хотите достичь в своем проекте, и попытайтесь воспроизвести шрифты или найти еще лучшие.

Ознакомьтесь с самыми популярными шрифтами в Google Web Fonts. Они популярны не просто так.

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

Как добавить шрифты в Figma?

Коллекция шрифтов Google доступна прямо из коробки вместе с Figma. Выбор шрифта отобразит все ваши локальные шрифты, если вы используете Figma Desktop. Установка Figma Font Service позволит вам просматривать локальные шрифты и в браузерной версии.

Добавление шрифтов Google

Нет необходимости устанавливать какие-либо шрифты Google, поскольку все они уже доступны как в Figma Desktop, так и в Figma в вашем браузере. Если вы используете Figma Desktop, вы также можете автоматически получить доступ ко всем вашим локальным шрифтам. Чтобы добавить любой шрифт в Figma, просто установите его и перезапустите инструмент.

Однако, если вы используете браузер Figma, вам понадобится установщик шрифтов Figma для ваших системных шрифтов. Как только это будет запущено, просто перезапустите вкладку браузера, и ваши системные шрифты отобразятся в средстве выбора шрифтов.

Добавление пользовательских шрифтов

Использование пользовательских шрифтов неизбежно в Figma, если вы хотите придать своим проектам более профессиональный вид.

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

Чтобы установить пользовательские шрифты на свой компьютер, выполните следующие действия:

Шаг 1. Зайдите на любой веб-сайт/интернет-магазин, где можно скачать/купить шрифт и найти нужный шрифт.

Шаг 2. Самый простой способ получить шрифт — это использовать настольное приложение. Просто скачайте шрифт и установите его на свой компьютер. Если шрифты находятся в ZIP-файле, извлеките его, чтобы найти файлы шрифтов .ttf или .otf

Шаг 3. Перейдите в Figma и выберите «Шрифты». Теперь вы можете получить доступ к новому шрифту из раскрывающегося меню.

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

Обратите внимание, что локальные шрифты в настоящее время не поддерживаются в Linux или Chrome OS, поэтому вы будете ограничены только шрифтами Google.

Чувствуете мотивацию и вдохновение, чтобы засучить рукава? Потрясающий. Если вам нужен партнер по веб-разработке для ваших текущих и будущих проектов, здесь, в htmlBurger, мы более чем рады обсудить ваши потребности. Хочу поговорить?

Реклама

Подводя итоги

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