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

  1. Руководство по использованию типографии в Интернете
  2. Заголовки
  3. Основной текст
  4. Пользовательские Шрифты
  5. Going Mobile
  6. Цвета шрифта
  7. Забрать
  8. Рекомендации и где узнать больше

Сказал Билл Гейтс; «Контент - это король», и когда дело доходит до пользователей онлайн, это 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
Автор / правообладатель: Fvasconcellos. Условия авторского права и лицензия: Public Domain.

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

Пользовательские Шрифты

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

Going Mobile

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

Цвета шрифта

Чтобы запутать жизнь, есть несколько противоречивых советов по использованию цветов шрифта для наиболее читаемого текста. Веб-стандарты W3C рекомендуют использовать шрифты, контрастирующие с фоном, как минимум в соотношении 3: 1. Тем не менее, другие источники утверждают, что такой большой контраст может быть недопустимым и может даже повлиять на способность читателей с дислексией анализировать текст. Это означает, что вам обязательно тестовое задание цвета (с реальными пользователями) ваших шрифтов перед установкой их в камне.

Автор / правообладатель: Danny PiG
Автор / правообладатель: 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

Net/search?

Новости

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

Балансиры на судака
Зимняя рыбалка на судака – увлекательное занятие. Раньше клыкастого ловили вертикальным блеснением на специальные судачьи блесны. С недавнего времени стали использовать балансиры для судака . Эти новые

Балансиры на Щуку и Окуня: Как выбрать, как ловить на балансир и основные ошибки при ловле на балансир
Балансир – это одна из самых популярных приманок, применяемых для ловли щуки зимой. Как известно, щука охотится в одиночку (в отличие от стаи окуней), поэтому методы, которые позволят нам определить

Зимняя обувь для рыбалки
Мы уже писали о зимней обуви о рыбалке на нашем сайте. Теперь предлагаем вам продолжение обзора обуви.  Начало статьи вы можете прочитать здесь " Обувь для зимней рыбалки ". Очень будем рады. если наш

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

10 лучших эхолотов
Как вовремя обнаружить косяк Автор: Василий Зуев, Сергей Щетько С появлением рыболовецких эхолотов процесс сидения на берегу или в лодке с удочкой значительно упростился. Теперь вы точно

На что, как ловить окуня зимой: зимние приманки, тонкости ловли
Окунь – рыба, которая в зимний период  наиболее активна, чем несказанно радует любителей подледного лова, «спасая» их даже в самую не клевую погоду. Часто рыболовы называют окуня «палочкой-выручалочкой»-

Выбор палатки для зимней рыбалки
Выбор палатки для зимней рыбалки Водяной Дата: Суббота, 23.01.2010, 21:27 | Сообщение # 1 Сергей Группа: Совет Клуба Сообщений: 3120 Награды: 44 Статус: На рыбалке

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

Обувь для зимней рыбалки и охоты выбор,описание,модели,отзывы
Нежданов М.   Столкнувшись в зимы 2009-10 и 2010-11 годов с очень неприятными с начала ледостава ледово-снежными условиями, мягко выражаясь - нестандартными, а по большому счету - просто чрезвычайными,

Карта