Chulakov Design

H1

От качества типографики зависит восприятие 80% дизайна интерфейса. Типографика задает ритм повествования, настроение и характер страницы. Чтобы пользователь не терялся от страницы к странице, важно продумать Style page. Разберем базовые принципы построения типографики в интерфейсах. Основа типографики может отличаться от сайта к сайту, но структура чаще всего общая:

Заголовок (H1). Его задача привлечь читателя и направить на второй уровень. Большинство людей прочитают этот заголовок, и гораздо меньшее — прочитают остальной текст. Поэтому заголовок должен быть максимально контрастным, броским и информативным. Дополнительные заголовки (H2, H3, по необходимости — до H6). Цели дополнительных уровней схожи с целями главного заголовка, но в меньшем масштабе. Они направляют читателя и удерживают его внимание. Все эти уровни должны заинтересовать посетителя сайта, стимулировать его читать дальше. В то же время дополнительные заголовки должны быть достаточно контрастными с основным текстом и друг с другом.

Основной текст. Важнейший его параметр — удобочитаемость. Текст не должен сливаться с фоном, не должен быть слишком мелким, и точно не должен быть написан апперкейсом (капсом). Рекомендуемая ширина столбца для длинных текстов — до 600 px в зависимости от размера кегля.

Цитаты и врезки. Часто их делают отличными от основного текста, при этом допускаются различия по стилю от выбранного начертания, например, курсив.

Списки (нумерованные и маркированные). Приветствуется использование стиля обычного текста, но следует проверить межстрочные интервалы и параграфы для удобного чтения и визуального разделения каждого из пунктов списка.

Ссылки и кнопки. Разработать кликабельный стиль ссылки недостаточно, нужно также продумать обычное состояние, ховер, в частных случаях нажатое и неактивное (некликабельное) состояние.

Метки полей ввода формы. Здесь вам понадобятся плейсхолдеры, введенный пользователем текст, ошибки ввода и валидация.

Подписи к изображениям, мелкий текст и приглушенный текст. Эти элементы нужны далеко не для каждого сайта. Однако если таковые имеются, рекомендуется определиться с их видом и по возможности не плодить стили.