10 лучших шрифтов для вашего сайта 2020 года — Дизайн на vc.ru

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

91 498
просмотров

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

1. Playfair Display

Со времен просвещения в конце 18-го века широкие перья были заменены острыми стальными ручками. Это повлияло на типографские буквы, становясь все более оторванными от письменных. Разработки в области технологий печати, чернил и изготовления бумаги позволили печатать буквы с высокой контрастностью и тонкими линиями. Проект Playfair возглавляет Клаус Эггерс Соренсен, дизайнер шрифтов из Амстердама, Нидерланды. Как видно из названия, Playfair Display хорошо подходит для заголовков. Его можно установить в заголовках новостей или для стилистического эффекта в любых заголовках.

2. Bebas Neue

Bebas Neue свободный sans serif, создан Ryoichi Tsunekawa. Но теперь Bebas пополнился четырьмя новыми весами — Thin, Light, Book, и Regular, добавленных. Шрифт отлично подойдет для заголовков, навигации на сайте, рекламных постеров и многого другого.

3. Druk Wide

Семейство Druk Wide было создано в 2013 году специально для нового дизайна «Etc.» ― раздела о стиле и культуре в Bloomberg Businessweek. Оно прежде всего отдаёт дань уважения нидерландским дизайнерам первой половины XX века, активно использовавшим широкие, насыщенные гротески для привнесения в работы строгой шрифтовой иерархии (например, в каталогах Городского музея Амстердама, выполненных Виллемом Сандбергом).

4. Cinzel

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

5. Gilroy

Гилрой — это современный шрифт без засечек с геометрическим прикосновением. Семейство шрифтов Qanelas.

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

6. Montserrat

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

7. Proxima Nova

Семейство Proxima Nova — это полная переработка Proxima Sans (1994). Исходные шесть шрифтов (три веса с курсивом) были расширены до 48 полнофункциональных шрифтов OpenType. Существуют три ширины: Proxima Nova, Proxima Nova Condensed и Proxima Nova Extra Condensed. Каждая ширина состоит из 16 шрифтов — семь весов с соответствующими курсивом.

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

8. PT Sans

PT Sans — это семейство типов универсального применения. Он состоит из 8 стилей: обычный и жирный шрифт с соответствующим курсивом образует стандартное семейство компьютерных шрифтов. Дизайн сочетает в себе традиционный консервативный внешний вид с современными тенденциями гуманистического без засечек и характеризуется повышенной читаемостью. Эти функции помимо обычного использования в бизнес-приложениях и печатных материалах сделали шрифты весьма полезными для указателей, схем, экранов информационных киосков и других объектов городских визуальных коммуникаций. Дизайн шрифта разработан Александром Корольковым.

9. Work Sans

Work Sans — это семейство шрифтов, основанное на ранних гротесках, таких как Стивенсон Блейк, Миллер и Ричард и Бауэршен Гиссерей. Обычный вес и другие члены семейства оптимизированы для использования текста на экране при средних размерах (14–48 пикселей), а также могут использоваться при печати. Шрифты, приближенные к экстремальным весам, предназначены для использования как в Интернете, так и в печати. В целом, функции упрощены и оптимизированы для разрешения экрана.

10. Lato

Lato — это семейство шрифтов без засечек, созданное летом 2010 года варшавским дизайнером Лукашом Дзедзичем («Лато» по-польски означает «лето»). В декабре 2010 года семья Лато была опубликована по лицензии Open Font его литейным TyPoland при поддержке Google.

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

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

Добавление шрифтов на веб-сайт

Веб-шрифты из Adobe Fonts можно использовать на веб-сайтах, в HTML-рассылках, в статьях в формате AMP Google, а также во многих проектах других типов, поддерживающих веб-шрифты.

Начните с просмотра библиотеки шрифтов. Необходимую языковую поддержку можно выбрать в раскрывающемся меню ЯЗЫКИ И ПИСЬМЕННОСТИ.

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

