Современные шрифты для сайта: Самые лучшие Гугл шрифты для сайта или ПК – ТОП 15

MegaFont NOW: профессиональные шрифты + веб-шрифты

i

7500 лучших шрифтов для ПК и Mac

Плюс 7500 веб-шрифтов без ограничений

Чтобы просмотреть все шрифты коллекции, нажмите на изображения

Показать все примеры шрифтов

Ключевые характеристики

• 7500 шрифтов TrueType премиум-класса.
• Высочайшее качество печати
• Полные наборы символов, выключая диакритические символы и умлауты.
• Многие шрифты имеют расширенные таблицы макетов OpenType для поддержки высококачественной международной типографии.
• Каждый шрифт включает символ валюты евро с индивидуальным дизайном.
• Все шрифты могут быть встроены в файлы PDF.
• Все шрифты также можно использовать в качестве веб-шрифтов с неограниченным количеством просмотров страниц.
• Входящий в пакет менеджер шрифтов для Windows 11, 10, 8 и 7 упрощает установку и управление шрифтами.
• Шрифты совместимы с Windows, Mac и Linux.

---

Системные требования

• Windows: Windows 11, 10, 8, 7
• Linux: любой дистрибутив Linux с графическим интерфейсом пользователя
• Apple Mac: macOS

---

Лицензия для трех компьютеров

Некоммерческое использование: одна лицензия дает право вам и членам вашей семьи использовать ПО на трех компьютерах одновременно, если эти компьютеры находятся в одном доме.

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

MegaFont NOW: наша лучшая коллекция шрифтов

Коллекция MegaFont NOW впечатляет объемом и разнообразием. Она включает в себя 7500 наиболее красивых шрифтов от SoftMaker, среди которых многие известные классические шрифты разных времен и эпох.

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

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

c’t 26/2019

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

Многие шрифты в пакете MegaFont NOW поддерживают расширенные типографские возможности OpenType для создания эстетической типографики с помощью графического программного обеспечения, такого как Adobe Creative Suite, например посредством использования альтернативных букв, автоматических лигатур и символов старинного стиля.

С MegaFont NOW вы получаете одну из самых полных коллекций первоклассных шрифтов — по цене, которую другие разработчики часто взимают за одно семейство шрифтов.

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

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

Новая покупка

479,99 ₺

Обновления

409,99 ₺

Купить

MegaFont NOW

Прекрасная коллекция шрифтов, которая идеально подходит и бизнес-пользователям, и домашним пользователям: она включает 7500 высококачественных шрифтов TrueType для всех возможных случаев.

Все шрифты пакета также можно использовать в качестве веб-шрифтов с неограниченным количеством просмотров страниц.

Продукт был добавлен в корзину.

Продолжить покупки Перейти к оформлению заказа

Изменить настройки конфиденциальности

• Принять файлы cookie, необходимые для работы веб-сайта.

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

  Информация о необходимых файлах cookie

• Принять статистические файлы cookie

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

  Matomo использует файлы cookie. Эти файлы cookie позволяют нам подсчитывать количество посещений и анализировать использование наших веб-сайтов.

  Если вы согласны на анализ ваших данных, подтвердите использование этих файлов cookie.

  Дополнительная информация об использовании Matomo

Бесплатные шрифты 🖋️ — MyFonts.ru 👍

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

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

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

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

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

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

Интернет-типографика, то есть удобочитаемость текстов на веб-сайтах

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

Шрифты с засечками и без засечек

Прежде всего, шрифты делятся на шрифты с засечками и без засечек. Даже для непрофессионала разницу довольно легко заметить, поскольку шрифты с засечками имеют украшения; прочерки в конце букв. Их использование было связано с развитием полиграфии, благодаря дополнительным строчкам чтение стало проще и приятнее для глаз. Однако в настоящее время шрифт без засечек считается более читаемым. Это связано с тем, что текст на экране выглядит иначе, и большинство людей предпочитают абзацы, состоящие из простых шрифтов. С другой стороны, шрифты без засечек не имеют орнаментов в виде засечек — окончания символов простые. Буквы без засечек, в частности, Arial, Verdana. Иногда шрифты без засечек называют Century Gothic, которые не следует путать с готическим шрифтом. Напротив, шрифты с засечками в основном используются для бумажных публикаций. Это не означает, что вы должны автоматически отказываться от шрифтов с засечками для блогов или презентаций. Иногда достаточно использовать более декоративные шрифты в заголовках и шрифты без засечек в абзацах, чтобы он выглядел хорошо.

