Как структурировать эффективную типографскую иерархию

Эффективная организация контента в дизайне, чтобы его было легко понять и использовать, является одной из самых важных задач дизайнера. А поскольку большая часть контента, с которым работают дизайнеры, основана на тексте, создание эффективной типографской иерархии — одна из самых важных вещей, которым может научиться дизайнер.

Хотя практика и эксперименты с созданием эффективной иерархии — лучший способ действительно овладеть навыком, есть ряд рекомендаций, которые дизайнеры должны усвоить в первую очередь, прежде чем приступать к самостоятельной работе. В конце концов, невозможно эффективно нарушать правила, не зная сначала, что они из себя представляют.

Что такое типографская иерархия?

Начинающие дизайнеры иногда недооценивают необходимость использования иерархии типографики. Но посмотрите на этот пример:

Одна и та же информация передается с обеих сторон, но слева невозможно сказать, что есть заголовок, подзаголовок и основной текст. Справа сразу видно, что существует иерархия предоставляемой информации.

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

Есть множество вещей, которые составляют типографскую иерархию в Интернете. Это включает:

Размер. Размер, как правило, первое, к чему обращаются новые дизайнеры, пытаясь создать типографскую иерархию. И не зря: читатели легко узнают его. Больше = важнее, меньше = менее важно. Но размер может стать костылем, когда есть так много других вариантов создания иерархии.

Масса. Сделать шрифт жирнее или тоньше — еще один легко узнаваемый способ создать иерархию, которую легко распознать даже не дизайнерам.

Цвет. Цвет часто упускают из виду как способ создания иерархии, но это фантастический вариант. Даже использование более светлых и темных оттенков одного цвета может создать более четкую иерархию. Создание большего контраста между шрифтом и его фоном также может добавить типографской иерархии.

Контраст. Помимо контрастных цветов, ключом к созданию типографской иерархии является контраст между разными размерами шрифта, весом и стилем. Разница всего в один или два пункта в размере шрифта не создаст достаточного контраста, чтобы сделать иерархию очевидной для большинства пользователей. Вместо этого дизайнеры должны использовать легко различимые размеры, веса и стили, чтобы легко создавать контраст между такими вещами, как заголовки или основной текст.

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

Позиция и выравнивание. Расположение заголовков и подзаголовков, наряду с другим шрифтом, который дизайнер хочет выделить, может иметь большое влияние на то, где шрифт находится в иерархии. Например, центрирующий шрифт, как правило, выделяет его. Установка типа за пределами обычных полей страницы также может выделить этот тип в иерархии страницы.

Как создать типографскую иерархию (и визуально организовать дизайн)

У дизайнеров есть много вариантов, когда дело доходит до создания типографской иерархии. Но простое знание того, что входит в создание иерархии, само по себе не обязательно поможет дизайнерам создать эффективную иерархию.

Одна из первых вещей, которую следует учитывать, — сколько уровней иерархии должно быть в проекте. Как правило, каждый дизайн должен включать три уровня иерархии: заголовок, подзаголовок и основной текст. Оттуда дизайнер должен рассмотреть дополнительные уровни, которые могут быть необходимы. Это могут быть подписи, дополнительные подзаголовки, цитаты и метаинформация (например, авторы или даты в статье).

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

Тип Размер

Традиционные типографские масштабы помогают дизайнерам начать работу. Но это только отправная точка, и дизайнеры могут свободно экспериментировать с различными весами и стилями, отклоняясь от этих традиционных весов. Большинство основывают свой масштаб на размере основного текста и расширяются оттуда.

Классический типографский масштаб из «Элементов типографского стиля» знаком большинству дизайнеров, поскольку он, как правило, используется по умолчанию в большинстве программ обработки текста при выборе размера шрифта. Масштаб:

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60 и 72.

Существуют дополнительные примеры типографских масштабов, которые следуют различным математическим уравнениям для расчета увеличивающихся размеров.

