Выбор шрифтов для визуализации данных

Данная статья — перевод оригинала: «Choosing Fonts for Your Data Visualization»

Цель визуализации данных — сделать макет, который быстро передаст большое количество информации. Хорошая визуализация помогает пользователю понять сложные данные. Любой текст, сопровождающий график, должен читаться настолько легко, будто он отсутствует совсем.
В этой статье я расскажу, как выбрать читаемый и эстетичный шрифт для вашего проекта. Я сосредоточусь прежде всего на небольшом тексте, предназначенном для пояснения графика, включая метки, сноски и источники. Чтобы угодить более широкой аудитории, я буду рекомендовать только бесплатные шрифты Google, хотя есть и множество хороших платных вариантов.

Хорошо читаемые шрифты

Хорошо читаемые шрифты требуют меньше напряжения для понимания. Визуализации с читаемыми шрифтами имеют постоянный ритм и выглядят как единое целое. Хорошая типографика не является показной — она объясняет содержание, не мешая работе пользователя.
Чтобы понять, что это за тип «хорошо читаемых» шрифтов, давайте рассмотрим несколько ключевых элементов.

X-высота

X-высота — это высота строчных букв. Так как строчные буквы иногда имеют разную высоту, этот параметр измеряется с помощью буквы «х».

Х-высота напрямую влияет на то, насколько шрифт читаем при небольших размерах. Взгляните на изображение выше. Все эти шрифты имеют размер в 10 пунктов. Какой шрифт вы считаете наиболее читабельным? Gill Sans и Athelas имеют меньшую Х-высоту, что затрудняет чтение текста. Open Sans, Noto Sans и Lato имеют большую Х-высоту, что обеспечивает удобство чтения при небольших размерах. При выборе шрифта для визуализации данных выберите шрифт с большой Х-высотой.

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

Апертура

Апертура — это пустая область в буквах, как «р» и «о».

Форма апертуры напрямую влияет на читаемость при небольших размерах. Глаза должны легко идти по буквам, человек не должен тратить время на выяснение, буква «о» это или «е». Шрифты с искаженной апертурой плохо отображаются при небольших размерах, поэтому следует избегать причудливых шрифтов вроде Marker Felt. Обратите внимание, как трудно читать плотные шрифты, такие как League Gothic и Futura Condensed при небольших размерах: это связано с тем, что при сжатии шрифта апертура удлиняется. При выборе шрифта для визуализации данных используйте шрифт со стабильной открытой апертурой.

Засечки

Засечки — это маленькие галочки вокруг буквы.

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

Использование чисел

Числа гарнитуры бывают либо пропорциональными, либо табличными.

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

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

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

Системы типографского дизайна

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

Система 1: один шрифт / один размер

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

В следующей таблице используется техника «Один шрифт / один размер» с Lato в 14 пунктов и высотой строки в 18 пунктов:

Используемый шрифт: Lato — хороший шрифт для визуализации данных, потому что хорошо читается при небольших размерах. Шрифт имеет чистую апертуру, умеренную X-высоту и узкий, но неискаженный интервал между буквами. Для чисел он использует табличные значения, они равномерно распределены для удобства чтения. Жирный шрифт легко отличается от обычного, однако полужирный не имеет достаточных отличий от обычного или жирного, так что его следует избегать. Lato был выпущен в Google Fonts в 2015 году и в настоящее время является третьим по популярности шрифтом на их сайте.

Система 2: Один шрифт / большой заголовок

Типографская система «один шрифт / большой заголовок» использует один шрифт с заголовком, который больше и жирнее прочего контента. Больший заголовок выделяется и позволяет пользователю быстро понять, о чём идёт речь.

В визуализации The Washington Post использован шрифт ITC Franklin Pro

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

Ниже приведён пример использования такой системы. В нём используется шрифт Assistant размером в 24 пункта для заголовка и в 14 пунктов для прочего содержимого.

Используемый шрифт: Assistant — чёткий современный шрифт, который хорошо работает в дизайне благодаря простому, открытому эстетичному размеру букв. Числа хорошо сбалансированы и не имеют пробелов. Assistant — семейство шрифтов с открытым исходным кодом, основанное на Source Sans Pro. Проект открыт для сотрудничество и принимает участие в репозитории GitHub.

