Привет, друзья! Ловите базу про размер текста на сайте (да и в вебе). Когда-то об этом рассказали мне, теперь я делюсь с вами.
Основной текст — от 16 px до 20 px
Размер текста от 16 px до 20 px — это база, оптимальный размер для чтения для большинства людей. Если текст слишком мелкий, его могут просто проигнорировать, потому что читать неудобно.
Подбирайте размер основываясь на свою аудиторию. Например, в одном моем проекте основная ЦА — это люди в возрасте от 50 до 70 лет, поэтому шрифт для текста используется 20 px.
Помните, что разные шрифты с одним и тем же размером выглядят по разному. Поэтому перед тем как строго следовать правилу основной текст = 16 px, сравните его с «базовыми» шрифтами: Arial, Verdana, Times New Roman.
Подзаголовок — от 20 рх до 30 рх
Подзаголовки должны быть больше основного текста, чтобы они могли визуально от него отделяться — это облегчает восприятие структуры и помогает соблюдать правильную иерархию.
Заголовок всегда больше от 40 px
Напомню, что заголовки это h1, h2 и h3. В вебе почти нигде не используется заголовок h4-h6, они существуют, но больше как рудименты. Любой подзаголовок должен быть всегда меньше чем заголовок, к которому он относится.
Заголовки нужны чтобы привлечь внимание к ключевым моментам и помогают структурировать контент. Они как крючки, за которые цепляется внимание при сканировании страницы.
Сноски, подсказки и прочий маленький текст — от 12 px до 14 px
Весь второстепенный контент всегда меньше, чем обычный текст. Поэтому если основной текст 16 px, то такой текст должен быть меньше на 2-4 px.
Мета-текст до 12 px
Такой текст используется обычно для текста с низким приоритетом: даты публикации, авторы, категории и какие-то маленькие крючки для внимания.
Размер в мобильной версии — как сердце скажет
В данном случае ориентироваться нужно на тот шрифт, который вы выбрали и тестирование макета — заверстали блок, посмотрите на реальном устройстве как смотрится шрифт. Лично из моей практики:
- Заголовок для мобильной версии от 25 до 35 px
- Подзаголовок на 2-4 px меньше заголовка
- Основной текст от 14 до 16 px
- Сноски, подсказки и мета-текст до 12 px
Но я всегда смотрю на сам шрифт, как он ложится, какой для него будет оптимальный размер.
Какой у вас любимый шрифт или шрифтовая пара?
Кстати, о личном я пишу в телеграме, и оставляю там всякие заметки и бэкстейдж. Присоединяйтесь, будем дружить.