Цвета шрифта в проекте

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

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

Выравнивание текста и оформление

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

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

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

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

Лучшие комбинации шрифтов Google для современного веб-сайта

Дизайн

Проблема с выбором шрифтов…

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

Это определенно непростая задача. Даже для тех, кто занимается дизайном.

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

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

Но есть короткий путь. Вы также можете вдохновиться комбинациями других дизайнеров.

Я подготовил для вас 10 надежных комбинаций, которые работают .

Надежные комбинации

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

Все комбинации используют шрифты Google. И они демонстрируют один шрифт для заголовков (отмечен как H) и другой для тела (отмечен как B).

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

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

Эксклюзивный бонус: Загрузите руководство «7 способов сделать ваш веб-сайт профессиональным». И повышайте авторитет вашего сайта!

Как использовать эти комбинации

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

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

→ Если вы не используете одну из наших тем или сами пишете код для веб-сайта, вам необходимо выполнить два шага:

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

Шаг 2 : Объявите шрифты, которые будут использоваться для основного текста и заголовков, в файле styles.css.

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

Еще одна вещь, прежде чем мы начнем

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

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

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

---

---

1. Crimson Text + Work Sans

Если вы ищете высококлассный стиль, который сделает ваш веб-сайт престижным и современным, это сочетание для вас.

Crimson Text — шрифт с засечками, вдохновленный гарнитурами старого стиля — для заголовков, в сочетании с Work Sans — современным, своего рода гротескным шрифтом без засечек — для основного текста, создают надежное сочетание традиции + современности.

* Посмотрите эту комбинацию шрифтов и цветов в действии на этом готовом сайте от Artisan Themes: Blue Agency.

Шрифты

Код для встраивания:

Код CSS:

 тело {
 семейство шрифтов: «Work Sans», без засечек;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: «Малиновый текст», с засечками;
} 

Цвета

Цвет фона: #0057ff
Цвет текста: #ffffff

2.

Oswald + Cardo

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

Это Освальд + Кардо. Сжатый шрифт без засечек заглавными буквами для заголовков и классический шрифт с засечками для основного текста.

Шрифты

Код встраивания:

Код CSS:

 body {
 семейство шрифтов: «Кардо», с засечками;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Oswald', без засечек;
 преобразование текста: верхний регистр;
} 

Цвета

Цвет фона: #484d5c
Цвет заголовка: #ffce00
Основной цвет: #c0ccd4

3. Quicksand (средний + светлый)

Иногда одного шрифта достаточно, чтобы сделать ваш дизайн узнаваемым. Это как-раз тот случай.

Возьмите Quicksand двух разных весов: Medium для заголовков и Light для основного текста, и типографика вашего веб-сайта готова.

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

Используйте его с яркими цветами, и вы получите этот современный резкий вид.

Шрифты

Код для встраивания:

Код CSS:

 body {
 семейство шрифтов: «Quicksand», без засечек;
 вес шрифта: 300;
}

h2, h3, h4, h5, h5, h6 {
 вес шрифта: 500;
} 

Цвета

Цвет фона: #ff0d7b
Цвет текста: #ffffff

4. Archivo Black + Judson

Надежный, смелый, с оттенком элегантности. Знакомьтесь: Архив Блэк + Джадсон.

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

Шрифты

Код для встраивания:

Код CSS:

 тело {
 семейство шрифтов: «Judson», с засечками;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: Archivo Black, без засечек;
} 

Цвета

Цвет фона: #674b7c
Цвет текста: #f47362

5.

Abril Fatface + Roboto

