Почему шрифты имеют значение: взгляд на UX и типографику

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

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

Почему типографика так важна для UX?

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

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

Изменяя типографику вашего веб-сайта, вы улучшаете:

• читабельность текста;
• доступность контента;
• юзабилити сайта;
• и общий графический баланс.

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

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

Как улучшить UX на вашем сайте, оптимизировав типографику?

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

1 Сведите к минимуму количество используемых шрифтов

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

Это именно то, чего вам следует избегать на своем веб-сайте.

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

Этот ремоделируемый веб-сайт использует нетрадиционный шрифт Six Caps для повышения визуальной идентификации веб-сайта. Этот шрифт в сочетании с Roboto Condensed позволяет получить два шрифта с одинаковой шириной символов.

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

Этот веб-сайт выглядит мягко и женственно благодаря шрифту Caveat Handwriting.

2 Используйте шрифты без засечек, чтобы улучшить читабельность

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

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

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

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

3 Помните о приличном размере шрифта

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

Если вы не хотите, чтобы ваши пользователи с трудом читали представленный вами текст или увеличивали его, выберите размер шрифта 16pt +. Такие размеры шрифта минимизируют нагрузку на глаза и помогают пользователям достичь своей цели на вашем веб-сайте без зрительного утомления.

Сайт Malcolmy использует удобочитаемую типографику размером 16pt для своих домашних страниц и страниц блога.

4 Соблюдайте оптимальную длину линии

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

Чтобы избежать обеих неблагоприятных ситуаций, придерживайтесь 60 символов в строке (для экранов планшетов/ПК).

Это изображение показывает, что тексты со слишком короткими или слишком длинными строками труднее читать, чем тексты, которые придерживаются «золотой середины» строки длиной ~ 60pt.

Оптимальная длина линии для мобильных устройств (например, смартфонов) короче. Чтобы текст был читабельным на маленьких экранах, в строке должно быть около 30–40 символов.

5 Используйте шрифты, которые хорошо работают в разных размерах

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

Чтобы обеспечить различимость элементов вашего веб-сайта, выберите шрифт разного размера и веса. Если вы выберете один из стандартных шрифтов, например, шрифт Google Fonts Roboto, вы увидите все его вариации. Некоторые шрифты имеют более 10 вариаций, некоторые — всего пару. Выберите шрифт с богатым набором вариаций, чтобы обеспечить разнообразное представление контента на вашем сайте.

Различные стили шрифта Roboto Google.

6 Сделайте правильный выбор цвета

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

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

Это оттенки серого, которые превосходят черный в обеспечении комфортного чтения.

Страница веб-сайта с темно-серым цветом текста слайдера.

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

7 Не экспериментируйте с высотой строки

Минимизация высоты строки для размещения большего количества контента не является хорошей практикой. Если строки расположены слишком близко друг к другу, читатель, скорее всего, перепрыгнет на предыдущую или последующую строку и застрянет. Расстояние между строками (интерлиньяж) должно быть на 30% больше высоты используемых символов. Такой интерлиньяж обеспечивает наилучшую читабельность контента и четкость его визуального восприятия.

Когда высота строки становится меньше 1,3 высоты символа, текст становится плохо читаемым.

8 Пусть ваши пользователи решают

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

Проведите A/B-тестирование вашего варианта типографики и посмотрите, какой из них снижает показатель отказов и приносит больше конверсий. Будьте готовы постоянно корректировать типографику, чтобы продолжать совершенствоваться и обеспечивать удобство для пользователей.

Подробнее об A/B-тестировании читайте в этой статье.

Выводы

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

Я что-то пропустил? Пожалуйста, дайте мне знать в разделе комментариев ниже. Ваши вопросы по теме также приветствуются.

Следите за обновлениями!