Система 3. Два шрифта / тяжёлый & лёгкий

Такая система использует два шрифта без засечек с дополнительной X-высотой и межбуквенными интервалами. Заголовок имеет большой вес, содержание — лёгкий.
Пример из жизни: для визуализации данных Reuter в материале «The Rohingya Crisis: Life in the camps» используется комбинация тяжелых и легких шрифтов. Дизайнер использовал фирменную гарнитуру Reuter «Knowledge» для заголовка. Прочая информация использует Source Sans Pro, доступный в библиотеке Google Fonts. Обратите внимание, как «Negative for E. Coli» выделено серым цветом, чтобы привлечь внимание к первым трём показателям.

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

Используемые шрифты: PT Sans Bold — сильный округлый шрифт с большой X-высотой. PT Sans и PT Serif были разработаны для русского алфавита как всеобъемлющий шрифт для поощрения печати и чтения на национальной языке. В дополнение к кириллице, PT Sans поддерживает латиницу, греческий, арабский и другие формы. Семейство также включает стиль PT Sans Caption, который был разработан специально для мелкого шрифта и хорошо подходит для длинных заметок или разделов источников.

Содержимое в примере использует шрифт Noto Sans: это чистый шрифт со слегка сжатым межбуквенным интервалом, что компенсируется чёткой круглой апертурой и большой X-высотой. Табличные числа включают в себя прочное число «1» с широкой ножкой, придающую структуре чисел чёткий вид. Noto Sans является частью большого семейства шрифтов Noto. В группе более 100 различных шрифтов с целью обеспечения «визуальной гармонии» на нескольких языках. Это делает Noto Sans особенно хорошим вариантом для многоязычных визуализаций.

Система 4: Один с засечками / один без засечек.

Такая система использует два шрифта, один из которых с засечками, а другой — без.
Пример из жизни: ниже приведён скриншот статьи New York Times «Coronavirus in US». Название использует шрифт NYT Cheltenham, а метки данных — NYT Franklin, оба шрифта созданы специально для New York Times. Метки имеют два компонента: заметное название штата и менее заметное число. Использование этих двух стилей создает шаблон, который помогает зрителю быстро декодировать информацию. Что бросается в глаза? Название штата или номер?

В следующем примере такой системы используется шрифт Merriweather в 22 пункта с высотой строки в 26 пунктов для заголовка. Source Sans Pro используется для остального контента.

Используемые шрифты: Merriweather — слегка округлый шрифт с толстым и тонким штрихом средней контрастности, что делает его подходящим для заголовков, но не для мелкого текста. Вес шрифта, использованный выше, самый тяжелый. Source Sans Pro используется для содержания. Он был разработан специально для пользовательских интерфейсов.
Серая шкала текста может использоваться для создания шаблонов (как в приведённом выше фрагменте NYT), для снижения визуальной значимости элемента (как это было во фрагменте Reuter) или для выцветания больших фрагментов менее заметной информации, таких как источники или раздел заметок.

Система 5: С засечками для чтения / Без засечек для маркировки

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

Пример из жизни: New York Times особенно хорошо смешивает шрифт NYT Cheltenham с засечками для чтения и шрифт NYT Franklin без засечек для марикровки данных. Несмотря на то, что это два совершенно разных шрифта, они работаю вместе, потому что буквы имеют дополнительную апертуру, большую X-высоту и одинаковую ширину штриха при соответствующих весах.

На следующем графике отображена такая система с использованием шрифта Lora для заголовка и подзаголовка и шрифта Libre Franklin для содержимого маркировки.

Используемые шрифты: Lora — шрифт Google, оптимизированный для экрана, но также хорошо подходящий и для печатных проектов. Текст диаграммы — Libre Franklin, это шрифт на основе Franklin. Он относится к группе шрифтов, вдохновленных оригинальным шрифтом Franklin Gothic, созданным примерно в 1910 году.

