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

Почему сеточная структура и состав имеют решающее значение для типографики.

Состав и структура сетки являются жизненно важными факторами в построении эффективной коммуникации со шрифтом. В своей книге Thinking with Type (Размышляя над шрифтом), Эллен Люптон дает всестороннее объяснение преимущества работы с сеткой. Прежде всего она акцентирует внимание на гибкости сеток, на том, что сетки очень часто используются в интегрированных шрифтах и изображениях, и как они могут организовать сложную иерархию.

Существует неразрывная связь между шрифтом, размером и шириной столбца (то есть длиной строки). Представление веб-сайта на различных устройствах в зависимости от экрана может иметь некоторые различия. Однако хорошие дизайнеры — это прежде всего эксперты в создании оптимального визуального представления, которые могут тщательно подобрать и систематизировать объем информации для того, чтобы заинтересовать пользователей. Тем не менее, утратить связь с аудиторией слишком просто. Например, текст небольшого размера в длинных строках может сделать чтение проблематичным. Аналогично текст с большими символами и в сочетании с короткими строками вызовет при чтении не меньшее количество проблем.

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

Эти два примера демонстрируют проблемы подгонки текста с относительно небольшим размером шрифта в либо очень широкую, либо в очень узкую строку. Оба тяжелочитаемы и непривлекательны. (Дизайн Bright Pink). (Просмотреть увеличенную версию: изображение 1, изображение 2).

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

Когда текст с одинаковым приоритетом важности разбит на несколько столбцов, улучшается читаемость страницы и снижается нагрузка на глаза. (Дизайн Bright Pink) (Увеличенная версия изображения).

Структура сетки.

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

SilkTricky.

Структура сетки на SilkTricky представляет собой шесть столбцов, на которые разбит весь информационный поток. В последовательной системе типографики для заголовков наблюдается контраст светлых тонов шрифта Bookman Light Italic (для описания категорий) и создающего различный визуальный ритм шрифта Futura Condensed Bold.

(Увеличенная версия изображения).

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

(Увеличенная версия изображения).

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

Percussion Lab.

Разработчики Percussion Lab также довольно эффективно используют сетку. Структура данного веб-сайта представляет собой четыре гибких столбца, в которых представлены сеты от различных артистов (ди-джеев). Каждый рекомендуемый раздел гармонично вписывается в структуру столбцов и общую иерархию. Также выводится информация о дате, исполнителе, названии сета и жанре. При выборе одного из разделов структура страницы трансформируется в двухстолбцовое представление с трек-листом и разной полезной информацией.

(Увеличенная версия изображения).

(Увеличенная версия изображения).

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

The New Art Gallery Walsall.

Разработчики веб-сайта для The New Art Gallery Walsall в Великобритании использовали четкие и понятные буквы с засечками. Изменения в масштабе и удобная сетка — вот, что делает этот сайт действительно незабываемым. Основной текст размещается вдоль левой стороны совместно с другими элементами. В правом столбце находятся различные информационные ссылки.

(Увеличенная версия изображения).

(Увеличенная версия изображения).

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

Шрифт, который привлекает внимание пользователей.

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

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

Crockett & Jones.

Веб-сайт Crockett and Jones — это очень хороший пример того, какое положительное влияние может оказывать правильно подобранный шрифт. Эта английская компания занимается ручным изготовлением прекрасной обуви с 1876 года и её веб-сайт, несомненно, отражает это замечательное наследие с помощью прекрасно подобранных изображений и шрифтов. Название компании представлено на каждой странице, а отдельные буквы изображены в декоративном стиле викторианского дизайна. Шрифт Microsoft Georgia используется для основного текста, дополняя таким образом стилизацию названия компании и усиливая чувство исторического наследия, качества, общего оформления и внимания к деталям.

(Увеличенная версия изображения).

(Увеличенная версия изображения).

При написании этой части статьи я часто вспоминал известную работу Беатрис Вард (Beatrice Warde) под названием “Хрустальный кубок” (печать 1932 год), в которой она утверждает, что “Печатный текст должен быть невидимым”. Она конкретно рассматривает некоторые шрифты и использует метафорическое сравнение с вином в бокале. Суть ее послания заключается в том, что печатный текст никоим образом не должен мешать улавливать общий смысл. По мнению Вард шрифт должен дополнять и усиливать значение слов, а также улучшать общее понимание текста и оценку.

Эта идея также фигурирует в работе Марко Дугонджика (Marko Dugonjic) под названием “Проектирование для удобного чтения“: “Понимание смысла написанного текста возможно только при наличии хорошо продуманной и разборчивой типографики, которая упрощает процесс чтения”. Статья Вард была написана задолго до появления Интернета, однако описанные ею принципы актуальны и сегодня.

Комбинации типов шрифтов.

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

Four Seasons.

На веб-сайте Four Seasons используется выразительный контраст текстуры и тона, который достигается благодаря различным типам шрифтов. Здесь объединены множественные стили шрифта Garamond с различными вариациями шрифта Helvetica. Визуальный ритм создается благодаря использованию заглавных и строчных букв шрифта Garamond Italic, которые размещены бок о бок с мощными вертикальными штрихами и заглавными буквами шрифта Helvetica Condensed, которые значительно отличаются темпом и текстурой.

Посетите этот веб-сайт, чтобы увидеть выразительный контраст, который удачно укрепляет иерархию, подчеркивает стиль, качество и репутацию бренда Four Seasons. Существует множество вариаций шрифтов Garamond и Helvetica с различной толщиной и стилизацией, что делает их очень полезными для построения сложных иерархических структур.

(Увеличенная версия изображения).

(Увеличенная версия изображения).

Nowness.

В заголовках на веб-сайте Nowness, разработчики из CreateThe Group элегантно смешали заглавные и строчные буквы шрифта Garamond Italic с заглавными буквами шрифта P22 Underground Titling. Эта комбинация выделяет класс; изящные штрихи Garamond Italic имеют приятный текстурный контраст со сложными линиями P22.

(Увеличенная версия изображения).

Разработчики из CreateThe Group уделили особое внимание межсимвольным интервалам и изменениям при масштабировании. Также они тщательно контролируют тон и используют тщательно продуманную иерархию и стилизацию веб-сайта.

Barcamp Omaha.

Веб-сайт Barcamp Omaha, разработанный Grain and Mortar, представляет собой структуру, которая описывается как “антиконференция”. На этом веб-сайте пользователи могут общаться в неформальной обстановке, высказываться и обмениваться своими мнениями с другими людьми. На данном веб-сайте содержится значительное количество иллюстраций и объединены три хорошо подобранных, контрастных шрифта, два из которых, очевидно, были отобраны, так как потенциально основные шрифты.

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

Warhol Initiative.

Веб-сайт для Warhol Initiative, разработанный Toky, отличается типографической смелостью. Сжатые шрифты могут быть несколько проблематичными для чтения; слишком выразительные вертикальные штрихи букв в сочетании с компактными символами в некоторых случаях ухудшают разборчивость. Toky объединяет шрифт с засечками и резко отличающийся зауженный шрифт, показывая таким образом свое большое мастерство и дизайнерскую смелость.

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров