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

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

Возврат к списку


Оставить заявку