Когда мы говорим про кегли (размеры шрифта) в мобильных и планшетных разрешениях, речь идёт о том, как удобно и читабельно пользователям воспринимать текст на небольших экранах. У каждого устройства свои особенности, и важно правильно подбирать размер текста, чтобы сделать его комфортным для чтения.
Почему нельзя использовать слишком маленький кегль
- Плохая читабельность: Если шрифт слишком маленький, пользователю будет трудно читать текст без увеличения экрана. Это особенно важно для мобильных устройств, где экран ограничен.
- Усталость глаз: Мелкий текст вызывает напряжение глаз, особенно при долгом чтении, что снижает пользовательский опыт.
- Нарушение доступности: Люди с ослабленным зрением могут вообще не прочитать слишком мелкий текст, а это нарушает стандарты доступности, которые важны для современных сайтов.
Рекомендованные кегли для мобильных и планшетов
1. Заголовки (h1, h2, h3 и т.д.)
- h1 (основной заголовок): для мобильных устройств можно использовать 20-24px. На планшетах — чуть больше, например 24-28px.
- h2 (второстепенный заголовок): на мобильных — 18-22px, на планшетах — 22-26px.
- h3 и ниже: на мобильных — 16-20px, на планшетах — 18-22px.
Пример: Если ты делаешь сайт с блогом, заголовок статьи (h1) на мобильном может быть 22px, чтобы он выглядел выразительно и заметно, а на планшете можно увеличить до 26px, так как экран больше.
2. Основной текст (параграфы)
Для параграфов и основной информации:
- Мобильные устройства: от 14 до 16px. Меньше 14px не рекомендуется, так как текст станет трудным для восприятия.
- Планшеты: от 16 до 18px. На планшете экран больше, поэтому текст может быть чуть крупнее.
Пример: Основной текст на странице новостей можно сделать 16px для мобильных, чтобы было удобно читать, а на планшетах — 18px.
3. Мелкие элементы (второстепенный текст, подписи, ссылки)
Для мелких элементов (например, подписи к изображениям, сноски):
- Мобильные устройства: 12-14px. Меньше 12px не стоит делать, так как текст станет слишком мелким.
- Планшеты: 14-16px.
Пример: Если у тебя есть подпись к картинке, сделай её на мобильном 12px, чтобы она не отвлекала от основного контента, а на планшете — 14px.
Зачем нужно учитывать разные устройства?
- Мобильные экраны меньше, и пользователи обычно держат телефон на небольшом расстоянии от глаз. Поэтому кегль нужно делать крупнее, чтобы текст был легко читаем.
- Планшеты: экраны больше, но всё равно меньше, чем у компьютера. Для них шрифты могут быть чуть меньше, чем на мобильных устройствах, но всё равно должны оставаться крупными и комфортными для чтения.
Итоговая таблица с примерами
Как подбирать кегли
- Читабельность: Старайся всегда проверять, насколько текст удобно читать на разных устройствах.
- Гармония и иерархия: Заголовки должны быть заметно больше, чем основной текст, чтобы создавалась правильная визуальная иерархия.
- Тестирование: Проводя адаптацию, всегда тестируй сайт на реальных устройствах и экранах, чтобы убедиться, что текст выглядит хорошо и на телефоне, и на планшете.
Итог
Использование правильных кеглей для мобильных и планшетов — это ключ к хорошему пользовательскому опыту. Текст должен быть удобен для чтения, гармоничен по размеру и не перегружать экран. Главное правило: 14px — минимальный размер для мобильного, 16px — оптимальный для основной информации, а заголовки всегда должны быть заметно больше для создания иерархии.
