Советы по типографской иерархии для создания более визуально привлекательного и читаемого текста
Автор: Сюзанна Скакка Опубликовано 16 сентября 2024 г. 0 комментариев
Есть ли у вас процесс создания типогра
фской иерархии на ваших веб-сайтах и в приложениях? Если нет, то продолжайте читать. В этом посте мы рассмотрим три шага, необходимые для определения уровней и компонентов текста, их размера и масштабирования, а также стиля по мере необходимости.
Как писатель, я учитываю
иерархию всякий раз, когда создаю новый контент. Никто не будет читать каждое написанное мною слово, и существует множество исследований, подтверждающих это. Вот почему типографская иерархия так важна.
Единственное, мы, писатели, можем с этим сделать очень мало.
Когда я пишу контент для веб-страницы, публикации в блоге или страницы продукта электронной коммерции в Документах Google, я могу применить базовый стиль. Я использую разные уровни заголовков для организации контента. Я добавляю жирный шрифт или курсив для оформления кавычек или подписей. Что-то в этом роде.
Однако прежде чем мой контент и рекомендуемую
иерархическую структуру можно будет опубликовать в Интернете, необходимо сделать еще кое-что. Именно здесь в игру вступают вы как веб-дизайнер или разработчик.
В этом посте мы рассмотрим, что такое типографская иерархия, почему она важна
а также основной процесс, который вы можете использовать для создания уникальной типографской иерархии для каждого создаваемого вами веб-сайта.
Почему важна типографская иерархия?
Типографская иерархия относится к тому, как текст организован и стилизован. Цель состоит в том, чтобы улучшить удобство сканирования и чтения для пользователей за счет. Pазработки различных типов текста уникальным, но последовательным образом.
Это пример из недавней записи в блоге под названием «Совершенствование управления коллекциями с помощью .NET MAUI CollectionView». Слева — скриншот первых пяти абзацев поста вместе с первым заголовком H2. Справа тот же текст без каких-либо стилей:
Параллельное сравнение текста из сообщения в блоге Telerik. Слева находится снимок экрана, показывающий, как текст организован и оформлен на странице в данный момент. Текст сводки сообщения больше обычного основного текста. Заголовок «План» больше, чем резюме и основная часть, а также жирнее.
Прочитав этот пост в блоге, вы увидите, как стилизация всего лишь двух текстовых элементов имеет огромное значение. То, что выглядит как бесконечная стена абзацев справа, превратилось в более организованную страницу слева.
Поскольку текст абзаца занимает большую часть страницы, давайте использовать его в качестве базовой линии. Шрифт называется Metric, размер текста — 20 пикселей.
используется тот же шрифт.
Однако это 28 пикселей. Эта разница в База данных Botim — это современное решение. Aля управления данными, которое позволяет пользователям легко и эффективно организовывать и извлекать данные из хранилища. Независимо от того, являетесь ли вы владельцем малого. Aизнеса База данных Ботима или крупной корпорацией, удобный интерфейс и мощные функции Botim. Database помогут вам оптимизировать процессы управления данными. Данными можно легко управлять размерах заставляет наши глаза и мозг сосредоточиться в первую очередь на кратком изложении.
В заголовке H2 «План» также используется метрический шрифт. Его размер составляет 45 пикселей, что значительно больше, чем другие текстовые элементы на странице (кроме заголовка H1 вверху). К нему также применен уникальный стиль, например, больший вес и меньшее расстояние.
Большинство из нас пользуются Интернетом достаточно долго, поэтому мы, естественно, ищем эти визуальные подсказки. Они упрощают сканирование страницы и позволяют получить общее представление о том, что мы видим. Но их было бы нелегко найти или прочитать, если бы дизайнеры не уделили им особого внимания.
Как построить типографскую иерархию для вашего сайта
Есть три основных шага, которые помогут вам создать уникальную типографскую иерархию для вашего веб-сайта или приложения.
1. Определите, сколько уровней вам нужно.
Обычно веб-сайт имеет минимум три уровня иерархии. Давайте воспользуемся страницей «Кто мы» Ahead Digital, чтобы продемонстрировать, каковы эти основные уровни:
На странице «Кто мы» Ahead Digital есть раздел «Наши убеждения». В левой части экрана мы видим заголовок H2 под названием «Наши убеждения». Справа мы видим три заголовка H3 с Список адресов электронной почты библиотеки по отраслям описаниями абзацев: «Мы не сорсинговая компания»,
Уровень 1
Заголовки H1 и H2 всегда являются частью первого уровня.
H1 обычно представляет собой название страницы, продукта или сообщения в блоге. Кроме того, на странице обычно есть несколько заголовков H2, сигнализирующих о начале и конце основных agb directory разделов. H2 помогают поддерживать порядок, давая людям подсказки, просматривающие страницу, чтобы узнать, о чем идет речь.
Это самые важные фрагменты текста на странице, поэтому они должны иметь наиболее выраженный дизайн.
На скриншоте, который мы видим выше, «Наши убеждения» в левой части раздела — это H2.
Уровень 2
Остальные заголовки находятся на втором уровне.
Обычно мы не заходим за рамки H3 и H4, если только контент. Hе очень сложен и его не нужно разбивать на все более мелкие категории. Если присутствуют H5 и H6, они обычно
