Чёткие гротески для интерфейсов приложений
Гротески с открытой лицензией, которые остаются чёткими в кнопках, меню, таблицах и настройках и предлагают нужные интерфейсу насыщенности.
Save changes
От шрифта в интерфейсе требуется больше, чем от шрифта в заголовке. Почти весь текст там короткий и мелкий: подписи в 12–13 пикселей, ячейки таблиц, подсказки под полем. На таких размерах важны раскрытия в буквах вроде a, e и s, достаточная высота строчных и цифры, которые легко отличить друг от друга. В поле пароля заглавная I, строчная l и цифра 1 не должны выглядеть одинаково.
Диапазон насыщенностей важен почти так же. Продукту обычно нужны Regular для основного текста, Medium или SemiBold для кнопок и Bold для выделения, причём разница между ними должна быть заметна с первого взгляда. В семействах с вариативной осью насыщенности можно выбрать точное значение, а не довольствоваться ближайшим именованным начертанием. Курсив в интерфейсах нужен реже, чем в статьях, поэтому здесь есть несколько семейств только с прямыми начертаниями, и это отмечено. Если продукт выходит на нескольких языках, перед выбором посмотрите, какие письменности поддерживает семейство, — это указано рядом с каждым.
-
Inter
Создан для экранов: девять насыщенностей, курсив и ось оптического размера, которая подстраивает буквы под мелкий и крупный кегль.
-
Roboto
Девять насыщенностей с курсивом и ось ширины: одно семейство подходит и для плотных таблиц, и для основного текста, и для крупных заголовков.
-
Figtree
Сделан для веба и мобильных приложений: семь насыщенностей от Light до Black с курсивом на одной вариативной оси.
-
DM Sans
Геометричные буквы с небольшим контрастом и осью оптического размера от 9 до 40, для подписей и заголовков.
-
Plus Jakarta Sans
Открытые внутрибуквенные просветы и чуть увеличенные строчные сохраняют читаемость мелких подписей; семь насыщенностей от ExtraLight до ExtraBold с курсивом.
-
Manrope
Вариативная ось насыщенности от ExtraLight до ExtraBold, кириллица и греческий для многоязычных продуктов; только прямые начертания.
-
IBM Plex Sans
Семь насыщенностей с курсивом и ось ширины, которая сужает буквы для компактных панелей.
-
Source Sans 3
Задуман как интерфейсный гротеск: восемь насыщенностей от ExtraLight до Black с курсивом, кириллица и греческий.
-
Work Sans
Подстроен под экранный текст от 14 до 48 пикселей, девять вариативных насыщенностей с курсивом.
-
Ubuntu
Сделан для интерфейса рабочего стола и вручную оптимизирован для экранов (хинтинг); четыре насыщенности с курсивом.
-
Nunito Sans
Четыре вариативные оси, среди них оптический размер и высота строчных, позволяют менять плотность текста, не меняя семейство.
-
Geist
Высокие строчные и открытые внутрибуквенные просветы даже в Black, поэтому насыщенные подписи остаются чёткими; девять насыщенностей с курсивом и кириллица.
-
Public Sans
Нейтральный гротеск, созданный для государственной дизайн-системы, в девяти вариативных насыщенностях с курсивом.
-
Onest
Занимает место между геометрическим и гуманистическим гротеском; буквы остаются различимыми в мелком навигационном тексте; от Thin до Black с кириллицей, только прямые начертания.
-
Albert Sans
Почти круглые чаши и штрихи почти одинаковой толщины в девяти насыщенностях с курсивом; только латиница, с полным набором турецких и польских букв.
-
Be Vietnam Pro
Рассчитан на технологические продукты, вьетнамские диакритические знаки нарисованы в первую очередь; девять насыщенностей с курсивом в статических файлах.
-
Hanken Grotesk
Девять вариативных насыщенностей с курсивом, настроенных для вывесок, книг и интерфейсов.
В образцах загружается только базовая латиница каждого семейства. Все семейства здесь — с открытой лицензией; на странице каждого указаны условия и есть исходные файлы.
Вопросы и ответы: Чёткие гротески для интерфейсов приложений
Можно ли встраивать эти шрифты в коммерческое приложение?
У каждого семейства здесь открытая лицензия, чаще всего SIL Open Font License, которая разрешает использование в коммерческих продуктах и встраивание в приложения. Текст лицензии входит в каждый архив; точные условия смотрите на странице выбранного семейства.
Что взять для интерфейса: вариативный шрифт или статические файлы?
Вариативный файл содержит все насыщенности в одной загрузке и позволяет задавать промежуточные значения — это удобно, когда дизайн-системе нужны 450 или 550. Статические файлы остаются разумным выбором, если вы используете всего две-три насыщенности.
Нужен ли курсив для текста в интерфейсе?
Редко. В интерфейсах выделяют насыщенностью и цветом. Курсив пригодится, если продукт показывает длинные тексты, например статьи или документацию, в том же семействе.
Как сочетать интерфейсный гротеск с шрифтом для кода?
У нескольких семейств отсюда есть моноширинный собрат с теми же пропорциями. Если взять его, высота знаков и толщина штриха в тексте и в коде останутся согласованными.