Иерархия текста в дизайне
Для чего нужна иерархия в текста?
Благодаря ей пользователь понимает, с чего начать читать текст, что в нем важно и на что в первую очередь нужно акцентировать внимание.
Типографическая иерархия — это система, которая упорядочивает текстовый контент для его удобного восприятия, в первую очередь, посредством модификаций и комбинации шрифтов.
Задача дизайнера управлять вниманием читателя, заставить изучать текст в том порядке, который вы для него задали.
3 уровня иерархии текста:
Основной уровень
Основной уровень — это текст большого размера — заголовок, область его размещения — всё, что вовлекает читателя.
Второй уровень
Второй уровень типографической иерархии — это кусочки информации, которые помогают читателю оставаться на странице. Это такие элементы, как подзаголовки, описания, цитаты, инфографики, и другие небольшие блоки текста, которые добавляют информацию к основному уровню иерархии.
Третий уровень
Третий уровень типографической иерархии — это основной текст дизайна. Это может быть, даже, самый мелкий текст, но для сохранения читабельности он должен быть достаточно большого размера. Стиль начертания шрифта для этого уровня иерархии должен быть простым, и оставаться одинаковым на каждой странице.
Так же можно выделить другие уровни:
Другие уровни включают в себя эффекты, примененные к типографике третьего уровня. Такие эффекты, как полужирный шрифт, курсив, подчеркивание и цвет, могут привлечь внимание к конкретным областям основного текста. Эти эффекты нужно использовать экономно, и только в нескольких словах. Примеры других уровней иерархии включают в себя подчеркнутые ссылки, выделенные жирным шрифтом, или цветом слова.
Выберите базовый размер
Минимальный размер для основного текста на сайте — 14 пикселей.
Чаще всего используют кегли* от 16 до 18 пикселей Затем определите масштабы всех элементов (заголовки, подзаголовки и т.д.) В этом вам может помочь сервис type-scale.com
type-scale.com - помогает наглядно увидеть и выбрать шаг* между элементам.
Кегль* — размер типографского шрифта по вертикали, включающий верхнюю и нижнюю грань отпечатка буквы с учётом её верхнего и нижнего выносных элементов
Шаг* — это число на которое нужно умножить и делить размер основного текста, чтобы получить систему
Подберите нужный шаг
Например шаг 1,618 — значит, что каждая строка больше предыдущей в 1,618 раза. Чем больше шаг, тем больше контраст между элементами соответственно. Type scale дает возможность выбрать из 8 типов шагов, также их можно вводить вручную.
1,333 — идеальная четверть
1,414 — удлинённая четверть
1,618 — золотое сечение
Используя эту систему можно выделить 5 самых популярных размеров шрифтов для заголовков и текста:
Разделяй текст и властвуй над вниманием. Больше полезной информации у нас в telegram канале https://t.me/apollo_myers