Если желаемый шрифт найден, нажмите кнопку </>, чтобы добавить семейство в веб-проект.

Вы также можете щелкнуть название шрифта, чтобы открыть страницу семейства и отобразить все типы насыщенности и стили шрифта, доступные для использования. Затем нажмите </> «Добавить в веб-проект» в верхней части страницы, чтобы добавить семейство в веб-проект.

В окне «Добавить шрифты в веб-проект» можно назвать веб-проект и выбрать шрифты для включения.

1. Щелкните меню и выберите «Создать проект».
2. Назовите веб-проект.
3. Используйте флажки, чтобы выбрать типы насыщенности и стили шрифта, включаемого в проект.
4. Создайте проект.

Позже вы сможете вносить изменения в настройки проекта на странице Мои шрифты Adobe Fonts.

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

Скопируйте код вставки и добавьте его к тегу <head> на своем веб-сайте.

Нажмите «Готово», чтобы закрыть окно веб-проекта и продолжить просмотр.  Чтобы добавить в проект дополнительные шрифты, нажмите кнопку </> на другом семействе шрифтов, затем в меню выберите название вашего проекта (вместо «Создать проект»).

Веб-проект и все добавленные к нему шрифты будут указаны на странице Мои шрифты Adobe Fonts.

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

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

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

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

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

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

Справки по другим продуктам

• Почему мои веб-шрифты используются с use.typekit.net?

Вход в учетную запись

Войти

Управление учетной записью

Безопасные веб-шрифты CSS

❮ Назад
Далее ❯

Лучшие веб-безопасные шрифты для HTML и CSS

Следующие шрифты являются лучшими веб-безопасными шрифтами для HTML и CSS:

• Arial (без засечек)
• Verdana (без засечек)
• Тахома (без засечек)
• Требушет MS (без засечек)
• Times New Roman (с засечками)
• Грузия (с засечками)
• Гарамонд (с засечками)
• Courier New (монопространство)
• Кисть Script MT (курсив)

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

Arial (без засечек)

Arial — наиболее широко используемый шрифт как для онлайн, так и для печатных СМИ. Ариал
также является шрифтом по умолчанию в Документах Google.

Arial — один из самых безопасных веб-шрифтов, он доступен во всех основных операционных системах.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Verdana (без засечек)

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

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Tahoma (без засечек)

В шрифте Tahoma меньше пробелов между символами.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Trebuchet MS (без засечек)

Trebuchet MS был разработан Microsoft в 1996 году. Используйте этот шрифт с осторожностью. Нет
поддерживается всеми мобильными операционными системами.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Times New Roman (с засечками)

Times New Roman — один из самых узнаваемых шрифтов в мире. Это выглядит
профессиональный и используется во многих газетах и ​​«новостных» веб-сайтах. Это также
основной шрифт для устройств и приложений Windows.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Georgia (с засечками)

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

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Garamond (с засечками)

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

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Courier New (моноширинный)

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

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Brush Script MT (курсив)

Шрифт Brush Script MT был разработан для имитации рукописного ввода.
Он элегантен и утончен, но может быть труден для чтения. Используйте его осторожно.

Пример

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Попробуйте сами »

Совет: Также ознакомьтесь со всеми доступными шрифтами Google и узнайте, как их использовать.

❮ Предыдущий
Следующая ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Top Tutorials

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

68
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top86 Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Просмотр новых и лучших веб-шрифтов

Перейти к основному содержанию

В нашей обширной библиотеке шрифтов представлен ряд стилей, которые подойдут практически для любого проекта.
Выберите один из классических дизайнов, таких как
Новая Гельветика®,
Новый Фрутигер®,
Univers® Next и
ITC Avant Grade Gothic®.
Или проверьте, что горячо, чтобы оставаться в курсе тенденций. Постоянно добавляются новые шрифты.

Просмотреть все веб-шрифты

Самые популярные

Новые веб-шрифты

Отмычки

Новичок в веб-шрифтах? Попробуйте это:

Часто задаваемые вопросы о веб-шрифтах