Abril Fatface и Roboto — модное и шикарное сочетание.

Как говорят авторы Abril Fatface: «Тонкие засечки и четкие изгибы придают шрифту утонченность, которая придает элегантность любому заголовку».

Робото входит, чтобы уравновесить личность Абрил. Достижение стильного и современного баланса.

Шрифты

Код для встраивания:

Код CSS:

 тело {
 семейство шрифтов: «Roboto», без засечек;
 вес шрифта: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: Abril Fatface, с засечками;
} 

Colors

Цвет фона: #ff3627
Цвет текста: #ffffff

6. Archivo + Open Sans

Яркий, яркий, блестящий. Сочетание шрифтов для молодежных и жизнерадостных брендов.

Используйте Archivo (ширина 500) для заголовков, Open Sans (ширина 300) для тела и та-да …! Вы готовы идти.

Шрифты

Код для встраивания:

Код CSS:

 корпус {
 семейство шрифтов: «Open Sans», без засечек;
 вес шрифта: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: «Архив», без засечек;
 вес шрифта: 500;
} 

Цвета

Цвет фона: #864aff
Цвет заголовка: #00fdcb
Цвет корпуса: #ffffff

7. Montserrat + Work Sans

Смелый, смелый, смелый, геометрический, смелый… и дружелюбный. Если это то, что вам нужно, попробуйте эту комбинацию.

Мне не нужно много говорить о Montserrat, одном из самых красивых и надежных шрифтов в коллекции Google Fonts.

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

Здесь у нас есть самая прочная и толстая сторона, но она также может служить шикарным и более деликатным стилям (оповещение, спойлер: комбинация номер 9).

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

Шрифты

Код для встраивания:

Код CSS:

 корпус {
 семейство шрифтов: «Work Sans», без засечек;
 вес шрифта: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Montserrat', без засечек;
 вес шрифта: 900;
} 

Цвета

Цвет фона: #b7e3e4
Цвет текста: #f03f35

8. Prata + Lato

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

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

* Посмотрите эту комбинацию  в действии на этой бесплатной теме WordPress под названием Pepper.

Шрифты

Код вставки:

Код CSS:

 body {
 семейство шрифтов: 'Lato', без засечек;
 вес шрифта: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: «Prata», с засечками;
} 

Цвета

Цвет фона: #5b1ee1
Цвет текста: #ffffff

9. Монтсеррат + Лора

Помните, я говорил, что Монтсеррат может служить разным стилям и целям? Вот доказательство.

Эта комбинация использует его во всех заглавных буквах и с легким весом, превращая ваши заголовки в изысканные и модные.

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

Шрифты

Код для встраивания:

Код CSS:

 тело {
 семейство шрифтов: «Лора», с засечками;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Montserrat', без засечек;
 вес шрифта: 300;
 преобразование текста: верхний регистр;
} 

Цвета

Цвет фона: #fce1e0
Цвет текста: #000000

10. Playfair Display + Chivo

Роскошный и модный. Это статус, которого вы можете достичь с помощью этой комбинации.

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

Элегантность и тонкие штрихи Chivo, использованные в Light, идеально сочетаются с сильными характеристиками Playfair Display.

Что вы ждете, чтобы попробовать?

Шрифты

Код для встраивания:

  googleapis.com/css?family=Chivo:300,700|Playfair+Display:700i" rel="stylesheet">  

Код CSS:

 корпус {
 семейство шрифтов: «Chivo», без засечек;
 вес шрифта: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: «Playfair Display», с засечками;
 вес шрифта: 700;
 стиль шрифта: курсив;
} 

Цвета

Цвет фона: #000000
Цвет текста: #ffffff

---

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

Ищете дополнительные советы по созданию собственного веб-сайта? Продолжайте читать здесь: 11 основных советов для недизайнеров при создании веб-сайта

 

27 лучших бесплатных шрифтов для современного дизайна пользовательского интерфейса в 2023 году (+ лучшие практики типографики)

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

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

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

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

