- Руководство по использованию типографии в Интернете
- Заголовки
- Основной текст
- Пользовательские Шрифты
- Going Mobile
- Цвета шрифта
- Забрать
- Рекомендации и где узнать больше
Сказал Билл Гейтс; «Контент - это король», и когда дело доходит до пользователей онлайн, это 100% правда. Предоставление отличного пользовательского опыта означает не только доставку отличного контента, но и предоставление этого контента в удобном и полезном формате, который поощряет чтение и взаимодействие, а не щелкает по сайту, потому что он нечитабелен.
Следовательно типография в Интернете становится жизненно важной частью работы дизайнера. Больше, чем любая другая часть дизайна - выбор правильных шрифтов и правильное отображение этих шрифтов создаст или нарушит пользовательский опыт.
«Типография - это использование шрифта для пропаганды, общения, прославления, обучения, разработки, освещения и распространения. По пути слова и страницы становятся искусством ». Джеймс Феличи, автор« Полного руководства по типографии ».
Автор / правообладатель: Кевин Кирше. Условия авторского права и лицензия: CC BY-NC-SA 2.0
Типография имеет долгую и интересную историю. Это было важно с момента производства печатных СМИ и не является чем-то новым для Интернета.
Руководство по использованию типографии в Интернете
Есть много рекомендаций, которые могут быть использованы для информирования о вашем выборе типографии онлайн. Также стоит отметить, что любое (и даже все) из этих руководящих принципов может быть нарушено, если вы хотите создать эффект или если ваши пользователи предпочитают это. Не существует модели типографии «один размер для всех» и пользовательское исследование в этой области UX так же важно, как и в других областях UX.
Итак, давайте посмотрим, как получить максимальную отдачу от типографии онлайн:
Заголовки
Заголовки являются важной частью работы с контентом - их нужно писать, чтобы привлечь внимание пользователя, или они быстро перейдут к другому занятию. Тем не менее, они также должны отображаться правильно, а это означает, что нужно правильно подобрать размер шрифта и сам шрифт.
Типичный заголовок заголовка онлайн теперь занимает 38 пикселей! Это значительное увеличение за последнее десятилетие или около того. Это также означает возросшее понимание того, что, если вы не привлечете внимание пользователя - они уйдут в другое место. Другие заголовки обычно имеют размер от 20 до 32 пикселей.
Что касается самих шрифтов; существует равномерное разделение между шрифтами с засечками и без засечек, используемыми в Интернете, и наиболее популярными шрифтами с засечками являются Georgia и Chapparal Pro, а Arial и Freight Sans Pro являются самыми популярными шрифтами без засечек. Не бойтесь экспериментировать со шрифтами, но обязательно получайте отзывы пользователей об их удобочитаемости.
Автор / правообладатель: Маркус Ангермейер. Условия авторского права и лицензия: CC BY-SA 2.5
Вам не нужно быть поклонником облаков слов, чтобы увидеть, что заголовок в этом облаке делает работу по привлечению внимания. Заголовки должны привлечь внимание читателя, чтобы сделать их эффективными.
Основной текст
Основная копия так же важна, как и заголовки. Заголовки могут привлечь читателей, но это основной текст, который заставляет их торчать. Еще раз показ содержания жизненно важен для этого.
Самые популярные размеры шрифтов для основного текста - 14-16 пикселей, который снова вырос за последнее десятилетие, когда мелкие шрифты стали еще популярнее. Понимание состоит в том, что копия должна быть легко читаемой сейчас.
Стоит также отметить, что, как правило, существует соотношение между размером шрифта заголовка и основного текста, который используется в сети, и, как правило, заголовки в 2,5 раза больше основного текста.
Существует также набор правил, которые применяются к межстрочному интервалу и длине строки для веб-копии (по крайней мере, для обычных веб-сайтов - мобильные сайты обрабатываются по-разному, как мы скоро увидим). Это говорит о том, что высота строки должна быть в 1,46 раза больше высоты шрифта и что оптимальная длина строки в 24,9 раза превышает оптимальную высоту строки. Длина строки также может быть выражена в символах - 85 символов являются примерно оптимальными. Это практическое правило должно по-прежнему включать поля, отступы и т. Д., Которые делают копию текста привлекательной.
Что касается самих шрифтов; большинство веб-сайтов (около 2/3 всех веб-сайтов) используют шрифты с засечками для основного текста, а остальные используют шрифты без засечек. Самые популярные шрифты для засечек такие же, как и для заголовков, но без засечек именно Arial и Helvetica выигрывают день.
Автор / правообладатель: Fvasconcellos. Условия авторского права и лицензия: Public Domain.
Грузия является одним из самых популярных онлайн-шрифтов, когда используется «из коробки», но заказная типография также невероятно популярна и дает дизайнерам свободу создавать точные впечатления.
Пользовательские Шрифты
Стоит отметить, что, несмотря на приведенный выше совет, большинство сайтов вообще не используют стандартные шрифты. Они используют сделанные на заказ шрифты, разработанные для их брендов. Это означает, что, пока вы проводите небольшое исследование пользователей, существует множество способов сделать вашу копию неповторимой.
Going Mobile
Мобильная сеть не следует тем же правилам, что и стандартная сеть, и разработчикам необходимо изучить способы использования адаптивных шрифтов для обеспечения согласованного взаимодействия между различными платформами.
Цвета шрифта
Чтобы запутать жизнь, есть несколько противоречивых советов по использованию цветов шрифта для наиболее читаемого текста. Веб-стандарты W3C рекомендуют использовать шрифты, контрастирующие с фоном, как минимум в соотношении 3: 1. Тем не менее, другие источники утверждают, что такой большой контраст может быть недопустимым и может даже повлиять на способность читателей с дислексией анализировать текст. Это означает, что вам обязательно тестовое задание цвета (с реальными пользователями) ваших шрифтов перед установкой их в камне.
Автор / правообладатель: Danny PiG. Условия авторского права и лицензия: CC BY-SA 2.0
Цвета должны создавать контраст, но сколько именно контрастов для обсуждения. Существуют противоречивые рекомендации для этого, и вы захотите проверить их со своими пользователями, чтобы знать наверняка.
Забрать
Контент действительно King онлайн. Неважно, насколько прекрасны ваши проекты или как прекрасны навигация - без контента пользователи уходят в другое место. Чтобы максимизировать пользовательский опыт этого контента; вам нужно будет отобразить его таким образом, чтобы он соблазнил читателя взаимодействовать с контентом и сделать процесс чтения контента приятным. Приведенные выше правила обеспечивают прочную основу для доставки контента, который радует глаз, но, как всегда; они не заменяют исследования и тестирование ваших пользователей.
Рекомендации и где узнать больше
Курс: Веб-дизайн за Юзабилити :
https://www.interaction-design.org/courses/web-design-for-usability
Вы можете найти несколько интересных и вдохновляющих типографских проектов на Behance - https://www.behance.net/search?field=97
Стандарты W3C по типографии можно найти здесь - https://www.w3.org/wiki/Typography_on_the_Web
Идиот юзабилити дает им представление о лучших типографских практиках для удобства использования здесь - http://usabilitygeek.com/12-typography-guidelines-for-good-website-usability/
Изображение героя: Автор / Владелец авторских прав: Kostya Sasquatch. Условия авторского права и лицензия: CC BY-NC 2.0