Типографика на сайте: что я проверяю в каждом макете

Большую часть сайта люди читают, а не разглядывают. Поэтому типографика влияет на впечатление сильнее, чем цвет кнопок или анимация. Вот что я проверяю в каждом макете, прежде чем отдать его в разработку

011. Длина строки

Самая частая ошибка, которую я вижу на сайтах: текст растянут на всю ширину экрана. На большом мониторе в строку помещается полторы сотни символов, глаз теряет начало следующей строки, и человек бросает читать

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

022. Размер и интерлиньяж

Основной текст на сайте я не делаю меньше 16 пикселей на телефоне, а на компьютере обычно от 18 до 20. Расстояние между строками для основного текста около 1,5–1,7 от размера шрифта. Для крупных заголовков наоборот, строки сближаю почти вплотную, иначе заголовок рассыпается на отдельные фразы

033. Плавная шкала размеров

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

Сейчас я задаю размеры плавно через CSS-функцию clamp: у каждого размера есть минимум для телефона, максимум для большого экрана, а между ними он растёт пропорционально ширине окна. Этот сайт так и сделан: все размеры шрифтов и отступов связаны между макетами шириной 390 и 1440 пикселей. На любом экране пропорции остаются такими, как в дизайне

044. Контраст

Серый текст на сером фоне выглядит стильно в макете и плохо читается в жизни, особенно на телефоне на солнце. Я проверяю контраст по стандарту WCAG: для обычного текста не меньше 4,5 к 1, для крупного не меньше 3 к 1. Подробнее об этом я писал в статье про доступность сайта

055. Иерархия

По странице должно быть понятно, что главное, что второстепенное, а что можно пропустить. Для этого обычно хватает четырёх-пяти размеров шрифта на весь сайт. Если размеров десять, иерархия пропадает, и страница выглядит шумной. Выделяю весом и цветом, а не новым размером

066. Висячие предлоги и союзы

В русском тексте короткие слова вроде «в», «и», «на», «для» не должны оставаться в конце строки. Глаз цепляется за них, и строка читается как оборванная. В полиграфии это правило давно известно, а на сайтах о нём часто забывают, потому что переносы зависят от ширины экрана

Решение простое: между коротким словом и следующим ставится неразрывный пробел, и при переносе они уходят на новую строку вместе. Вручную расставлять их в каждом тексте никто не будет, поэтому на своих сайтах я делаю это автоматически при сборке страницы. Так правило работает и для текстов, которые редакторы добавляют через админку

07Итог

Хорошая типографика незаметна: человек просто читает и не устаёт. Если хотите, чтобы тексты на вашем сайте читались так же, посмотрите, как я работаю над дизайном и разработкой сайтов, или напишите мне