Выбор шрифта может быть трудным, и легко вернуться к «безопасным шрифтам», таким как Roboto, Times New Roman или Lato. Это безопасные веб-шрифты, проверенные и надежные, но они могут сделать ваш дизайн пользовательского интерфейса устаревшим. Мы написали этот пост, чтобы помочь вам выбрать самые лучшие бесплатные шрифты для современного веб-дизайна. Каждый шрифт, указанный в этом посте, можно использовать бесплатно как в личных проектах, так и в коммерческих целях.

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

Что означает «Дисплей»?

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

Как правило, «текстовые» стили следует использовать для большей части информационного и основного текста (текст абзаца, метки, элементы пользовательского интерфейса) и небольшие размеры в пользовательских интерфейсах, в то время как более крупные «отображаемые» стили следует зарезервировать для заголовков. (h2-H6).

Базовый размер шрифта

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

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

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

Высота строки

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

Как правило (и хорошая отправная точка), основной текст должен быть в 1,5-2 раза больше размера текста, в зависимости от ширины и длины содержимого. Например, если ваш основной текст имеет размер 16 пикселей, установите высоту строки на 1,5 или 24 пикселя.

Чтобы еще больше усложнить ситуацию, существует обратная зависимость между размером шрифта и соответствующей высотой строки — чем больше текст, тем меньше должна быть высота строки. Как правило, для отображаемого текста (заголовки и т. д.) безопаснее стремиться к увеличению от 1 до 1,25x. Например, если ваш отображаемый текст имеет размер 60 пикселей, установите высоту строки на ~ 1,2 или 72 пикселя и посмотрите, как это выглядит.

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

Оптимизация межбуквенного интервала для отображаемого текста

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

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

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

К сожалению, Figma позволяет вам определять значение % для межбуквенного интервала только в текстовых стилях, что не отражает CSS. Если вы передаете проекты разработчику или создаете дизайн самостоятельно, вам необходимо определить либо значение жесткого пикселя, либо значение rem/em (например, -0,1em).

Выбор подходящих шрифтов для вашего проекта

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

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

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

Ищите шрифты по крайней мере с пятью весами

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

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

Будьте проще

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

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

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

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

Учитесь у лучших

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

В этом примере вы можете проверить Stripe и обнаружить, что они используют Söhne, высококачественный шрифт без засечек от Klim Type Foundry.

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

Чем меньше шрифтов, тем лучше

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

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

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

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

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

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

1.

Inter (бесплатно)

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

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

2. DM Sans (бесплатно)

DM Sans — это низкоконтрастный геометрический шрифт без засечек, предназначенный для использования в небольших размерах, что делает его отличным выбором для дизайна пользовательского интерфейса. Проект DM Sans был заказан Google компанией Colophon Foundry и бесплатен для личных проектов и коммерческого использования.

DM Sans поддерживает специальные символы и расширенный набор глифов Latin, что позволяет набирать английский язык и поддерживать другие языки. Он был разработан Colophon Foundry, который начал с латинской части ITF Poppins Джонни Пинхорна.

3. Satoshi (бесплатно)

Satoshi — популярный модернистский и геометрический шрифт без засечек, созданный Deni Anggara, дизайнером шрифтов и графическим дизайнером из Джакарты. Satoshi дебютировал на Fontshare в марте 2021 года. Это отличный универсальный шрифт для любого типа творческих проектов или дизайна пользовательского интерфейса благодаря резкому контрасту.

Мы любим Satoshi стилистически, потому что он сочетает в себе оба стиля Grotesk, но с более геометрическим дизайном. Satoshi доступен в 10 статических и двух переменных стилях и поддерживает 135 языков. Это 100% бесплатно для личных проектов и коммерческого использования.

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

4. Mona Sans (бесплатно)

Выпущенный в ноябре 2022 года Mona Sans — это красивый и универсальный шрифт без засечек от GitHub. Это семейство шрифтов было разработано совместно с индонезийской студией Degarism и имеет 100% открытый исходный код! Он разработан специально для продуктового дизайна, веб-дизайна и печати и идеально сочетается с помощником Моны Санс, Hubot Sans (см. ниже).

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

