Лучшие Гугл шрифты для сайта

Шрифты делятся на семейства, но основополагающим отличием принято считать наличие или отсутствие засечек – штрихов на концах букв. Это отражено в названии шрифтов: «serif» означает засечку, если рядом есть частица «sans» (от фр. sans – «без»), то шрифт будет без засечек. Они могут быть различной формы и размера: прямые, закруглённые, перпендикулярные, толстые, тонкие и ещё какие-нибудь. Считается, что засечки служат для улучшения читабельности текста, поскольку визуально образуют горизонтальную линию направления букв.

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

Лучшие шрифты от Google Fonts – ТОП 15

1. Roboto – самый популярный шрифт в мире

Скачать шрифт Roboto

• Дата создания: 2011 год
• Всего стилей: 12 шт.
• Используют: 26 млн. сайтов

Roboto – семейство бесплатных шрифтов с большим количеством вариантов веса: Thin, Light, Regular, Medium, Bold, Black. Шрифт придуман дизайнером Кристианом Робертсоном и впервые был представлен вместе с ОС Android 4.0 «Ice Cream Sandwich» в качестве системного шрифта. Сегодня это самый популярный шрифт в Интернете.

2. Open Sans – самый читаемый шрифт

Скачать Open Sans

• Дата создания: 2010 год
• Всего стилей: 10 шт.
• Используют: 23 млн. сайтов

Open Sans – выглядит приятно, легко читается на экранах. Засечек не имеет, разработан Стивом Матессоном – одним из ведущих современных специалистов в типографике. Находится на 2-м месте по популярности в Сети, Google его использует для своей рекламы и некоторых сайтов.

3. Montserrat – лучший шрифт без засечек

Скачать шрифт Montserrat

• Дата создания: 1989 год
• Всего стилей: 18 шт.
• Используют: 7,5 млн. сайтов

Montserrat – шрифт без засечек, выглядит просто, интересно, отлично читается. Был изобретён в 1989 году Джульеттой Улановски, дизайнером из Буэнос Айреса, и назван в честь её родного района города. Стили различной степени жирности добавляются периодически по сей день.

4. Roboto Condensed – для текстовых абзацев

Скачать Roboto Condensed

• Дата создания: 2011 год
• Всего стилей: 6 шт.
• Используют: 2,9 млн. сайтов

Roboto Condensed – ещё одно творение Кристиана Робертсона, которое он вывел в отдельное семейство. Это узкий, вытянутый шрифт, довольно внятный и приятный на вид. Хорошо подходит для длительного чтения с экрана.

5. Source Sans Pro – для веб-приложений

Скачать Source Sans Pro

• Дата создания: 2012 год
• Всего стилей: 6 шт.
• Используют: 5,4 млн. сайтов

Source Sans Pro – содержит полный набор стилей, первый шрифт Adobe с открытым доступом. Разработан Полом Хантом, хорошо подходит для пользовательских интерфейсов. Поддерживает кириллицу во всех стилях, кроме курсива.

6. Oswald – солидный шрифт для заголовков

Скачать шрифт Oswald

• Дата создания: 2011 год
• Всего стилей: 6 шт.
• Используют: 5,4 млн. сайтов

Oswald – относительно новый шрифт, бы создан художником Верноном Адамсом в 2011 году, позже были добавлены стили, которых всего шесть. Шрифт вытянутый, стильный, внушительно смотрится в заголовках. Широко используется на сайтах и в приложениях для ПК и мобильных платформ.

7. Merriweather – изящный шрифт с засечками

Скачать Merriweather

• Дата создания: 2010 год
• Всего стилей: 8 шт.
• Используют: 4,1 млн. сайтов

Merriweather – шрифт с чётко выраженными засечками, вытянутый и слегка сжатый, с открытой, плавной формой букв. Был разработан специально для отображения на электронных экранах. Изящно выглядит и хорошо читается. Существует также в версии без засечек с приставкой «sans».

8. Noto Sans – гладкий и простой шрифт

Скачать Noto Sans

• Дата создания: 2012 год
• Всего стилей: 4 шт.
• Используют: 3,1 млн. сайтов

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

9. Yanone Kaffeesatz – для кричащих заголовков

Скачать Yanone Kaffeesatz

• Дата создания: 2004 год
• Всего стилей: 4 шт.
• Используют: 460 тыс. сайтов

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

10. Caveat – красивый прописной шрифт

Скачать шрифт Caveat

• Дата создания: 2014 год
• Всего стилей: 2 шт.
• Используют: 110 тыс. сайтов

Caveat – это элегантный прописной шрифт, его профиль легко узнаваем и отлично читается. Шрифт игривый и лёгкий, подходит для утончённых заголовков, каких-то сносок, а также писем личного характера. Красивый и непринуждённый, лишён официоза, но на роль основного для сайта, конечно, не подходит.

11. Manrope - самый читабельный шрифт

Скачать шрифт Manrope

• Дата создания: 2018 год
• Всего стилей: 7 шт.

Manrope – новый (2018 год) шрифт, который легко воспринимается при чтении. Он похож на многие другие, но отличается простотой и выверенностью пропорций. Лучше всего выглядит в конфигурациях «Extra-light» и «Light», в жирном начертании становится немного тяжеловат. Таким шрифтом можно писать блог, к примеру. Можно также использовать в роли основного шрифта сайта. Есть кириллическая и латинская версия.

12. Cousine - лучший кириллический шрифт

Скачать шрифт Cousine

• Дата создания: 2004 год
• Всего стилей: 7 шт.

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

13. Raleway - популярный шрифт без засечек

Скачать шрифт Raleway

• Дата создания: 2012 год
• Всего стилей: 18 шт.

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

14. Noto Sans - лучший шрифт для русского языка

Скачать шрифт Noto Sans

• Дата создания: 2015 год
• Всего стилей: 4 шт.

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

15. Marck Script - красивый письменный шрифт

Скачать шрифт Marck Script

• Дата создания: 2011 год
• Всего стилей: 1 шт.

Marck Script – изящный, округлый шрифт, на который приятно смотреть. Да, он витиеватый, немного небрежный, но выверенный, читается легче многих других письменных шрифтов. Такой можно использовать, к примеру, для заголовков или выделения важных моментов на сайтах, посвящённых уходу за женской красотой, в магазинах одежды, пригласительных на праздничные мероприятия и т. д. Представлен в единственном стиле, что неудивительно для такого типа шрифта.

Какой шрифт выбрать для сайта?

Капитан Очевидность не соврёт, с важным видом заметив, что шрифты на любом сайте играют огромную роль. Одно из свежих исследований, проведённое в 2020 году Nielsen Norman Group пришло к выводу, что люди, прежде чем прочесть весь текст, пробегают его в общих чертах глазами, в первую очередь, по заголовкам. А дальше уже решают, интересно им продолжить чтение или идти искать более удобный/полезный источник информации. С мобильников, кстати, в среднем, чаще дочитывают от корки до корки, но содержание должно быть усилено читабельностью шрифта.

Бывало же такое: заходишь на сайт, ещё ничего не прочёл, а уже оценил качество форматирования материала и засмотрелся на несколько секунд? Никто не будет пытаться разобрать каракули, если только там не какая-то редкая/важная информация. Проще за пару секунд найти другой сайт, благо, поисковики не скупятся на выдачу.

Мы рекомендуем использовать простые, читабельные шрифты, которые уже обрели популярность и привычны для подавляющего числа людей: Open Sans, Roboto, Montserrat и т. д. Но! Стоит учитывать характер контента. К примеру, шутки, оформленные в Times 10% читателей посчитали более смешными, чем те же в Arial.

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

