25 лучших шрифтов Google для веб-дизайна и UX: бесплатная подборка

Inter, Roboto и Open Sans — самые используемые шрифты Google Fonts в открытом вебе, потому что они созданы для экранов, доступны во многих начертаниях и имеют открытую лицензию, разрешающую коммерческое встраивание. Приведённые ниже 25 вариантов расширяют это ядро в область шрифтов с засечками, брусковых, узких, моноширинных и адаптированных для доступности, чтобы дизайнер мог построить целый сайт — от геройских заголовков до сносок и примеров кода — не покидая каталога Google Fonts. Критериями являются данные об использовании, количество начертаний, оптический размер, языковое покрытие и то, как каждый шрифт выглядит в размерах для основного текста на базовой линии 16px.

Библиотека Google Fonts насчитывала 1 826 семейств в мае 2025 года и суммарно набрала более 50 триллионов просмотров на 50 миллионах веб-сайтов. Roboto лидирует по совокупным просмотрам — около 28 триллионов, а Inter за год, закончившийся в мае 2025 года, набрал 414 миллиардов просмотров, показав рост 57% год к году. Эти две цифры объясняют, почему большинство современных интерфейсов кажутся знакомыми. Приведённый ниже список рассматривает их как основу и добавляет ещё 23 шрифта, которые решают разные задачи: редакционные заголовки, доступность, код, брендинг.

Критерии отбора 25 шрифтов

Пять факторов сформировали шорт-лист. Первый — реальное использование. Шрифты, набравшие не менее миллиарда просмотров в год на Google Fonts, продвигались вверх, поскольку широкое распространение обычно коррелирует с качеством отображения в разных браузерах и операционных системах. Второй — количество начертаний. Шрифты, поставляемые с пятью и более начертаниями, дают дизайнерам пространство для иерархии без необходимости подключать второе семейство. Третий — оптический размер или экранная настройка. Inter, Roboto, Lexend и Atkinson Hyperlegible были созданы с явной целью отображения на экране с попиксельным рендерингом, что проявляется в том, как они выглядят при малом размере основного текста.

Четвёртым фактором стало языковое покрытие. Одной латиницы достаточно для большинства англоязычных сайтов, но расширенная латиница, кириллица и греческий важны для международного UX. PT Serif, Open Sans, EB Garamond и Atkinson Hyperlegible имеют хорошую поддержку нескольких письменностей. Пятым фактором стал размер файла после поднабора. Переменный шрифт в Google Fonts обычно занимает от 20 до 30 КБ после применения латинского поднабора, по сравнению с 400–800 КБ для эквивалентного набора статических файлов. Эта разница важна для показателей Largest Contentful Paint на мобильных устройствах.

Условия лицензирования были базовым фильтром. Каждый шрифт в списке распространяется по лицензии SIL Open Font License или Apache 2.0, которые разрешают коммерческое использование, модификацию и встраивание. Ни один из приведённых ниже шрифтов не требует указания авторства на отображаемой странице, хотя OFL просит, чтобы копии шрифта содержали оригинальное уведомление.

Сводная сравнительная таблица

Шрифт	Классификация	Начертания	Переменная ось	Лучше всего для
Inter	Нео-гротескный без засечек	9	Начертание, оптический размер	Основной текст, UI
Roboto	Нео-гротескный без засечек	6	Начертание, ширина (Flex)	Основной текст, UI
Open Sans	Гуманистический без засечек	7	Начертание	Основной текст, блог
Lato	Гуманистический без засечек	9	Только статические	Основной текст, бренд
Source Sans 3	Гуманистический без засечек	8	Начертание	Основной текст, документация
Work Sans	Без засечек, адаптированный для экранов	9	Начертание	Основной текст, UI
Nunito	Закруглённый без засечек	7	Начертание	Дружественный интерфейс
DM Sans	Геометрический без засечек	5	Начертание, оптический размер	Мелкий текст
Montserrat	Геометрический без засечек	9	Начертание	Заголовки, бренд
Poppins	Геометрический без засечек	9	Только статические	Заголовки, бренд
Plus Jakarta Sans	Геометрический без засечек	6	Начертание	UI для SaaS
Manrope	Геометрический без засечек	7	Начертание	UI для SaaS
Bebas Neue	Узкий акцидентный	1	Только статические	Плакаты, геройский
Oswald	Узкий без засечек	6	Начертание	Новостные заголовки
Archivo	Без засечек, готический	9	Начертание, ширина	Редакционные
Raleway	Акцидентный без засечек	9	Начертание	Бренд, геройский
Space Grotesk	Пропорциональный без засечек	5	Начертание	Технологический бренд
Merriweather	Брусковый с засечками для основного текста	4	Только статические	Длинный основной текст
Lora	Каллиграфический с засечками	4	Начертание	Редакционный основной текст
PT Serif	Переходный с засечками	2	Только статические	Многоязычный основной текст
Playfair Display	Переходный акцидентный с засечками	6	Начертание	Редакционный заголовок
DM Serif Display	Высококонтрастный с засечками	1	Только статические	Геройский заголовок
EB Garamond	Старостильный с засечками	5	Начертание	Чтение длинных текстов
Roboto Slab	Брусковый с засечками	9	Начертание	Заголовки с привязкой к основному тексту
JetBrains Mono	Моноширинный	8	Начертание	Блоки кода