5. Hubot Sans (бесплатно)

Hubot Sans — «робот-помощник» Моны Сан с чистыми и геометрическими акцентами. Он заметно менее нейтрален, чем Mona Sans, с современным техническим и своеобразным ощущением. Он идеально подходит для отображения, заголовков и цитат.

Как и Mona Sans, этот шрифт включает в себя впечатляющие 24 стиля с соответствующим курсивом и вариативный шрифт, открывающий тысячи возможностей и вариаций в одном файле. GitHub был достаточно щедр, чтобы сделать оба этих шрифта на 100% бесплатными для коммерческого использования — вы можете использовать оба этих семейства шрифтов во всех своих проектах.

6. Public Sans (бесплатно)

Public Sans — сильный, нейтральный и бесплатный шрифт без гротеска, разработанный специально для дизайна пользовательского интерфейса и веб-дизайна. Public Sans был разработан Системой веб-дизайна США и был обновлен для включения вариативного шрифта в мае 2022 года.

Public Sans изначально основан на чрезвычайно популярном шрифте Libre Franklin с открытым исходным кодом. Хотя он имеет много общего с Libre Franklin, он имеет более современный и нейтральный вид, с регуляризованными весами штрихов и незакругленными вершинами. Если вы являетесь поклонником системного шрифта Apple, SF Pro Text, вам, вероятно, понравится Public Sans — он максимально похож на SF Pro Text по своему общему размеру и внешнему виду (но на 100 % имеет открытый исходный код и бесплатен для личного использования). проекты и коммерческое использование).

7. Switzer (бесплатно)

Switzer — это единственный в своем роде шрифт без засечек, который первоначально был представлен как «Volkart» на веб-сайте Indian Type Foundry и дебютировал на платформе Fontshare в 2021 году. Этот латинский шрифт , шрифт neo-Grotesk имеет 18 различных начертаний, девять из которых соответствуют курсиву.

Хотя его использование в проектах с одним словом или одной строкой может быть несколько деликатным, в конечном итоге это будет зависеть от того, как вы будете реализовывать его строчные буквы. Switzer — отличный выбор для современного дизайна пользовательского интерфейса, особенно информативных информационных панелей и экранов меньшего размера, поскольку он имеет высокую высоту по оси x 79. %. Мы любим его, потому что он кажется современным и ультра-премиальным.

Switzer бесплатен как для личного, так и для коммерческого использования.

8. Space Grotesk (бесплатно)

Space Grotesk — пропорциональный вариант шрифта без засечек, основанный на семействе фиксированной ширины Space Mono от Colophon Foundry (2016). Первоначально разработанный Флорианом Карстеном в 2018 году, Space Grotesk сохраняет характерные детали монопространства, оптимизируя его для улучшения читаемости при размерах, не связанных с дисплеем.

Space Grotesk бесплатен как для личного, так и для коммерческого использования.

9. Figtree (бесплатно)

Figtree — это минималистичный геометрический дизайн без засечек, разработанный Эриком Кеннеди, основателем курсов Learn UX Design и Learn UI Design. Он был заказан компанией Google Fonts и распространяется под лицензией Open Font License. Figtree – это вариативный шрифт, который поддерживает более 280 языков латиницы и имеет 7 жирностей. Самые характерные буквы Figtree — это y, f и t — каждая буква имеет беззастенчивые изгибы, придающие этому шрифту свободную, непринужденную атмосферу.

Нам нравится этот шрифт, потому что он прекрасно сочетает простоту и удобство. По словам самого Эрика, «Фигтри минималистична, но не жестка, непринужденна, но не глупа». Figtree бесплатен для личных проектов и коммерческого использования.

10. Aileron (бесплатно)

Aileron — это чистый неогротескный шрифт без засечек, разработанный Сора Сагано из литейной мастерской Dot Colon.