1. Более 3 шрифтов на сайте использовать не стоит. Превратить сайт в нечитабельный цирк проще простого, накидав разношерстных, неуместных шрифтов, особенно на одной странице. Пусть основной текст будет одним стилем, заголовки – другим, выделения акцентов – третьим. Это разумный максимум. Можете вообще брать один шрифт в разных стилях.
2. Читабельность должна быть на уровне. Подбирайте шрифт, пока текст не будет вливаться в голову, как ручей в реку.
3. Тщательно выбирайте шрифтовые пары. Если на сайте больше 1 шрифта, другие должны дружить между собой. Чуть что-то не так – меняйте менее удачный на другой. Попросите друзей/знакомых оценить типографику. Просто пусть скажут своё мнение – нравится или нет.
4. Соблюдайте логику. Это означает, что заголовки должны быть крупнее подзаголовков и уж, тем более, обычного текста, а также насыщеннее, то есть явно выделяться. Цвета шрифтов не должны сливаться с подложкой – фон важная вещь, он должен не мешать чтению, а упрощать его.

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

Как скачать шрифт с Google Fonts?

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

Как установить шрифт на свой компьютер?

После загрузки zip-архива на ПК и открытия папки со шрифтом его нужно установить в операционную систему Windows 10 или MacOS дважды кликнув мышкой по нему. Откроется окно с предпросмотром шрифта в котором нужно вверху нажать "Установить". После чего можно использовать его в текстовых, графических редакторах, типа Photoshop и не только.

Как изменить шрифт в браузере?

Любые установленные шрифты можно использовать в своем браузере (Гугл Хром, Яндекс Браузер, Mozilla Firefox, Опера и др). Покажем способ, как можно изменить шрифты в Google Chrome, который считается самым популярным браузером среди пользователей Интернета.

Открываем: "Настройки и управление Google Chrome (…)" → "Настройки" → "Внешний вид" → "Настроить шрифты":

На открывшейся вкладке нужно выбрать необходимые шрифты:

Как самому подключить шрифт к сайту на CMS?

CMS – это система управления содержимым сайта, так называемый "движок" (специальный скрипт, дистрибутив), который устанавливается на хостинг. Движки позволяют собирать полноценные сайты, блоги, интернет-магазины: добавлять/удалять страницы, менять дизайн шаблона, подключать плагины и т.д.

Для ручной установки шрифта на сайт, работающего на одной из CMS (таких как: WordPress, Joomla, Drupal и др.), нужно скопировать и добавить код встраивания шрифта в исходный код шаблона в область <head>...</head>. При этом, в файле CSS указать правило для определения подключенных семейств. Образцы кода для обоих случаев сервис предоставляет на вкладке «Families Selected» – достаточно скопировать и вставить.

Пример подключения шрифтов:

Как установить шрифт на конструкторе сайтов?

Конструктор сайтов – это самый простой и быстрый способ, чтобы самостоятельно создать сайт-визитку, лендинг (одностраничник) или интернет-магазин без знаний кодинга и без помощи программистов. В отличии от CMS конструкторы намного проще и функциональнее из коробки – идут в комплекте с хостингом, набором шаблонов, виджетами и другими необходимыми SEO и маркетинговыми инструментами.

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

Работа с веб-шрифтами на uKit

Попробовать конструктор uKit

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

Работа с веб-шрифтами на Wix

Попробовать конструктор Wix

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

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

Выводы и рекомендации

Google Fonts – лучший типографический каталог дизайнерских шрифтов в мире, в библиотеке которого содержится более 1000 семейств самых разных веб-шрифтов. Искать шрифты для сайта, созданного на CMS или конструкторе, стоит именно здесь: поисковый гигант предоставляет возможность легально и бесплатно использовать сотни вариантов шрифтов, позволяет их скачивать и даёт инструкции по установке на сайты.

Разборчивость текста и привлекательность шрифтов ощутимо влияют на поведение посетителей сайта. Мы включили в рейтинг 10 популярных шрифтов, любой из которых можно использовать бесплатно на своём сайте, работающем на любом движке или сайтбилдере. Загрузить на ПК шрифт из Google Fonts можно очень просто и всего за пару минут. После установки на Windows или MacOS шрифт будет доступен во всех приложениях, поддерживающих их выбор – Word, Photoshop, браузерах и т. д.