Рабочие лошадки без засечек для основного текста и интерфейсов

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

1. Inter

Созданный Расмусом Андерссоном и выпущенный в 2017 году, Inter — это нео-гротескный шрифт без засечек, оптимизированный для текста пользовательского интерфейса малых размеров. Переменный файл содержит как ось начертания (от 100 до 900), так и ось оптического размера с тремя мастер-дизайнами для 100, 400 и 900. Inter используется по умолчанию в нескольких крупных дизайн-системах и набрал 414 миллиардов просмотров в Google Fonts за год, закончившийся в мае 2025 года.

Чисто сочетается с самим собой. Один файл Inter с переменным начертанием покрывает заголовки, основной текст и UI без второго семейства.

2. Roboto

Кристиан Робертсон разработал Roboto для Android 4.0 в 2011 году. Он поставляется в начертаниях Thin, Light, Regular, Medium, Bold и Black, а также в наклонных версиях, а в 2022 году получил переменную версию Roboto Flex. Roboto имеет наибольшее количество просмотров за всё время в Google Fonts — около 28 триллионов. Его двойственный характер — геометрический скелет с гуманистическими кривыми — придаёт ему нейтральность, которая адаптируется к большинству продуктовых контекстов.

Пример сочетания: Roboto для основного текста, Roboto Slab для H1.

3. Open Sans

Open Sans — это гуманистический шрифт без засечек, созданный Стивом Мэттесоном по заказу Google в 2011 году. Набор символов охватывает 897 глифов для латиницы, греческого и кириллицы. Он имеет открытые формы букв и слегка вертикальный наклон, что обеспечивает читаемость длинных абзацев на маленьких экранах.

Примечание дизайнера: Мэттесон основал семейство на своём более раннем Droid Sans, созданном для Android в 2008 году.

4. Lato

Lato — это гуманистический шрифт без засечек, разработанный польским дизайнером шрифтов Лукашем Дзедичем и выпущенный в 2010 году. Он поставляется в 9 начертаниях с соответствующими курсивами. Шрифт имеет полузакруглённые формы букв, которые воспринимаются как тёплые, не теряя структурной строгости.

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

5. Source Sans 3

Первый открытый шрифт Adobe, созданный Полом Хантом и выпущенный в 2012 году под названием Source Sans Pro. Source Sans 3 — это переименованный преемник с открытым исходным кодом. Шрифт поставляется в 8 начертаниях от ExtraLight до Black с соответствующими курсивами. Формы букв чистые и слегка узкие, поэтому текст набирается компактно, не кажется сжатым.

Используйте его там, где важна плотность документации, например в справках API или документации продуктов.

6. Work Sans

Адаптированный для экрана шрифт без засечек от Вэй Хуанга. Средние начертания (от 400 до 600) разработаны для размеров от примерно 14px до 48px. Более лёгкие и более жирные начертания имеют более декоративные начертания, поэтому дизайнеры могут переходить к акцидентному использованию, не меняя семейство.

7. Nunito

Вернон Адамс разработал Nunito как шрифт без засечек с закруглёнными концами. Закруглённые углы придают шрифту более мягкое ощущение по сравнению с Inter или Roboto. Nunito Sans, версия без закруглений, находится рядом с ним в каталоге Google Fonts для случаев, когда мягкие окончания кажутся слишком игривыми.

Сочетается с Lora для дружелюбной редакционной блог-системы.

8. DM Sans

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

Геометрические акцидентные шрифты без засечек

