Полезное

6 способов работы с мелким шрифтом текста

IT-копирайтер, переводчик, контент-менеджер.

Тренды веб-дизайна

 

Одним из самых больших трендов в веб-дизайне сегодня является одна очень маленькая тенденция – так называемый «tiny text». Текстовые элементы, набранные шрифтом малого размера – это сегодня очень популярная идея, однако данная тема вызвала некоторые дебаты в дизайн-сообществе.

 

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

 

Организация и иерархия элементов

 Организация и иерархия элементов

 

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

 

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

 

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

 

Элементы, привлекающие внимание

 Элементы, привлекающие внимание

 

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

 

Mountain Dew, бренд, который не боится смелых заявлений, также использует мелкий шрифт в дизайне своего сайта. И это заставляет зрителя читать такие текстовые сообщения. Центральный элемент дизайна – ярко-зеленая буква X, она делит экран на несколько сегментов, в которых расположены текстовые блоки, которые по сравнению с этим элементов выглядят микроскопически. Тем не менее, это не мешает взгляду плавно скользить сверху вниз и слева направо. Пользователь видит логотип, читает заголовки и текст, а затем его взгляд останавливается на надписи-теге #DEW x NBA. И сразу все ясно. Более того, становится понятно, что мелкий шрифт был выбран специально. Это рискованный, но очень импонирующий целевой аудитории подход.

 

Интерактивная навигация

 Интерактивная навигация

 

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

 

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

 

Создатели сайта Magic of Lapland сумели найти баланс между маленькими текстовыми элементами и общей концепцией дизайна. Очень интересно смотреть на работу с интервалами, все сделано достаточно изобретательно. Простой, без засечек шрифт способствует повышению читаемости. Причем тини-текст имеет вдобавок свою собственную визуальную иерархию – над меню расположена контактная информация, текст, набранный еще более мелким шрифтом.

 

Демонстрация пространства

 Демонстрация пространства

 

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

 

Цветовые оттенки также должны использоваться с определенной целью. Прежде чем начать работу с тини-текстом, дизайнер должен задаться вопросом: а есть ли в этом необходимость? Поспособствует ли это лучшему пониманию дизайна? Если твердых ответов на этот вопрос нет, то «я просто так хочу» в расчет лучше не принимать.

 

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

 

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

 

Текст как второстепенный элемент

 Текст как второстепенный элемент

 

Иногда самый важный элемент на экране не имеет текстового сопровождения. Так что текст становится вторичным по отношению к визуальному элементу. Сайт Freelance TV – прекрасный пример того, как использовать шрифт небольшого размера для того, чтобы помочь пользователям увидеть наиболее важные части дизайна. Что является доминантой Freelance TV? Очевидно, что это видео. Тини-текст здесь используется только для того, чтобы привлечь внимание к дополнительной информации и призывает пользователя зарегистрироваться на сайте.

 

Дополнительный визуальный элемент

 Дополнительный визуальный элемент

 

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

 

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

 

Вывод

 

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

 

 

Источник

  • 5438