Просмотр насыщенности шрифта

• Мгновенный предпросмотр весов: сразу показывайте все доступные веса любого шрифта Google Fonts рядом друг с другом. Наш просмотр насыщенности шрифта загружает выбранный шрифт напрямую из Google Fonts и отображает все веса — от Thin (100) до Black (900) — в одном окне, без перезагрузки страницы.
• Безопасный онлайн-просмотр насыщенности шрифта: наш просмотр работает полностью в вашем браузере. Шрифты загружаются напрямую с CDN Google Fonts — никакие данные не отправляются на серверы, а ваш текст для предпросмотра остаётся полностью приватным на вашем устройстве.
• Просмотр насыщенности шрифта без установки: пользуйтесь нашим просмотром прямо в любом браузере — без загрузок, плагинов и аккаунта. Смотрите веса любого шрифта Google Fonts с любого устройства и где угодно, совершенно бесплатно.
• Несколько режимов отображения: выбирайте между «Стопкой» (строки в полном размере), «Компактным» (строки меньше — для быстрого сравнения) и «Сравнением». Фильтруйте только доступные веса, меняйте размер предпросмотра от 14 px до 48 px и копируйте объявление CSS font-weight для любого веса в один клик.

• Выбор подходящего веса для интерфейса: используйте наш просмотр, чтобы сравнить, как шрифт смотрится в разных весах, прежде чем закреплять его в дизайн-системе. Проверьте, что лучше для заголовков — 500 или 600, и не слишком ли лёгкий 300 для основного текста в нужном размере.
• Проектирование типографической шкалы: спроектируйте полную типографическую шкалу, заранее увидев, как взаимодействуют веса. Наш просмотр насыщенности шрифта показывает все веса рядом, чтобы выбрать подходящее сочетание для заголовков, подзаголовков, основного текста и подписей.
• Поиск шрифтовых пар: изучайте шрифтовые пары, просматривая диапазон весов каждого кандидата. У некоторых шрифтов ограниченная поддержка весов — наш просмотр наглядно показывает, какие веса доступны, а какие нет, и вы не обнаружите пробелы уже после внедрения.
• Проверка доступности и читаемости: проверяйте читаемость веса шрифта в разных размерах. Просмотр позволяет менять размер от 14 px до 48 px и одновременно сравнивать все веса, помогая убедиться, что выбранный вес читается в мелком размере для основного текста.
• Справка по CSS font-weight: используйте наш просмотр как быструю справку при написании CSS. Каждая карточка веса показывает числовое значение и название (Thin, Light, Regular, Medium, Bold и т. д.) с кнопкой копирования объявления CSS font-weight в один клик.
• Презентации для клиентов и обзоры дизайна: показывайте клиентам весь диапазон весов предлагаемого шрифта на ревью дизайна. Наш просмотр отображает шрифт с реальным текстом бренда клиента, поэтому легко продемонстрировать, как он будет выглядеть в разных контекстах интерфейса.

Просмотр насыщенности шрифта показывает все доступные варианты насыщенности начертания рядом друг с другом — от Thin (100) до Black (900), — чтобы вы могли сравнить их визуально, прежде чем решать, какие веса включить в проект. Не все шрифты поддерживают все девять весов; наш просмотр чётко обозначает, какие веса доступны у каждого шрифта Google Fonts, и делает недоступные серыми. Все шрифты загружаются напрямую с CDN Google Fonts — никакие данные не отправляются на серверы, а ваш текст для предпросмотра остаётся приватным на вашем устройстве.

1. Выберите шрифт: найдите любой шрифт Google Fonts по названию в поле поиска. Просмотр насыщенности шрифта показывает более 80 доступных шрифтов с их категорией и числом весов. Нажмите на любой шрифт, чтобы загрузить его мгновенно.
2. Посмотрите все веса: просмотр насыщенности шрифта отображает все веса (100-900) рядом с вашим текстом для предпросмотра. Доступные веса показываются полностью, недоступные становятся серыми. Включите «Только доступные», чтобы скрыть недоступные.
3. Скопируйте и используйте: нажмите значок копирования на любой карточке веса, чтобы скопировать объявление CSS font-weight. Раздел справки по CSS внизу содержит URL @import Google Fonts и все доступные значения font-weight, готовые к вставке в вашу таблицу стилей.

• 100 — Thin: самый лёгкий вес. Используйте умеренно, только для крупных акцидентных надписей — для основного текста в мелком размере он слишком лёгкий.
• 300 — Light: немного легче обычного. Хорошо подходит для подзаголовков и второстепенного текста в паре с более тяжёлым весом для заголовков.
• 400 — Regular: вес по умолчанию. Стандартный выбор для основного текста и основа большинства типографических шкал.
• 700 — Bold: стандартный полужирный вес. Используется в заголовках, акцентах и подписях интерфейса. Самый востребованный вес после Regular.

Каждый вес, загружаемый из Google Fonts, увеличивает число сетевых запросов страницы и общий размер файлов шрифтов. Для большинства проектов достаточно 2-3 весов — обычно Regular (400), Medium или SemiBold (500-600) для подписей интерфейса и Bold (700) для заголовков. Не загружайте неиспользуемые веса. Наш просмотр насыщенности шрифта помогает точно определить, какие веса вам нужны, прежде чем добавлять их в URL импорта Google Fonts, и избежать лишней загрузки, замедляющей страницу.