Иерархия в типографике

Типографическая иерархия упорядочивает текстовые элементы в зависимости от их важности.

Основной подход состоит из трех уровней: заголовок, подзаголовок и текст.

• Первый уровень — доминирующий заголовок. Основная составляющая в иерархии типографики, цель которой — привлечь внимание читателя. 

• Второй уровень — подзаголовок, описание, цитата и прочая информация, которая помогает пользователю определиться, интересен ли ему материал и стоит ли читать основной текст.

• Третий уровень — основной текст. Его задача — донести информацию в полном объеме. Правильно подобранный шрифт третьего уровня удобен для чтения, имеет меньшие размеры в сравнении с другими элементами. По данным института Баймарда, оптимальной длиной текста для чтения считается 50-60 символов в строке.  



Без применения иерархии текст скучный и однообразный, он не вызывает заинтересованности у пользователя



Выделение заголовка уже вносит иерархию в текст



Вместе с заголовком выделен подзаголовок и задан интервал между тремя уровнями. В тексте сразу прослеживается иерархия, он упорядочен и пользователю легче ориентироваться

Как применять иерархию в типографике

• Первое, что нужно сделать — найти подходящий шрифт, определиться с кегелем, шириной строк и размером междустрочных интервалов. 


На сайте getsignals.online четко прослеживается иерархия. Хорошо подобранный шрифт и размер междустрочных интервалов и интервалов между уровнями усиливают этот эффект

• Чтобы акцентировать внимание на заголовке или других, важных элементах текста, можно использовать простые способы выделения: контрастность, размер, начертание и «воздух». Можно сочетать варианты.


Контрастный яркий цвет на wildmgmt.es с легкостью выделяет нужную информацию даже в середине текста.

Самый простой способ привлечь внимание к заголовку — увеличить его размер. На сайте norebro.colabr.io крупный шрифт в жирном начертании выделяет заголовок

На сайте ksantika.com добавление «воздуха» между заголовком и основным текстом отделяет их друг от друга. Заголовок выглядит как доминирующая часть текста за счет размера шрифта

• Сочетайте две контрастные гарнитуры. Это позволит визуально разделить текстовые элементы.


Шрифт с засечками в заголовке и подзаголовке на сайте camillabellini.com, дает хороший контраст с основным текстом, набранным шрифтом без засечек

• Есть простой способ рассчитать размер типографических элементов: Заголовок больше основного текста на 220% Подзаголовок больше основного текста на 150%


Используя этот прием не сложно создать иерархию в тексте

• Определите на глаз, как выглядит текст, заметен ли заголовок, насколько комфортно его читать.


Явный контраст между заголовком, подзаголовками и основным текстом позволяет пользователю быстро находить нужную информацию на сайте smgengineering.ru