Эта группа склоняется к брендингу и заголовкам. Геометрия создаёт уверенное, современное впечатление. Использование для основного текста возможно, но открытые внутренние просветы могут казаться разреженными в длинных отрывках.

9. Montserrat

Хульета Улановски создала Montserrat в 2011 году, вдохновившись старыми плакатами и вывесками в районе Монтсеррат в Буэнос-Айресе. Семейство поставляется в 9 начертаниях. Геометрическая конструкция делает его частым выбором для геройских заголовков, фирменных знаков и слайдов презентаций.

Заметка из данных об использовании: Montserrat входит в тройку лучших шрифтов Google Fonts последние пять лет подряд.

10. Poppins

Геометрический гротеск от Indian Type Foundry, с указанием авторства Джонни Пинхорна и Нинада Кале. Poppins охватывает латиницу и деванагари, что редко встречается среди шрифтов Google Fonts. Поставляется в 9 начертаниях от Thin до Black. Буквенные формы почти монолинейны, что придает чистый, маркетинговый вид.

Пример сочетания: Poppins для заголовков, PT Serif для основного текста.

11. Plus Jakarta Sans

Спроектирован Гумпитой Рахаю из Tokotype. Выпущенный как SaaS-ориентированный геометрический гротеск, этот семейство набрало популярность в контексте стартапов и интерфейсов продуктов, где Inter кажется слишком избитым. Шесть начертаний с соответствующими курсивами.

12. Manrope

Manrope от Михаила Шаранды находится между геометрическим и гротескным. По духу ближе к коммерческим гарнитурам, таким как Circular, имеет слегка закрытые полуапроши, которые не позволяют геометрическим буквам выглядеть слишком открытыми при крупных размерах. Семь начертаний.

Узкие и жирные акцидентные гротески

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

13. Bebas Neue

Спроектированный Рёичи Цунекавой и добавленный в Google Fonts в 2018 году, Bebas Neue содержит только заглавные буквы и является узким. Версия в Google Fonts поставляется в единственном начертании. Bebas Neue Pro, продаваемая отдельно, добавляет строчные, но в большинстве редакторских применений Bebas Neue используется как полностью заглавный плакатный шрифт.

14. Oswald

Вернон Адамс переработал стиль Alternate Gothic для создания Oswald. Семейство поставляется в 6 начертаниях с полным набором строчных, что отличает его от Bebas Neue. Oswald подходит для газетных заголовков, шапок спортивных сайтов и любых макетов, требующих вертикального сжатия.

15. Archivo

Archivo вдохновлен американским готическим шрифтом XIX века. Релиз в Google Fonts поставляется как вариативный шрифт с осями ширины и начертания. Узкие начертания выглядят редакционно; обычные — как утилитарный гротеск для форм и плотных таблиц.

Выразительные и геометрические гротески

Два шрифта, решающие более узкие задачи, чем рабочие лошадки, но часто встречающиеся в современных бренд-системах.

16. Raleway

Изначально нарисован Мэттом Макинерни в 2010 году как единственное тонкое акцидентное начертание. Позже Пабло Импаллари и Родриго Фуэнсалида расширили семейство до 9 начертаний с курсивами. Raleway лучше всего смотрится при крупных размерах; тонкие и сверхлегкие начертания имеют фирменные лигатуры и слегка ар-дековую геометрию.

17. Space Grotesk

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

Антиквы для чтения с экрана

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

18. Merriweather

Sorkin Type разработал Merriweather как антикву для чтения с экрана. Шрифт имеет большую высоту строчных, слегка уплотненные формы и очень открытые апертуры. Это одна из самых часто цитируемых антикв для текста в блогах и публикациях. Четыре начертания от Light до Black.

19. Lora

Современная антиква с каллиграфическими корнями от Cyreal. По последним данным, Lora используется на более чем 1,5 миллионах сайтов. Она обладает достаточной теплотой для редакционного вида, не теряя регулярности, необходимой для абзацев. Четыре начертания с соответствующими курсивами.

20. PT Serif

PT Serif от ParaType поставляется с наборами латиницы, центральноевропейских языков и кириллицы. Семейство метрически совместимо с PT Sans, то есть оба семейства имеют одинаковую высоту строк и пропорции, поэтому они легко заменяют друг друга в системе. Два начертания с курсивами плюс два стиля для подписей.

Акцидентные антиквы для редакционных заголовков

Эти шрифты раскрываются при размере 32px и выше. Ни один из них не подходит для основного текста.

21. Playfair Display