Этот шрифт в значительной степени вдохновлен Helvetica, с некоторыми незначительными изменениями, такими как круглые точки и точки, чтобы сделать его более мягким и дружелюбным. Aileron доступен в Adobe Fonts, но его также можно загрузить непосредственно с веб-сайта Dot Colon. Он поставляется с 8 весами от ультралегкого до черного (с соответствующим курсивом) и невероятно полезен для дизайна пользовательского интерфейса и веб-сайтов. Это бесплатное семейство шрифтов, которое вы можете использовать в проектах. Если вы сочтете это полезным, вы можете поддержать создателя, купив ему кофе.

11. Гондола (бесплатно)

Гондола — это нео-гротескный шрифт без засечек и «переработанная» версия Aileron (Sora Sagano из Dot Colon). Несмотря на то, что он сохраняет тот же нео-гротескный стиль в стиле Helvetica, он был слегка обновлен, чтобы казаться более естественным.

Как и у Aileron, он имеет 8 начертаний и соответствующий курсив. Это действительно красивый и нейтральный шрифт, который идеально подходит для чистого дизайна пользовательского интерфейса. Это на 100% бесплатно для личного и коммерческого использования, но вы можете отблагодарить создателя, купив ему кофе.

12. Neue Haas Grotesk (почти бесплатно)

Neue Haas Grotesk — первоначальное название Helvetica, которое развивалось и менялось с годами. Кристиан Шварц из Commercial Type выпустил Neue Haas Grotesk, чтобы вернуть оригинальный шрифт Helvetica и исправить историю. Это просто идеально и выглядит невероятно для нейтрального и современного дизайна пользовательского интерфейса.

Этот шрифт доступен в Adobe Fonts, а это означает, что вам потребуется подписка Adobe CC, чтобы использовать его для личного использования и коммерческих проектов. Мы пытались включить в этот список только 100% бесплатные шрифты, но Neue Haas Grotesk заслуживает упоминания, потому что он такой замечательный.

13. Aktiv Grotesk (бесплатно)

Aktiv Grotesk — это минимальная интерпретация гротескного шрифта без засечек 21-го века, разработанная в 2010 году Бруно Маагом, основателем Dalton Maag. Этот шрифт доступен в Adobe Fonts, а это означает, что вам потребуется подписка Adobe CC, чтобы использовать его для личного использования и коммерческих проектов. Как и Neue Haas Grotesk выше, Aktiv Grotesk доступен в Adobe Fonts, что означает, что технически он не является бесплатным, но нам он так нравится, что мы захотели включить его.

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

14. HK Grotesk (бесплатно)

HK Grotesk — великолепный нейтральный шрифт без засечек, разработанный Альфредо Марко Прадилем и Hanken Design Co. это отлично подходит для дизайна пользовательского интерфейса.

HK Grotesk поставляется в 9 стилях с соответствующим курсивом, имеет открытый исходный код и бесплатен для использования. Hanken Design Co. также выпустила платную версию своего бесплатного шрифта под названием HK Grotesk Pro.

15. Futura PT (вид бесплатного)

Futura PT — геометрический шрифт без засечек, первоначально разработанный Полом Реннером в 1927 году для компании Bauer. Это был революционный дизайн для 1920-х годов, потому что в большинстве книг и печатных изданий в Германии использовался тяжелый шрифт blackletter.

Futura PT выдержала испытание временем и постоянно обновляется и поддерживается уже почти 100 лет. Это любимый шрифт режиссеров Уэса Андерсона и Стэнли Кубрика, а также основной шрифт, используемый Volkswagen с 19-го века.60-е годы. В последние годы популярность Futura PT для использования в Интернете и для дизайна пользовательского интерфейса вновь возросла. Это будет классикой на ближайшие 100 лет.

Как и Neue Haas Grotesk, шрифт Futura PT можно загрузить через Adobe Fonts. Это означает, что технически не является бесплатным — вам потребуется подписка Adobe CC, чтобы использовать его для личного использования и коммерческих проектов.

16. Work Sans (бесплатно)

Work Sans — это бесплатный шрифт с открытым исходным кодом, разработанный австралийским шрифтовым дизайнером Вей Хуангом. Он был заказан Google Fonts и выпущен в 2015 году. Work Sans бесплатен для личных проектов и коммерческого использования.

17. Open Sans (бесплатно)

Open Sans — гуманистический шрифт без засечек с открытым исходным кодом, разработанный Стивом Маттесоном и выпущенный в 2011 году. Пять начертаний с соответствующим курсивом делают Open Sans чрезвычайно универсальным и полезным для широкого круга пользователей. приложений.

Это вездесущий шрифт в Интернете, используемый всеми, от Google до WordPress. Я даже слышал, что его называют шрифтом «плоского дизайна». Мне нравится думать об Open Sans как о новом Arial.

Open Sans, как следует из названия, имеет открытый исходный код и на 100 % бесплатен как для личного, так и для коммерческого использования.

18. General Sans (бесплатно)

General Sans — это дружелюбный и причудливый геометрический гротеск, созданный норвежским шрифтовым дизайнером Frode Helland через Indian Type Foundry.

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

Первоначально он был выпущен Fontstore 2017 и перенесен на Fontshare в марте 2021 года, где он на 100% бесплатен для коммерческого использования.

19. Poppins (бесплатно)

Poppins — это геометрический шрифт без засечек, опубликованный Indian Type Foundry в 2014 году. Он был выпущен с открытым исходным кодом и доступен бесплатно в Google Fonts для личных проектов и коммерческого использования. В то время как Поппинс немного недооценивает Твиттер за то, что его слишком часто используют в пользовательском интерфейсе и веб-дизайне, мы думаем, что это отличный вариант, если вы ищете чистый геометрический вариант.

Indian Type Foundry описывает Poppins как «интернационалистский подход к жанру геометрического гротеска». Он поддерживает языки латыни и деванагари и доступен в девяти весах с соответствующим курсивом.

20. Outfit (бесплатно)

Outfit — интересный и минималистичный геометрический шрифт без засечек, разработанный On Brand Investments Pty Ltd и шрифтовым дизайнером из Сантьяго-де-Чили Родриго Фуэнзалида. Он был заказан Google Fonts. Outfit — это официальный шрифт, используемый компанией Outfit.io, занимающейся автоматизацией брендов.

Этот шрифт является отличным выбором как для цифровых, так и для печатных дизайнерских проектов. Мы любим его для современного дизайна пользовательского интерфейса из-за его простого, чистого и характерного геометрического стиля. Это приходит в 9разный вес, но, в частности, не включает соответствующий курсив. Это на 100% бесплатно для личных проектов и коммерческого использования и особенно полезно для логотипов и материалов для брендинга.

Если вы хотите внести свой вклад в Outfit, нажмите здесь.

21. Hind (бесплатно)

Hind — это коллекция шрифтов без засечек, созданная Indian Type Foundry и дебютировавшая на Fontshare в мае 2022 года. Это семейство шрифтов с открытым исходным кодом бесплатно для личного использования и коммерческих проектов. был специально создан для дизайна пользовательского интерфейса и удобочитаемости на экране.

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

22. Supreme (бесплатно)

Supreme — это шрифт без засечек, разработанный графическим дизайнером Джереми Хорнусом и арт-директором Ильей Наумофф по заказу Fontshare в марте 2021 года.

Supreme изначально использовался для технического брендинга и проектирования, но быстро стал популярным и легко узнаваемым шрифтом для дизайна пользовательского интерфейса благодаря своей способности разнообразить дизайн-проекты, не отвлекая внимания. Хотя Supreme немного тоньше по сравнению с некоторыми другими шрифтами и имеет x-height 67%, он по-прежнему сохраняет хорошую читабельность при небольших размерах. Supreme доступен в 14 статических и 2 переменных стилях и поддерживает 135 языков.

23. Lexend (бесплатно)

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

Хотя некоторые из его вариаций (Zetta и Peta) могут оказаться немного громоздкими для небольших (компактных) размеров экрана, Lexend — отличный выбор для дизайна пользовательского интерфейса благодаря своей удобочитаемости и доступности. Lexend стал доступен бесплатно в Google Fonts в 2019 году., и защищен лицензией Open Font License.