Указанные в тексте шрифты и системы являются взаимозаменяемыми. Ниже приведён список упомянутых гарнитур:

1. Lato
2. Assistant
3. Noto Sans
4. Source Sans Pro
5. Libre Franklin

Это шрифты, подходящие для заголовков:

1. PT Sans
2. Merriweather
3. Lora

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

Топ 30 шрифтов в 2020 году

Мы постарались собрать для вас самые популярные шрифты в этом году. Благодаря этому рейтингу вы сможете понять какие шрифты выбирают дизайнеры для своих проектов.
Как видите самые популярные шрифты Sans Serif.
Тем не менее есть и пару шрифтов Slab Serif.
Это не означает, что другие типы шрифтов совсем не популярны. Это означает, что в этом году тренды смотрят в сторону этих шрифтов.
Все мы знаем, что мода ходит кругами и то, что было когда-то очень популярным может в будущем стать трендом в дизайне.
Кто знает, может в следующем году мы увидим в топах шрифты с засечками (Serif), а может и вовсе курсив.

Proxima Nova
492 100 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Thin,  Thin Italic,  Light,  Light Italic,  Regular… (42)

Avenir Next Cyr
374 399 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Thin,  Thin Italic,  Ultra Light,  Ultra Light Italic,  Light… (16)

Gotham Pro
371 450 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Light,  Light Italic,  Regular,  Regular Italic,  Medium. .. (12)

Helvetica Neue Cyr
346 275 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Thin,  Thin Italic,  Ultra Light,  Ultra Light Italic,  Light… (16)

Gilroy
335 668 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Thin,  Thin Italic,  Ultra Light,  Ultra Light Italic,  Light… (20)

Bebas Neue
288 984 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Thin,  Book,  Light,  Regular,  Bold… (5)

Futura PT
281 879 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Light,  Light Oblique ,  Book,  Book Oblique ,  Medium. .. (22)

San Francisco
259 369 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Text Light,  Text Light Italic,  Text Regular,  Text Italic,  Text Medium… (21)

Futura
253 154 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Light,  Light Italic,  Book,  Book Italic,  Medium… (8)

Montserrat
237 842 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Thin,  Thin Italic,  Extra Light,  Extra Light Italic,  Light… (16)

Circe
222 702 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Thin,  Extra Light,  Light,  Regular,  Bold. .. (6)

Myriad Pro
209 135 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Light,  Light Italic,  Regular,  Italic,  Semibold… (40)

DIN Pro
196 958 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Light,  Light Italic,  Regular,  Italic,  Medium… (20)

Geometria
193 645 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Thin,  Thin Italic,  Extra Light,  Extra Light Italic,  Light… (16)

Roboto
169 462 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Thin,  Thin Italic,  Light,  Light Italic,  Regular. .. (12)

Museo Sans
160 884 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

100 Thin,  100 Thin Italic,  300 Light,  300 Light Italic,  500 Medium… (10)

San Francisco Pro
139 731 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Display Thin,  Display Thin Italic,  Display Ultra Light,  Display Ultra Light Italic,  Display Light… (18)

TT Norms
117 007 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Thin,  Thin Italic,  Extra Light,  Extra Light Italic,  Light… (18)

Century Gothic
106 850 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Regular,  Italic,  Bold,  Bold Italic (4)

Cera Pro
94 440 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Thin,  Thin Italic,  Light,  Light Italic,  Regular. .. (12)

Segoe UI
93 931 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Light,  Regular,  Italic,  Semibold,  Bold… (6)

Open Sans
78 416 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Light,  Light Italic,  Regular,  Italic,  Semibold… (10)

Acrom
75 127 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Thin,  Light,  Regular,  Medium,  Bold… (6)

Druk Cyr
72 138 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Нет

Начертания: Json file error.

Yandex Sans
67 685 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Display Thin,  Display Light,  Display Regular,  Display Italic,  Display Bold. .. (11)

Lato
63 712 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Hairline,  Hairline Italic,  Thin,  Thin Italic,  Light… (18)

Akzidenz-Grotesk Pro
55 807 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Light,  Light Italic,  Regular,  Italic,  Medium… (30)

