Привет, я Максим, веб-разработчик. Шрифт на сайте — это не просто «буквы на экране». Типографика определяет читаемость, настроение и восприятие бренда. Неправильный шрифт может сделать дорогой сайт дешёвым, а правильный — превратить простую страницу в стильный продукт. При этом большинство владельцев бизнеса вообще не задумываются о типографике — выбирают «что-нибудь красивое» или оставляют дефолтный шрифт CMS. Разбираю подробно: какие шрифты подходят для веба, какие параметры критичны для читаемости и какие ошибки я встречаю чаще всего.

Два основных типа шрифтов для веба

Гротеск (sans-serif) — шрифт без засечек. Чистые, современные линии, отлично читаются на экранах любого размера. Inter, Roboto, Golos Text, PT Sans, Manrope. Подходят для абсолютного большинства коммерческих сайтов, интерфейсов, интернет-магазинов. Если вы не уверены в выборе — берите гротеск. Не ошибётесь.

Антиква (serif) — шрифт с засечками (маленькие горизонтальные штрихи на концах букв). Merriweather, PT Serif, Noto Serif, Lora. Ассоциируются с традицией, авторитетностью, экспертностью, академичностью. Хороши для юридических компаний, издательств, премиальных брендов, образовательных платформ, медицинских сайтов. Антиква в заголовках + гротеск в тексте — классическое сочетание, которое создаёт визуальный контраст и иерархию.

Для девяноста процентов бизнес-сайтов я рекомендую гротеск для основного текста и при желании антикву для заголовков. Это безопасный, проверенный выбор, который работает на всех устройствах и для всех аудиторий.

Кириллические шрифты: мой проверенный список

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

Inter — мой выбор по умолчанию для большинства проектов. Универсальный гротеск, разработанный специально для экранов. Отлично читается на любых размерах, качественная кириллица, бесплатный (Google Fonts и GitHub). Переменный шрифт (variable font) — один файл вместо нескольких, что экономит трафик.

Golos Text — российский шрифт от студии Paratype. Специально разработан для чтения с экранов, профессиональная кириллица, бесплатный для веба. Отличный выбор для государственных сайтов, образовательных платформ и сайтов, ориентированных на русскоязычную аудиторию.

PT Sans и PT Serif — классика российской цифровой типографики. Созданы по заказу «ПараТайп» для проекта «Общедоступные шрифты». Бесплатные, доступны на Google Fonts, безупречная кириллица. PT Sans — для текста, PT Serif — для заголовков или академических проектов.

Manrope — современный геометрический гротеск с характерной индивидуальностью. Хорошая кириллица, стильный вариант для IT-компаний, стартапов, креативных проектов. Бесплатный.

Roboto — шрифт от Google, используется в Android и Material Design. Нейтральный и читаемый, но кириллица чуть менее проработана, чем у Inter или PT Sans. Тем не менее — проверенный вариант с широкой поддержкой начертаний.

Размеры и интервалы: конкретные цифры

Типографические параметры критичны для читаемости. Вот значения, которые я использую на каждом проекте, основанные на рекомендациях WCAG и моём практическом опыте.

Основной текст — 16–18 пикселей. Шестнадцать пикселей — абсолютный минимум для комфортного чтения на мобильных устройствах. Если размер меньше — iOS автоматически масштабирует поля ввода при фокусе, вызывая неконтролируемый зум. Для длинных текстов (статьи блога, описания услуг) я ставлю восемнадцать пикселей — это заметно снижает утомляемость глаз.

Заголовки H1 — 32–48 пикселей на десктопе, 24–32 на мобильных. Крупные, заметные, с достаточным отступом от текста ниже. Разница между размером H1 и основного текста должна быть ощутимой — минимум в полтора-два раза. Если H1 — 20 пикселей при тексте 16 — иерархия теряется.

Межстрочное расстояние (line-height) — 1.4–1.6 для основного текста. Слишком плотный текст (line-height: 1.0–1.2) тяжело читать: строки сливаются, глаз теряет позицию. Слишком разреженный (line-height: 2.0) — теряется целостность абзаца, текст выглядит «рассыпавшимся». Для заголовков line-height может быть меньше: 1.1–1.3, потому что крупный текст не нуждается в таких больших интервалах.

Длина строки — 50–75 символов. Это оптимальный диапазон для чтения без утомления. Слишком длинные строки (более 90 символов) заставляют глаз «терять» начало следующей строки. Слишком короткие (менее 40) — слишком частые переносы взгляда. Для текстового контента я использую контейнер с max-width: 720 пикселей — это надёжно укладывается в оптимальный диапазон.

Подключение шрифтов: self-hosted лучше Google Fonts

Два основных способа подключения шрифтов на сайте. Google Fonts — простейший вариант: добавляете ссылку в head или @import в CSS, и шрифт грузится с серверов Google. Минус — зависимость от внешнего сервиса, дополнительный DNS-резолвинг и HTTP-запрос, и потенциальные проблемы с GDPR/152-ФЗ (данные пользователя отправляются на серверы Google).

Self-hosted — мой предпочтительный подход. Скачиваете шрифт (с Google Fonts, GitHub или сайта разработчика), размещаете файлы на своём сервере, подключаете через правило @font-face в CSS. Шрифт загружается с вашего домена — быстрее (нет дополнительного DNS), надёжнее (не зависите от внешнего сервиса), и нет вопросов с приватностью.

Формат файлов: WOFF2 — единственный, который реально нужен в 2026 году. Современный, сжатый, поддерживается всеми актуальными браузерами. WOFF — как fallback для экзотических старых браузеров. TTF и OTF — не нужны для веба.

Обязательно добавляю font-display: swap в правило @font-face. Это говорит браузеру: показывай текст системным шрифтом, пока кастомный не загрузился. Без этого атрибута пользователь видит пустое место вместо текста на время загрузки шрифта (FOIT — Flash of Invisible Text) — неприятный опыт, особенно на медленном мобильном интернете.

Для дополнительного ускорения добавляю preload для основного шрифта: `<link rel="preload" href="/fonts/inter-v.woff2" as="font" type="font/woff2" crossorigin>`. Шрифт начинает загружаться параллельно с HTML, и к моменту рендеринга текста уже готов.

Типичные ошибки, которые я нахожу на аудитах

Слишком много шрифтов. Два шрифта — максимум для большинства проектов. Один для заголовков, один для текста. Три и больше — визуальный хаос, плюс каждый дополнительный шрифт — дополнительный вес страницы (50–200 КБ в зависимости от количества начертаний).

Тонкое начертание на мобильных. Font-weight: 300 (light) выглядит элегантно на ретина-дисплее дизайнера, но плохо читается на бюджетных смартфонах с экранами низкого разрешения. Для основного текста — минимум font-weight: 400 (regular). Light-начертания допустимы только для крупных заголовков.

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

Отсутствие fallback-шрифтов. Если кастомный шрифт не загрузился — браузер покажет системный. Без указания fallback в CSS (font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) может подставиться Times New Roman — и весь дизайн поедет.

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