24. Fira Sans (бесплатно)

Fira Sans был разработан берлинской компанией Carrois Apostrophe и запущен на Fontshare в мае 2022 года. Он содержит 18 статических и два переменных стиля.

Эти шрифты были созданы с расчетом на Mozilla FirefoxOS, но они также направлены на удовлетворение требований к удобочитаемости для широкого круга устройств с различным качеством экрана и рендерингом. Fira Sans защищен лицензией SIL Open Font License.

25. Be Vietnam Pro (бесплатно)

Be Vietnam Pro — это чистый, современный и функциональный шрифт Neo Grotesk без засечек, созданный вьетнамскими дизайнерами Ламом Бао, Тони Ле и Вьетань Нгуен, которые решили разработать системный шрифт, говорящий на вьетнамском языке. .

Мы любим его за современный дизайн пользовательского интерфейса из-за его простого, чистого и отличительного геометрического стиля, и дизайнеры активно работают над его улучшением. Be Vietnam Pro бесплатен для личного и коммерческого использования.

26. Веревка (бесплатно)

Manrope — это семейство современных шрифтов без засечек с открытым исходным кодом, разработанное Майклом Шарандой в 2018 году. В 2019 году оно было обновлено и теперь включает вариативный шрифт.

По словам самого Майкла, Manrope «полуконденсированный, полукруглый, полугеометрический, полудиновой, полугротескный. В нем используются минимальные вариации толщины мазка и полузакрытое отверстие». Он отлично подходит для дизайна пользовательского интерфейса, особенно числовых данных, таких как номера телефонов и циферблаты. Шрифт

Manrope бесплатен для личного и коммерческого использования.

27. Source Sans Pro (бесплатно)

Source Sans Pro был самым первым шрифтом Adobe с открытым исходным кодом. Это нейтральное и полезное семейство шрифтов без засечек, разработанное Полом Д. Хантом в 2012 году в рамках программы Adobe Originals и собственного литейного производства. Теперь он доступен в Google Fonts и полностью бесплатен для коммерческого использования.

Source Sans Pro доступен в 6 начертаниях с соответствующим курсивом, а также доступен в виде вариативного шрифта. Он настолько популярен, что у него даже есть собственная страница в Википедии.

‍

Открытие новых шрифтов

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

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

Typewolf

Typewolf — отличный (и независимый) типографический ресурс, созданный Джереми Шоафом. Это наш любимый ресурс для поиска отличных и малоиспользуемых шрифтов и веб-шрифтов, как бесплатных, так и платных. Это также фантастическое место, где можно познакомиться с веб-дизайнерами и отличным веб-дизайном со всех уголков Интернета.

Используемые шрифты

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

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

Google Fonts (бесплатно)

Компания Google «делает Интернет более красивым, быстрым и открытым с помощью великолепной типографики». Google Fonts — самый популярный источник бесплатных шрифтов. Здесь есть несколько действительно отличных шрифтов с открытым исходным кодом и веб-безопасных шрифтов практически для любого вашего проекта, а также несколько интересных уникальных шрифтов и огромная коллекция шрифтов с засечками и рукописных шрифтов.

Adobe Fonts (бесплатно)

Adobe Fonts (ранее известный как Typekit) — отличный ресурс для поиска лучших бесплатных шрифтов, включая шрифты setif, скриптовые шрифты и винтажные шрифты. Однако они не совсем бесплатны — вам понадобится подписка Adobe CC, чтобы использовать эти шрифты.

MyFonts

MyFonts — самая большая коллекция шрифтов в Интернете, насчитывающая более 130 000 шрифтов. Здесь есть несколько замечательных находок, но может быть немного утомительно пробираться через не очень премиальные шрифты.

Больше руководств по передовому опыту

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

Untitled UI — крупнейший в мире комплект пользовательского интерфейса и система дизайна Figma. Он был разработан, чтобы стать «максимальным» набором пользовательского интерфейса и идеальной отправной точкой для любого проекта — от красивых маркетинговых целевых страниц до сложных информационных панелей и веб-приложений.