Arial
54 236 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Regular,  Italic,  Bold,  Bold Italic,  Black… (9)

Neo Sans Pro
51 980 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Light,  Light Italic,  Regular,  Italic,  Medium. .. (8)

Minion Pro
49 914 скачиваний

• Поддержка кириллицы:Да
• Поддержка латиницы:Да

Начертания: 

Regular,  Italic,  Medium,  Medium Italic,  Semibold… (10)

Категории шрифтов

Не смогли найти нужный шрифт — предложите его нам, мы обязательно его добавим!

Спасибо, мы добавим этот шрифт как можно быстрее!
Предложить еще один шрифт?

Произошла неведомая ошибка…попробуйте позже, или воспользойтесь формой обратной связи!

Что делает шрифт доступным и легким для чтения

Лиззи Брюс

Внештатный консультант по содержанию

Какой шрифт лучше всего подходит для чтения?

В последнее время этот вопрос несколько раз возникал у меня как у контент-дизайнера. Во-первых, в прошлом году я участвовал в обсуждении доступных шрифтов в Твиттере. Затем крупная благотворительная организация спросила меня, что я думаю о читабельных шрифтах. Я поделился доказательствами, которые люди, которые знали больше меня, поделились в Твиттере. Наконец, я прочитал The Non-Designer’s Design Book в январе этого года, чтобы узнать больше о графическом дизайне, и автор, Робин Уильямс, рассказал о выборе шрифта.

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

Краткий обзор

То, что я узнал, можно резюмировать в следующих общих выводах:

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

‍

💡См. также: Пять советов по эффективному сочетанию контента и дизайна

Почему важен четкий шрифт?

Тип шрифта сбивает людей с толку, если он нечеткий. Исследование Томаса Бома из User Design, Illustration and Typesetting показало, что следующие буквы и символы сбивали с толку людей в возрасте от 13 до 45 лет, не страдающих дислексией или нарушениями зрения. Я выделил жирным шрифтом те буквы и символы, которые были перепутаны.

прозрачный / дорогой

поворот / поворот

CS5 / CSS

105 / iOS

5:00 / SAM

Z2 / 22

LJ, LI, LL / U

CE / OE

, когда вы добавляете визуальный нарушение или увеличение Aser Age Age Age A Более 45, диапазон символов, которые могут быть запутаны, увеличивается:

I / J

B / 8

D / O, 0, O

0 / O

99

0 / O

99 к/р

a / o

F / f

r / v / Y

g / q

Буквы одинаковой формы и удобочитаемости, а также короткие надстрочные и нисходящие элементы

9 люди с дислексией.

На самом деле, GOV.UK полностью избегает использования определенных символов в паролях из-за этих проблем с разборчивостью.

💡См. также: 5 главных навыков, которые вам понадобятся, чтобы преуспеть в качестве UX-писателя в 2022 году

Лучшие шрифты для чтения

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

По данным Бюро доступности Интернета, шрифты, подходящие для обеспечения доступности веб-сайтов:

Times New Roman

Для многих Times New Roman стал шрифтом по умолчанию для печатных и веб-документов . Этот шрифт с засечками имеет относительно небольшую высоту по оси x, но он превосходен в плане разборчивости.

Verdana

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

Arial

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

Tahoma

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

Helvetica

Helvetica — это традиционный печатный шрифт, доступный на Mac, Unix и более новых версиях Windows. Высокий x-height делает этот шрифт легче читать на расстоянии.  

Calibri

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

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

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

Verdana

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

Lucida Sans (ПК) или Lucida Grande (Mac)

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

Georgia

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

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

Указатели на хороший разборчивый шрифт

Стив О’Коннор, ведущий дизайнер Sigma, отметил, что единого решения для всех не существует. Например, разные шрифты подходят разным людям с дислексией.

Гарет Форд Уильямс, руководитель отдела дизайна и доступности пользовательского интерфейса в BBC, написал подробную статью о правильном выборе шрифта, которую WebAIM порекомендовал мне прочитать: «Что делает шрифт доступным и как принимать обоснованные решения».

