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

87
0
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Время на прочтение: : 11 мин

Шрифты играют большую роль в качестве подачи и легкости восприятия информации. Веб-мастера учитывают эти нюансы, так как выбор шрифтов влияет на посетителей сайта. Google Fonts — лучший каталог бесплатных шрифтов с более чем 1000 семейств шрифтов на более чем 135 языках. Мы собрали подборку из 14 самых интересных вариантов, подходящих для установки на сайт и на компьютер.

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

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

  1. Roboto – самый популярный шрифт из имеющихся. Автор – Кристиан Робертсон, общее количество просмотров – более 15,1 биллиона раз (примерно 69 млрд. в неделю).
  2. Open Sans – второй по популярности. Автор – Стив Мэттесон, общее количество просмотров – более 9,9 биллиона раз (примерно 30 млрд. в неделю).
  3. Lato – качественный сбалансированный шрифт родом из Варшавы. Автор – Лукаш Дзедзич, общее количество просмотров – более 2,5 биллиона раз (примерно 10 млрд. в неделю).
  4. Montserrat – классный кириллический шрифт в модернистском стиле из Буэнос-Айреса. Основной дизайнер – Джульетта Улановски, общее количество просмотров – более 1,5 биллиона раз (примерно 7,6 млрд. в неделю).
  5. Oswald – отличный вариант переработанного «готического» шрифта. Основной дизайнер – Вернон Адамс, общее количество просмотров – более 1,4 биллиона раз (примерно 3,8 млрд. в неделю).
  6. Roboto Condensed – «сжатый» Roboto, рассчитан на более естественный ритм чтения. Автор – Кристиан Робертсон, общее количество просмотров – свыше 1,3 биллиона раз (примерно 4,9 млрд. в неделю).
  7. Source Sans Pro – интересный шрифт без засечек от Adobe. Разработан специально для пользовательских интерфейсов. Автор – Пол Д. Хант, общее количество просмотров – более 1,2 биллиона раз (примерно 4,7 млрд. в неделю).
  8. Slabo 27px – шрифт фиксированной высоты, созданный специально для онлайн-рекламы. Автор – Джон Хадсон, общее количество просмотров – более 1 биллиона раз (примерно 166 млн. в неделю).
  9. Raleway – тонкий и элегантный шрифт без засечек. Исходный автор – Мэт МакИнерни, общее количество просмотров – более 800 млрд. раз (примерно 2,9 млрд. в неделю).
  10. Noto Sans JP – тот самый шрифт «без тофу», но специально для Японии. Входит в семейство одноимённых шрифтов, разработанных Google, общее количество просмотров – более 660 млрд. раз (примерно 14,2 млрд. в неделю).

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

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

СКАЧАТЬ ШРИФТ ROBOTO

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

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

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

Open Sans

СКАЧАТЬ OPEN SANS

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

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

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

Montserrat

СКАЧАТЬ ШРИФТ MONTSERRAT

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

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

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

Roboto Condensed

СКАЧАТЬ ROBOTO CONDENSED

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

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

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

Source Sans Pro

СКАЧАТЬ SOURCE SANS PRO

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

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

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

Oswald

СКАЧАТЬ ШРИФТ OSWALD

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

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

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

Merriweather

СКАЧАТЬ MERRIWEATHER

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

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

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

Noto Sans

СКАЧАТЬ NOTO SANS

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

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

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

Yanone Kaffeesatz

СКАЧАТЬ YANONE KAFFEESATZ

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

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

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

Caveat

СКАЧАТЬ ШРИФТ CAVEAT

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

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

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

Manrope

СКАЧАТЬ ШРИФТ MANROPE

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

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

Читайте также  Как создать простой HTML сайт в блокноте

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

Cousine

СКАЧАТЬ ШРИФТ COUSINE

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

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

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

Raleway

СКАЧАТЬ ШРИФТ RALEWAY

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

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

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

Noto Sans

СКАЧАТЬ ШРИФТ NOTO SANS

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

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

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

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

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

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

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

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

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

Как загрузить шрифт из Google Fonts?

Как загрузить шрифт из Google Fonts?

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

https://fonts.google.com/?subset=cyrillic

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

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

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

Как подключить шрифт к странице на CMS?

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

Для ручной установки шрифта на сайт, работающий на одной из CMS (таких как WordPress, Joomla, Drupal и др.), необходимо скопировать и добавить код встраивания шрифта в исходный код шаблона в области. В то же время укажите в файле CSS правило определения родственных семейств. Сервис предоставляет образцы кода для обоих случаев на вкладке «Выбранные семейства» — просто скопируйте и вставьте.

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

<html>
<head>
<link href=»https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Oswald|Roboto&display=swap» rel=»stylesheet»>
<style>
body {
font- семейство: «Робото», без засечек;
семейство шрифтов: «Open Sans», без засечек;
семейство шрифтов: ‘Montserrat’, без засечек;
семейство шрифтов: ‘Oswald’, без засечек;
размер шрифта: 18 пикселей;
}
</style>
</head>
<body>
<div>Подключение шрифтов на сайт!</div>
</body>
</html>

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

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

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

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

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

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

Комментарии (0)
Войдите чтобы оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *