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

Анна Липатова
Анна Липатова
UX/UI дизайнер
17.05.2018

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

На сайте bee-creations.com заголовок за счет большого размера заметно выделяется в сравнении с основным текстом. Основной текст ненавязчив и отлично читается На сайте bee-creations.com заголовок за счет большого размера заметно выделяется в сравнении с основным текстом. Основной текст ненавязчив и отлично читается

Информация на сайте zsaritm.com разделена на блоки, в каждом из которых есть подзаголовок и основной текст. Все блоки объединяет заголовок. За счет этого создается понятная иерархия Информация на сайте zsaritm.com разделена на блоки, в каждом из которых есть подзаголовок и основной текст. Все блоки объединяет заголовок. За счет этого создается понятная иерархия

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

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

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

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

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

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

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

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

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

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

  • Контрастный яркий цвет на wildmgmt.es с легкостью выделяет нужную информацию даже в середине текста. Контрастный яркий цвет на wildmgmt.es с легкостью выделяет нужную информацию даже в середине текста. Самый простой способ привлечь внимание к заголовку — увеличить его размер. На сайте norebro.colabr.io крупный шрифт в жирном начертании выделяет заголовок Самый простой способ привлечь внимание к заголовку — увеличить его размер. На сайте norebro.colabr.io крупный шрифт в жирном начертании выделяет заголовок На сайте ksantika.com добавление «воздуха» между заголовком и основным текстом отделяет их друг от друга. Заголовок выглядит как доминирующая часть текста за счет размера шрифта На сайте ksantika.com добавление «воздуха» между заголовком и основным текстом отделяет их друг от друга. Заголовок выглядит как доминирующая часть текста за счет размера шрифта
  • Сочетайте две контрастные гарнитуры. Это позволит визуально разделить текстовые элементы.

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

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

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