Следующие указатели собрали вместе некоторые из своих рекомендаций.

У вас есть :

• Tall x-height : высота строчных букв, таких как m, a, x и r.
• Разница в высоте между верхними и заглавными буквами , так что, например, заглавная «i» и строчная «l» выглядят по-разному.
• Отличительные символы , например, L, l и 1 должны отличаться друг от друга, как и o, e, c, a.
• Соответствующий интервал между буквами.

Но избегайте :

• Уменьшение веса шрифта меньшего размера.
• Шрифты узкой ширины.
• Заглавные буквы.
• Шрифты , в которых буквы зеркально отражают друг друга, например, d, b, p и q, должны иметь особенности, которые отличают их друг от друга не только по расположению надстрочных и подстрочных позиций.

Контрастность шрифта заголовка также важна для удобочитаемости

В своей основополагающей книге «Книга дизайна для недизайнеров » Робин Уильямс подчеркивает важность иерархии заголовков и контраста. Это означает, что заголовки должны легко восприниматься как отличные от основного текста и других заголовков рангов ; например, заголовки h3, h4 и h5 должны легко отличиться друг от друга, а также от основного текста.

Чтобы увидеть это в действии, посмотрите, как система дизайна GOV UK обрабатывает размеры шрифта заголовков:

Чтобы изучить размеры шрифта, попробуйте использовать следующий полезный онлайн-инструмент: Typescale.com

💡См. также: Иерархия контента: что это такое и зачем она нужна

Разборчивые апострофы и кавычки

Еще одна вещь, которую нужно проверить, это , как определяются символы апострофа и кавычек . Лучше иметь фигурные или наклонные отметины, чем прямые вертикальные отметины. Если ваши метки по умолчанию прямые, используйте комбинацию клавиш option + Shift + { или }.

Шрифты Exemplar

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

Точно так же семейство шрифтов BBC BBC Reith защищено авторским правом. Но на него стоит обратить внимание, потому что, как отметил Гарет Форд Уильямс, он был разработан с участием нейробиолога в команде. Их исследовательские группы пользователей включали людей с нарушением зрения от умеренной до тяжелой степени, дислексией и людей, которые не идентифицировали себя с какими-либо сопутствующими заболеваниями.

Mencap сделала свой доступный шрифт FS Me доступным для публичной покупки и использования. Как они упоминают на веб-сайте Fontsmith, «Каждое письмо FS Me было проверено на его привлекательность и удобочитаемость с рядом групп с ограниченными возможностями обучения по всей Великобритании» . Вот скриншот одного из маркетинговых изображений их шрифта:

Полезная загрузка: Готовитесь создать или обновить руководство по стилю контента? Этот контрольный список Руководства по стилю контента поможет вам спланировать, создать, распространить и поддерживать его.

‍

Дополнительная литература и ресурсы

• «Что делает шрифт доступным и как принимать обоснованные решения», Гарет Форд Уильямс
• ‘Можешь отличить 1 от л? Почему удобочитаемость букв является ключевым фактором в шрифтовом дизайне», Сара Давуд,
• , «Советы по созданию хорошей типографики», Стивен Маккарти,
• , «Книга по дизайну для недизайнеров», Робин Уильямс,
• Typescale. com,
• Шрифт FS Me от Mencap.
• D&AD на Universal Sans‍

Недавно этот вопрос несколько раз возникал у меня как у контент-дизайнера. Во-первых, в прошлом году я участвовал в обсуждении доступных шрифтов в Твиттере. Затем крупная благотворительная организация спросила меня, что я думаю о читабельных шрифтах. Я поделился доказательствами, которые люди, которые знали больше меня, поделились в Твиттере. Наконец я прочитал The Non-Designer’s Design Book в январе этого года, чтобы узнать больше о графическом дизайне, и автор, Робин Уильямс, рассказал о выборе шрифта.

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

Краткий обзор

То, что я узнал, можно резюмировать в следующих общих выводах:

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

‍

💡См. также: Пять советов по эффективному сочетанию контента и дизайна

Почему важен четкий шрифт?

