Playfair & Roboto
Идеально для издательств и модных блогов. Контраст тонких засечек и нейтрального гротеска создает элегантность.
Стиль: Элегантный
Гид по типографике
Основы
Основы
визуальной иерархии
Архитектура визуальных связей. Разбираем фундаментальные принципы работы с кеглем, интерлиньяжем и контрастом, чтобы ваш текст работал, а не просто висел на экране.
Введение в кегль и интерлиньяж
Типографика — это не просто выбор красивого шрифта. Это математика воздуха. Кегль (размер шрифта) определяет громкость голоса, а интерлиньяж (высота строки) — темп чтения.
«Золотым стандартом» для основного текста в вебе считается пропорция 1:1.5. Если у вас шрифт 16px, высота строки должна быть 24px. Нарушение этого правила превращает текст в «кашу», которую мозг считывает с трудом.
ПРАВИЛО МОДУЛЬНОЙ СЕТКИ
Используйте модульную шкалу (например, 1.25) для заголовков, чтобы сохранять ритм между разными уровнями иерархии.
Aa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
16px / 24px (1.5)
Таблица пар шрифтов
Сочетание антиквы (Serif) для заголовков и гротеска (Sans) для основного текста — классика, которая работает.
Space Grotesk & Mono
Для интерфейсов, SaaS-продуктов и технологических стартапов. Моноширинный шрифт добавляет «инженерности».
Стиль: Строгий
Didot & Helvetica
Высокая мода и искусство. Максимальный контраст штрихов заголовка против абсолютной нейтральности основного текста.
Стиль: Броский
16px
Мин. размер текста
45
Символов в строке
1.5
Оптимальный Line-height
7
Макс. шрифтов в макете
Инструменты для проверки
Прежде чем утвердить макет, проверьте его с помощью этих проверенных временем сервисов.
Modular Scale
Калькулятор гармоничных размеров шрифтов. Введите базовый размер (например, 16px) и коэффициент (1.25 или 1.618), чтобы получить идеальную шкалу заголовков.
Type Scale
Визуальный инструмент для создания CSS-переменных типографики. Позволяет экспортировать код прямо в проект.
Lipsum.pro
Генератор осмысленного текста-рыбы на русском языке. Забудьте про «lorem ipsum», используйте реалистичный контент для верстки.
Google Fonts Pairing
Подбор пар шрифтов прямо в браузере. Удобно для быстрой проверки контраста между заголовком и абзацем.
Скачать чек-лист «Типографика»
PDF-файл с готовыми таблицами контрастов, шрифтовыми парами и настройками кегля для веба и печати.
Получить PDF