Содержание статьи:
Создание дизайна сайта предполагает учет множества нюансов, в том числе, выбор правильной типографики. Неправильные шрифты, нечитаемые строки или хаотичные отступы могут отпугнуть пользователей, даже если сама страница выглядит стильно. Разберем ключевые правила типографики, которые помогут сделать текст на сайте удобным, эстетичным и эффективным.
Выбор шрифтов
Основные принципы при выборе данного параметра:
- Используйте не более 2–3 шрифтов, один для заголовков, второй — для основного текста, третий — для акцентов.
- Сочетайте шрифты по контрасту для удержания внимания.
- Избегайте «кричащих» декоративных шрифтов — они ухудшают читаемость.
Размер и иерархия текста
Оптимальный размер для основного текста — 16–20 px, меньше — сложно читать на мобильных.
Размер заголовков зависит от того, где они расположены:
- На главное странице — 32–40 px.
- Подзаголовки разделов — 24-28 рх.
- Второстепенные подпункты — 20–22 px.
- Подписи, сноски и другой мелкий текст — 12–14 px.
Следите за тем, чтобы размеры были пропорциональными — заголовок H1 не должен быть в 5 раз больше основного текста.
Интерлиньяж (межстрочный интервал) и кернинг
Оптимальный интерлиньяж: 1.4–1.6 от размера шрифта, например, для текста 16 px — 22–26 px между строками.
Кернинг — это расстояние между буквами. Его можно немного увеличить для заголовков —0.5–1 px. В основном тексте лучше использовать стандартное значение или слегка его уменьшить.
Соблюдайте баланс, слишком плотный или разреженный текст ухудшает читаемость.
Длина строки и выравнивание
Чтобы текст было удобно читать, идеальная длина строки должна быть 50–75 символов при ширине текстового блока 600–800 px.
Выравнивание по левому краю — лучший вариант для основного текста. По ширине— можно использовать, но только с правильно настроенным переносом слов, а по центру подходит только для коротких заголовков и цитат.
Контрастность и цвет текста
Минимальный контраст — 4.5:1 (WCAG-стандарт доступности).
Наиболее выигрышные сочетания:
- Черный (#000000) на белом (#FFFFFF).
- Темно-серый (#333333) на светлом фоне.
- Белый текст на темном фоне (но не ярко-красном или синем).
Отступы и структура текста
Правила оформления абзацев:
- Отступ между ними — 1.5–2 высоты строки.
- Отступы вокруг заголовков — больше, чем между абзацами.
Для маркированных списков отступ слева — 20–40 px, а расстояние между пунктами — 8–12 px.
Адаптивная типографика для мобильных устройств
Для текста на смартфонах:
- Уменьшайте размер шрифта на 10–15% (но не менее 14 px).
- Увеличивайте межстрочный интервал.
- Используйте короткие абзацы (3–4 строки).
Тестирование
После завершения работ, проверьте удобно ли читать текст. Для этого попросите 3–5 человек прочитать текст и оценить удобство.
Используйте Readable для анализа удобочитаемости и Figma Mirror для просмотра текста на реальных устройствах.
Если вы хотите, чтобы ваш сайт работал и приводил клиентов, важно учитывать детали. Обращайте внимание на нюансы и соблюдайте правила создания удобного дизайна — так пользователям будет комфортно на вашей странице и это увеличит среднее время пребывания на ней.
Если вы не знаете, как сделать хороший дизайн, но хотите, чтобы сайт работал, обращайтесь в Darvin Digital. Наши специалисты разработают для вас удобный интерфейс и создадут дизайн, соответствующий принципам маркетинга.