Тип шрифта сбивает людей с толку, если он нечеткий. Исследование Томаса Бома из User Design, Illustration and Typesetting показало, что следующие буквы и символы сбивали с толку людей в возрасте от 13 до 45 лет, не страдающих дислексией или нарушениями зрения. Я выделил жирным шрифтом те буквы и символы, которые были перепутаны.

прозрачный / дорогой

поворот / поворот

CS5 / CSS

105 / iOS

5:00 / SAM

Z2 / 22

LJ, LI, LL / U

CE / OE

, когда вы добавляете визуальный нарушение или увеличение Aser Age Age Age A Более 45, диапазон символов, которые могут быть запутаны, увеличивается:

I / J

B / 8

D / O, 0, O

0 / O

99

0 / O

99 к/р

a / o

F / f

r / v / Y

g / q

Буквы одинаковой формы и удобочитаемости, а также короткие надстрочные и нисходящие элементы

9 люди с дислексией.

На самом деле, GOV.UK полностью избегает использования определенных символов в паролях из-за этих проблем с разборчивостью.

💡См. также: 5 главных навыков, которые вам понадобятся, чтобы преуспеть в качестве UX-писателя в 2022 году

Лучшие шрифты для чтения

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

По данным Бюро доступности Интернета, шрифты, подходящие для обеспечения доступности веб-сайтов:

Times New Roman

Для многих Times New Roman стал шрифтом по умолчанию для печатных и веб-документов . Этот шрифт с засечками имеет относительно небольшую высоту по оси x, но он превосходен в плане разборчивости.

Verdana

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

Arial

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

Tahoma

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

Helvetica

Helvetica — это традиционный печатный шрифт, доступный на Mac, Unix и более новых версиях Windows. Высокий x-height делает этот шрифт легче читать на расстоянии.  

Calibri

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

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

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

Verdana

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

Lucida Sans (ПК) или Lucida Grande (Mac)

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

Georgia

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

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

Указатели на хороший разборчивый шрифт

Стив О’Коннор, ведущий дизайнер Sigma, отметил, что единого решения для всех не существует. Например, разные шрифты подходят разным людям с дислексией.

Гарет Форд Уильямс, руководитель отдела дизайна и доступности пользовательского интерфейса в BBC, написал подробную статью о правильном выборе шрифта, которую WebAIM порекомендовал мне прочитать: «Что делает шрифт доступным и как принимать обоснованные решения».

Следующие указатели собрали вместе некоторые из своих рекомендаций.

У вас есть :

• Tall x-height : высота строчных букв, таких как m, a, x и r.
• Разница в высоте между верхними и заглавными буквами , так что, например, заглавная «i» и строчная «l» выглядят по-разному.
• Отличительные символы , например, L, l и 1 должны отличаться друг от друга, как и o, e, c, a.
• Соответствующий интервал между буквами.

Но избегайте :

• Уменьшение веса шрифта меньшего размера.
• Шрифты узкой ширины.
• Заглавные буквы.
• Шрифты , в которых буквы зеркально отражают друг друга, например, d, b, p и q, должны иметь особенности, которые отличают их друг от друга не только по расположению надстрочных и подстрочных позиций.

Контрастность шрифта заголовка также важна для удобочитаемости

В своей основополагающей книге «Книга дизайна для недизайнеров » Робин Уильямс подчеркивает важность иерархии заголовков и контраста. Это означает, что заголовки должны легко восприниматься как отличные от основного текста и других заголовков рангов ; например, заголовки h3, h4 и h5 должны легко отличиться друг от друга, а также от основного текста.

Чтобы увидеть это в действии, посмотрите, как система дизайна GOV UK обрабатывает размеры шрифта заголовков:

Чтобы изучить размеры шрифта, попробуйте использовать следующий полезный онлайн-инструмент: Typescale.com

💡См. также: Иерархия контента: что это такое и зачем она нужна

Разборчивые апострофы и кавычки

Еще одна вещь, которую нужно проверить, это , как определяются символы апострофа и кавычек . Лучше иметь фигурные или наклонные отметины, чем прямые вертикальные отметины. Если ваши метки по умолчанию прямые, используйте комбинацию клавиш option + Shift + { или }.