Переходная антиква от Клауса Эггерса Соренсена. Дизайн отсылает к европейским шрифтам XVIII века и поставляется в 6 начертаниях. Высокий контраст штрихов и длинные верхние выносные элементы придают ему редакционный вид заголовка модного журнала. Обычно Playfair Display сочетают с чистым гуманистическим гротеском для основного текста.

22. DM Serif Display

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

23. EB Garamond

Георг Майр-Даффнер нарисовал EB Garamond как бесплатное научное возрождение шрифтов Клода Гарамона XVI века. Пять начертаний с соответствующими курсивами. Семейство поддерживает латиницу, греческий и кириллицу. Дизайнеры обращаются к нему, когда контекст длинного чтения требует литературного регистра.

Брусковые и моноширинные шрифты

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

24. Roboto Slab

Брусковая версия Roboto, выпущенная в марте 2013 года как шрифт по умолчанию для Google Keep. Семейство поставляется в 9 начертаниях от Thin до Black. Основное применение — компаньон для заголовков к основному тексту Roboto, где совпадающий скелет обеспечивает тесную визуальную связь.

25. JetBrains Mono

JetBrains выпустила JetBrains Mono в 2020 году под лицензией SIL Open Font License. Шрифт был нарисован для редакторов кода с максимальной высотой строчных для четкости при размерах 12–14px. Восемь начертаний с курсивами. Встроенный в любой документационный сайт или продукт, ориентированный на разработчиков, он придает блокам кода продуманный, инженерный вид.

Принципы сочетания заголовков и основного текста

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

Сильные сочетания работают на контрасте. Сочетайте высококонтрастную антикву с низкоконтрастным гротеском. Сочетайте геометрический гротеск с гуманистической антиквой. Сочетайте узкий акцидентный шрифт с широким рабочим. Сочетания в одном настроении обычно проваливаются, потому что страница теряет иерархию. Три надежных сочетания из списка выше: Playfair Display с Source Sans 3, Montserrat с Merriweather и Inter с самим собой в разных начертаниях.

Совпадение высоты строчных — второе правило. Если у шрифта для основного текста большая высота строчных, а у заголовочного — маленькая, то при одинаковом размере в пикселях основной текст будет выглядеть крупнее заголовков. PT Serif и PT Sans были спроектированы вместе специально для решения этой проблемы. Inter и Roboto Slab обладают достаточно схожей пропорциональной ДНК, чтобы вести себя аналогично. При сочетании шрифтов разных найденрий ставьте оба рядом в нужных размерах и проверяйте оптический баланс перед запуском.

Третье правило, которое стоит соблюдать, — ограничение начертаний. Используйте не более трех начертаний на шрифт на одной странице. Типичная настройка: Regular для основного текста, Medium для акцентов и Bold для заголовков. Добавление дополнительных начертаний не повышает ясность, а размывает иерархию.

Загрузка Google Fonts на сайте

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

Выберите шрифт и начертания на fonts.google.com и скопируйте сгенерированный тег link.

Вставьте тег link в head HTML перед основным файлом стилей.

Укажите шрифт в CSS с помощью объявления font-family.

Добавьте font-display: swap в блок @font-face (или положитесь на значение по умолчанию Google, которое уже включает swap).

Для самостоятельного хостинга скачайте файлы шрифтов через кнопку загрузки Google Fonts, поместите их в папку /fonts и вручную напишите блок @font-face.

Добавьте тег link с rel=preload для наиболее используемого файла шрифта, чтобы устранить смещение макета при первой отрисовке.

Подход с тегом link выглядит так:

<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Альтернатива CSS @import загружает те же файлы, но блокирует рендеринг до разрешения импорта:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); body { font-family: 'Inter', system-ui, sans-serif; }

Самостоятельно размещенный блок выглядит так и полностью исключает сторонний запрос:

