CSS · 20 минут

Шрифты: делаем текст удобным для чтения

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

Семейство

body { font-family: Inter, Arial, sans-serif; }

Браузер проверяет список слева направо. Всегда указывай запасной системный шрифт и общее семейство.

Размер и интервал

body { font-size: 16px; line-height: 1.6; }
h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; }

Для длинного текста обычно удобен line-height от 1.5. clamp() позволяет заголовку плавно подстраиваться под экран.

Насыщенность

font-weight принимает значения от 100 до 900, если они есть в выбранном шрифте. Не загружай лишние начертания: каждое увеличивает вес страницы.

Веб-шрифт

@font-face {
  font-family: 'SiteText';
  src: url('/fonts/site-text.woff2') format('woff2');
  font-display: swap;
}

Формат WOFF2 хорошо подходит для веба, а font-display: swap позволяет показать текст до загрузки файла.

Ошибки

• Слишком мелкий основной текст.
• Длинная строка во всю ширину экрана.
• Много разных семейств и начертаний.
• Недостаточный контраст текста и фона.

Стек шрифтов на случай, если файл не загрузился

Браузер берёт первый доступный шрифт из списка. Поэтому после фирменного шрифта всегда пиши похожую запасную гарнитуру и общее семейство: serif или sans-serif. Без этого страница на секунду или навсегда прыгнет в случайный системный шрифт.

Два семейства на странице — уже много. Одно для текста, одно для заголовков. Третье почти всегда шумит и ничего не объясняет.

body {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.55;
}

h1, h2 {
  font-family: "Manrope", "Segoe UI", sans-serif;
  line-height: 1.2;
  font-weight: 700;
}

Размер, насыщенность и интервал

rem считается от размера корня и нормально масштабируется, если человек увеличил шрифт в браузере. Фиксированные пиксели для всего текста эту настройку часто ломают. Для мелочи внутри компонента иногда уместен em: он зависит от размера родителя.

font-weight: 700 работает, только если этот насыщенный начертание реально загружено. Иначе браузер попытается синтезировать жирность, и буквы станут грязными. Подключай те начертания, которые используешь: обычно 400 и 700.

Как подключать веб-шрифт спокойно

• Возьми только нужные языки. Кириллица и латиница, если других алфавитов нет.
• font-display: swap показывает запасной шрифт сразу, а не прячет текст.
• Не подключай десять начертаний «на всякий случай»: каждое — отдельный файл.
• Проверь кавычки, тире и букву «ё». В некоторых шрифтах их просто нет.