Шрифты Exemplar

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

Точно так же семейство шрифтов BBC BBC Reith защищено авторским правом. Но на него стоит обратить внимание, потому что, как отметил Гарет Форд Уильямс, он был разработан с участием нейробиолога в команде. Их исследовательские группы пользователей включали людей с нарушением зрения от умеренной до тяжелой степени, дислексией и людей, которые не идентифицировали себя с какими-либо сопутствующими заболеваниями.

Mencap сделала свой доступный шрифт FS Me доступным для публичной покупки и использования. Как они упоминают на веб-сайте Fontsmith, «Каждое письмо FS Me было проверено на его привлекательность и удобочитаемость с рядом групп с ограниченными возможностями обучения по всей Великобритании» . Вот скриншот одного из маркетинговых изображений их шрифта:

Полезная загрузка: Готовитесь создать или обновить руководство по стилю контента? Этот контрольный список Руководства по стилю контента поможет вам спланировать, создать, распространить и поддерживать его.

‍

Дополнительная литература и ресурсы

• «Что делает шрифт доступным и как принимать обоснованные решения», Гарет Форд Уильямс
• ‘Можешь отличить 1 от л? Почему удобочитаемость букв является ключевым фактором в шрифтовом дизайне», Сара Давуд,
• , «Советы по созданию хорошей типографики», Стивен Маккарти,
• , «Книга по дизайну для недизайнеров», Робин Уильямс,
• Typescale. com,
• Шрифт FS Me от Mencap.
• D&AD на Universal Sans‍

Зарегистрироваться

Смотреть сейчас

Готовы начать?

Начните бесплатную пробную версию

Начать бесплатную пробную версиюЗаказать демоверсию

Об авторе

Лиззи является автором книги «Контент внутренней сети на основе задач, пошаговое руководство по проектированию, ориентированному на пользователя». Она руководила совместным проектом Content Design London «Руководство по читаемости» и предоставляет услуги по работе с контентом через Cake Consultancy Ltd. Обладая 17-летним опытом использования контента в частном, государственном и благотворительном секторах, Лиззи стремится поделиться своими знаниями.

12 самых простых для чтения шрифтов

Приблизительное время чтения: 3 минуты

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

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

• Georgia
• Helvetica
• PT Sans & PT Serif
• Open Sans
• Open Sans
• Quicksand
• Verdana
• Rooney
• Karla
• Roboto
• Ubuntu
• Lato
• Futura

Georgia

Главное, что вам нужно знать о Грузии: это шрифт с засечками. Это означает, что каждая буква включает в себя украшение в виде небольшой линии — альтернатива, называемая без засечек, проще и упорядоченнее. Несмотря на то, что шрифты с засечками имеют дополнительные детали, они все же могут быть хорошим выбором для веб-сайтов. Разработанный для Microsoft, шрифт Georgia на самом деле был создан для экранов с низким разрешением, поэтому это один из самых простых шрифтов для чтения на настольных компьютерах и мобильных сайтах.

Helvetica

Наряду с Georgia Helvetica считается одним из самых легко читаемых шрифтов согласно The Next Web. Это шрифт без засечек и один из самых популярных в мире шрифтов — современная классика.

PT Sans & PT Serif

Не можете решить, что вам подходит: с засечками или без засечек? ParaType поставляется в обоих вариантах, поэтому вы можете поэкспериментировать, чтобы увидеть разницу, или использовать их комбинацию. PT Sans и PT Serif прекрасно сочетаются друг с другом.

Открыть без

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

Quicksand

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

Verdana

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

Rooney

Частью индивидуальности вашего бренда является его индивидуальность, и эта индивидуальность также должна отражаться в вашем шрифте. Если ваш бренд беззаботный и вы цените нестандартный подход, вам идеально подойдет специальный шрифт, такой как Rooney. Дизайнер шрифта Ян Фромм пишет, что «округлые формы и мягкие изгибы» оставляют у читателя «общее впечатление тепла и плавности».

Karla

В этом шрифте без засечек нет ничего вычурного: Karla аккуратная и простая.