@font-face { font-family: 'Inter'; src: url('/fonts/inter-variable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }

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

Вопросы производительности и конфиденциальности

Переменный шрифт заменяет от 4 до 9 статических файлов одним. После латинской подрезки типичный переменный шрифт из Google Fonts весит от 20 до 30 КБ, тогда как эквивалентный набор статических файлов — от 400 до 800 КБ. Такое сокращение полезной нагрузки напрямую влияет на Largest Contentful Paint в мобильных сетях. Для сайта, которому нужна только латиница, применение текстового URL-параметра в запросе к Google Fonts или запуск pyftsubset на самостоятельно размещённом файле уменьшает размер файла ещё на 70–90 процентов.

Свойство CSS font-display управляет тем, что происходит, пока файл загружается. Установка font-display: swap немедленно отображает запасной шрифт и заменяет его веб-шрифтом, когда тот готов, что обменивает короткую вспышку нестилизованного текста (FOUT) на более быстрый First Contentful Paint. Установка font-display: optional даёт браузеру около 100 миллисекунд на загрузку шрифта; если он не успевает, запасной шрифт фиксируется на всю загрузку страницы. Комбинация предзагрузки, optional и самостоятельно размещённого файла устраняет как FOIT (вспышку невидимого текста), так и FOUT на большинстве кэшированных посещений.

Проблема конфиденциальности специфична для CDN Google. В январе 2022 года Мюнхенский земельный суд постановил, что загрузка шрифтов Google с fonts.googleapis.com без согласия передаёт IP-адрес пользователя в США и нарушает GDPR. Истцу была присуждена компенсация в размере 100 евро, и суд указал на более высокие штрафы за повторные нарушения. Множество судов ЕС последовали этому прецеденту. Самостоятельное размещение файлов шрифтов решает проблему, поскольку при загрузке страницы не выполняется внешний запрос. Лицензия Open Font License явно разрешает такое распространение. Для сайта со значительным европейским трафиком самостоятельное размещение является более безопасным выбором по умолчанию в 2026 году.

Практическая настройка объединяет три шага: загрузите переменный шрифт из Google Fonts, выполните латинскую подрезку с помощью pyftsubset и разместите файл на том же домене, что и сайт, с длинным заголовком Cache-Control и тегом предзагрузки. Такая конфигурация обеспечивает полезную нагрузку менее 30 КБ, отсутствие сторонних запросов и отсутствие FOIT на кэшированных посещениях.

Часто задаваемые вопросы

Какой шрифт Google лучше всего подходит для веб-сайтов?

Inter, Roboto и Open Sans возглавляют списки использования и рекомендаций для общих веб-задач. Они были разработаны для экранов, поставляются во многих начертаниях и хорошо читаются в размерах основного текста от 16 до 18 пикселей. Inter показывает самый сильный текущий рост в Google Fonts, в то время как Roboto занимает наибольшую совокупную долю — примерно 28 триллионов просмотров за всё время.

Какой шрифт Google самый читаемый?

Inter и Open Sans чаще всего упоминаются как наиболее читаемые для основного текста благодаря высокой высоте строчных букв, открытым формам и равномерным интервалам. Для читателей с ослабленным зрением или трудностями при чтении Atkinson Hyperlegible (выпущен Институтом Брайля в 2021 году) и Lexend (разработан для улучшения навыков чтения) являются самыми сильными вариантами с точки зрения доступности в каталоге Google Fonts.

Можно ли использовать Google Fonts в 2026 году?

В целом да, но загрузка шрифтов с CDN Google без предварительного согласия была признана нарушением GDPR Мюнхенским земельным судом и рядом последующих дел. Самостоятельное размещение тех же файлов шрифтов устраняет этот риск, сохраняя преимущества лицензии Open Font License, и обычно улучшает производительность за счёт более строгого контроля кэширования.

Что такое переменный шрифт?

Переменный шрифт хранит несколько начертаний, ширин или оптических размеров в одном файле вдоль определённых осей. Один переменный шрифт может заменить от 4 до 9 статических файлов. После латинской подрезки типичный переменный файл весит от 20 до 30 КБ, тогда как эквивалентный статический набор — от 400 до 800 КБ. Inter, Roboto Flex и Plus Jakarta Sans поставляются как переменные шрифты в Google Fonts.

Как добавить шрифты Google на мой сайт?

Скопируйте сгенерированный тег link с fonts.google.com в раздел head вашего HTML, затем укажите шрифт в CSS с помощью объявления font-family. Тег link предпочтительнее @import, поскольку он не блокирует загрузку. Для лучшей конфиденциальности и производительности скачайте файлы и разместите их самостоятельно с помощью блока @font-face, включающего font-display: swap и тег link с rel=preload для основного файла.

Бесплатны ли шрифты Google для коммерческого использования?

Да. Подавляющее большинство шрифтов Google распространяются под лицензией SIL Open Font License, которая разрешает коммерческое использование, модификацию, встраивание и распространение. Небольшой набор семейств поставляется под лицензией Apache 2.0 с практически такими же разрешениями. Ни один шрифт в каталоге не требует указания авторства на отображаемой странице.