Типографика влияет на впечатление от сайта едва ли не сильнее, чем цветовая палитра — читать неудобно набранный текст утомительно, даже если остальной дизайн выглядит аккуратно. При этом базовые правила хорошей веб-типографики довольно простые и быстро запоминаются.
Font-family задаётся не одним шрифтом, а списком через запятую — если основной шрифт по какой-то причине не загрузился, браузер попробует следующий в списке, а в конце обычно указывают общее семейство вроде sans-serif как последнюю подстраховку.
Межстрочный интервал, line-height, часто недооценивают, хотя именно он сильнее всего влияет на удобство чтения длинных абзацев. Слишком плотные строки утомляют глаза, а слишком разреженные разрывают зрительную связь между строками одного абзаца. Значение около полутора для основного текста — хорошая отправная точка.
Ширина текстового блока тоже важна: строка длиннее примерно семидесяти пяти символов читается заметно тяжелее, потому что глазу сложнее найти начало следующей строки. Именно поэтому основной текст статей редко растягивают на всю ширину широкого экрана, а ограничивают через max-width.
Подключение веб-шрифтов через @font-face или сервисы вроде Google Fonts расширяет выбор далеко за пределы системных шрифтов, но добавляет вес странице — каждый подключённый шрифт нужно скачать, и на медленном соединении это заметно замедляет первую отрисовку текста.
Подробное руководство по типографике, интервалам и подключению шрифтов собрано в разделе про стилизацию текста на MDN.
Заголовки разных уровней обычно выделяют не только размером, но и весом шрифта и отступами сверху и снизу — эта визуальная иерархия помогает пробежать глазами по странице и понять её структуру ещё до того, как читатель вникнет в сам текст.
