Все 87 шрифтов с кириллицей по группам
Шрифт выбирают в разделе «Текст» вкладки «Дизайн»: поле «Шрифт» открывает список с поиском. Сверху — «Недавние», до шести последних шрифтов, ниже — группы каталога. Каждая строка набрана своим шрифтом, поэтому сравнивать их можно прямо в списке.
| Группа | Семейств | Шрифты |
|---|---|---|
| Гротески | 29 | Manrope, Golos Text, Onest, IBM Plex Sans, Nunito Sans, Inter, Inter Tight, Jost, Rubik, Nunito, Commissioner, Geologica, Roboto, Open Sans, Montserrat, Raleway, Mulish, PT Sans, Fira Sans, Ubuntu, Source Sans 3, Noto Sans, Geist, Wix Madefor Display, Wix Madefor Text, Sofia Sans, Ysabeau, Alegreya Sans, Roboto Condensed |
| Антиквы | 22 | Cormorant Garamond, Prata, IBM Plex Serif, Playfair Display, PT Serif, Nyght Serif, Yeseva One, Roboto Serif, Literata, Lora, Merriweather, EB Garamond, Noto Serif, Source Serif 4, Spectral, Alegreya, Roboto Slab, Vollkorn, Old Standard TT, Alice, Forum, Oranienbaum |
| Акцидентные | 22 | Unbounded, Oswald, Grunt Grotesk, Ekran, LUNNA, Oi, Dela Gothic One, Roboto Flex, Days One, Sofia Sans Extra Condensed, Alumni Sans, Exo 2, Comfortaa, Montserrat Alternates, Tenor Sans, Jura, Russo One, Tektur, Poiret One, Philosopher, Press Start 2P, Pixelify Sans |
| Рукописные | 8 | Caveat, Pacifico, Lobster, Marck Script, Bad Script, Great Vibes, Amatic SC, Neucha |
| Моноширинные | 6 | JetBrains Mono, Roboto Mono, IBM Plex Mono, Fira Code, Source Code Pro, Geist Mono |
Толщину выбирают в списке «Начертание» рядом с полем шрифта: от Thin до Black, если у семейства есть такие начертания. Поиск по каталогу понимает часть названия: «plex» найдёт все три IBM Plex.
Кириллические шрифты для интерфейса: что выбрать
Для текста в интерфейсе обычно берут гротеск: без засечек он ровно читается на экране и в мелких размерах. Хорошо, когда у семейства много начертаний — Regular для текста, Medium и Semi Bold для кнопок, Bold для заголовков.
| Задача | Группа | Шрифты из каталога |
|---|---|---|
| Текст интерфейса и приложений | Гротески | Inter, Golos Text, Onest, Manrope, IBM Plex Sans, PT Sans, Roboto |
| Заголовки, промо, обложки | Акцидентные | Unbounded, Oswald, Dela Gothic One, Russo One, Days One |
| Статьи и длинные тексты | Антиквы | PT Serif, Lora, Merriweather, Source Serif 4, Noto Serif |
| Код и технические подписи | Моноширинные | JetBrains Mono, Fira Code, IBM Plex Mono, Roboto Mono |
| Открытки и акценты | Рукописные | Caveat, Marck Script, Bad Script, Lobster |
Готовые примеры — шаблоны редактора: «Мобильное приложение» и «UI-кит» набраны Inter, «Сайт» — Manrope, «Презентация» — Inter Tight и Inter, «Соцсети» — Playfair Display и Manrope. Открыть их можно из галереи шаблонов и посмотреть, как шрифт ведёт себя в кнопках, полях и списках.
Шрифты для дизайна сайта: пары для заголовков и текста
Сайту обычно хватает двух шрифтов: один для заголовков, второй для текста. Проще всего взять пару из одной суперсемьи — у таких шрифтов общие пропорции, и они не спорят друг с другом.
| Заголовки | Текст | Почему пара работает |
|---|---|---|
| PT Serif | PT Sans | Одна суперсемья с общими пропорциями |
| IBM Plex Serif | IBM Plex Sans | Одна суперсемья, для кода есть IBM Plex Mono |
| Roboto Slab | Roboto | Брусковая антиква и гротеск одной семьи |
| Playfair Display | Manrope | Контрастная антиква и спокойный гротеск, как в шаблоне «Соцсети» |
| Unbounded | Inter | Широкий акцидентный заголовок и нейтральный текст |
Шрифты удобно сразу закрепить в стилях текста: тогда смена пары займёт одну правку стиля, а не каждого слоя. Как собрать страницу целиком — сетку, секции, адаптивные версии, — описано в гиде макет сайта.
Свои шрифты: как добавить шрифты компьютера
Шрифт не из каталога — фирменный, купленный или системный — можно выбрать, если он установлен на вашем компьютере. Файл шрифта в редактор не загружается: браузер сам показывает установленные шрифты.
Откройте список шрифтов
Выделите текстовый слой и нажмите на поле «Шрифт» в разделе «Текст» вкладки «Дизайн».
Нажмите «Показать шрифты компьютера»
Кнопка стоит в конце списка, в разделе «Локальные шрифты». Браузер спросит разрешение на доступ к шрифтам — разрешите.
Выберите шрифт
Шрифты компьютера встанут в тот же раздел со значком монитора. Их можно искать по названию, как шрифты каталога.
В приложении для компьютера, которое готовится к выпуску, системные шрифты будут в списке сразу, без кнопки и разрешений. Подробнее — на странице приложение для компьютера.
Если в файле нет нужного шрифта
Шрифт компьютера есть только у вас. Если коллега откроет файл там, где этого шрифта нет, текст нарисуется похожим шрифтом, а в разделе «Текст» появится предупреждение «Нет шрифта …» с кнопкой «Заменить шрифт». Замена применяется к выделенным текстовым слоям.
Поэтому для командных файлов надёжнее шрифты каталога: они хранятся на серверах Morfa и выглядят одинаково у всех.
При переносе из Figma шрифт не из каталога заменяется похожим, и каждая замена указана в отчёте: SF Pro и Helvetica становятся Inter, Gilroy и Poppins — Montserrat. Особые настройки OpenType при импорте не переносятся.
Шрифты в векторном PDF
В векторном PDF текст остаётся настоящим: его можно выделить и найти, шрифты каталога встраиваются в файл, кириллица работает.
Шрифт компьютера в PDF не встраивается: сервер подставит свой шрифт, и редактор об этом предупредит. Если PDF уходит в печать или заказчику, выбирайте шрифт из каталога. Остальные форматы описаны на странице экспорт.
Чего со шрифтами пока нет
Эти ограничения стоит учесть до того, как выбирать фирменный шрифт для проекта.
- Загрузки своих файлов шрифтов (TTF, OTF, WOFF): работают только каталог и шрифты, установленные на компьютере.
- Шрифтов компьютера в браузерах, кроме Chrome и Edge.
- Встраивания шрифтов компьютера в векторный PDF.
- Перевода текста в кривые — ни командой, ни при экспорте в SVG.