Дизайнеры имеют тенденцию по умолчанию использовать размер основного текста 12 пунктов, но увеличение его до 14 или 16 (или даже до 24) может привести к повышению читабельности в зависимости от используемого шрифта. Личный веб-сайт Джеффри Зельдмана, например, использует размер шрифта 24 пикселя для основного текста, в то время как Vogue.com использует размер основного текста 19 пикселов.

Тем не менее, прежде чем завершить фактический масштаб, дизайнеры должны убедиться, что шрифты, используемые в дизайне, были доработаны. Различные шрифты могут казаться значительно больше или меньше, даже если технически они имеют «одинаковый» размер.

Выбор координирующих шрифтов

Что часто отличает «профессиональный» дизайн от любительского, так это сочетание шрифтов. Эффективное комбинирование шрифтов — это отчасти интуиция и отчасти наука, но есть несколько рекомендаций, которым дизайнеры могут следовать, чтобы комбинировать шрифты из разных семейств.

Во-первых, смешивать шрифты с засечками и без засечек значительно проще, чем комбинировать два шрифта с засечками или два шрифта без засечек. Но это не так просто, как просто взять любой шрифт с засечками и без засечек и соединить их вместе в дизайне.

Учитывайте контекст, в котором будут использоваться шрифты. Например, если дизайн должен быть легким и веселым, убедитесь, что шрифты соответствуют этому настроению. Если дизайн более серьезный, то и шрифты должны это отражать. Другими словами, настроение любых комбинируемых шрифтов должно совпадать.

Дизайнеры также должны использовать контраст в своих интересах. Сочетание тонкого и толстого шрифтов часто работает лучше, чем сочетание двух очень похожих по весу.

Ищите шрифты с похожей x-height (расстояние между базовой линией и средней линией строчных букв в шрифте). Это помогает предотвратить конфликт между шрифтами. Другие вещи, которые помогают предотвратить конфликт, включают похожий кернинг и формы символов. Шрифты с очень круглыми буквами не следует сочетать с более квадратными шрифтами.

Хотя рекомендации могут быть полезны при создании комбинаций шрифтов, ничто не заменит эксперименты и практику. Дизайнеры должны проводить время, экспериментируя со шрифтами и практиковаться в их комбинировании как можно чаще. Поиск нескольких резервных комбинаций шрифтов, которые могут работать в различных контекстах, также полезен для проектов, где бюджет и доступные ресурсы не позволяют использовать массу проб и ошибок.

Имея в руках эти рекомендации, дизайнеры могут следовать четырехэтапному процессу, описанному в источнике веб-типографики Better Web Type для создания эффективных комбинаций:

1. Найдите якорный шрифт для основного текста
2. Найдите несколько вторичных шрифтов для возможных комбинаций
3. Оцените комбинации
4. Исключите/выберите комбинации шрифтов

Дополнительные соображения

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

То же самое можно сделать с цветом. Подзаголовок с акцентным цветом будет выделяться больше, чем подзаголовок того же цвета, что и основной текст. Дизайнеры должны играть с цветом в своих подзаголовках, чтобы выделить более важный текст, не полагаясь исключительно на размер шрифта.

Интервал также можно использовать для разделения важных заголовков и подзаголовков. Создание большего пространства вокруг заголовков, чтобы они выделялись на фоне основного текста, делает их еще более заметными. Напротив, подзаголовки, которые располагаются так же, как и основной текст, становятся менее важными.

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

Заключение

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

Как только эти основы будут установлены в уме дизайнера (и на практике), он сможет более интуитивно создавать визуальные иерархии, которые следуют или нарушают «правила» по мере необходимости, чтобы создавать уникальные дизайны, которые вдохновляют и радуют пользователей.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Дизайн для удобства чтения — руководство по веб-типографике (с инфографикой)
• Понимание нюансов классификации шрифтов
• Основы дизайна — руководство по визуальной иерархии (с инфографикой)
• Стили шрифтов для веб-дизайна и полиграфического дизайна
• Улучшите свой UX с помощью четкой визуальной иерархии