10 лучших шрифтов для вашего сайта 2020 года — Дизайн на vc.ru

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

106 322
просмотров

Это будет 5 шрифтов для заголовков и 5 шрифтов для основного текста, которые круто сочетаются между собой. А самое главное — они все бесплатные!

1. Playfair Display

Со времен просвещения в конце 18-го века широкие перья были заменены острыми стальными ручками. Это повлияло на типографские буквы, становясь все более оторванными от письменных. Разработки в области технологий печати, чернил и изготовления бумаги позволили печатать буквы с высокой контрастностью и тонкими линиями. Проект Playfair возглавляет Клаус Эггерс Соренсен, дизайнер шрифтов из Амстердама, Нидерланды. Как видно из названия, Playfair Display хорошо подходит для заголовков. Его можно установить в заголовках новостей или для стилистического эффекта в любых заголовках.

2. Bebas Neue

Bebas Neue свободный sans serif, создан Ryoichi Tsunekawa. Но теперь Bebas пополнился четырьмя новыми весами — Thin, Light, Book, и Regular, добавленных. Шрифт отлично подойдет для заголовков, навигации на сайте, рекламных постеров и многого другого.

3. Druk Wide

Семейство Druk Wide было создано в 2013 году специально для нового дизайна «Etc.» ― раздела о стиле и культуре в Bloomberg Businessweek. Оно прежде всего отдаёт дань уважения нидерландским дизайнерам первой половины XX века, активно использовавшим широкие, насыщенные гротески для привнесения в работы строгой шрифтовой иерархии (например, в каталогах Городского музея Амстердама, выполненных Виллемом Сандбергом).

4. Cinzel

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

5. Gilroy

Гилрой — это современный шрифт без засечек с геометрическим прикосновением. Семейство шрифтов Qanelas.

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

6. Montserrat

Старые плакаты и вывески в традиционном районе Монтсеррат в Буэнос-Айресе вдохновили Джульетту Улановскую на разработку этого шрифта и спасение красоты городской типографии, появившейся в первой половине двадцатого века. Письма, которые вдохновили этот проект, имеют работу, преданность делу, заботу, цвет, контраст, свет и жизнь, день и ночь! Проект Монтсеррат начался с идеи спасти то, что находится на Монтсеррате.

7. Proxima Nova

Семейство Proxima Nova — это полная переработка Proxima Sans (1994). Исходные шесть шрифтов (три веса с курсивом) были расширены до 48 полнофункциональных шрифтов OpenType. Существуют три ширины: Proxima Nova, Proxima Nova Condensed и Proxima Nova Extra Condensed. Каждая ширина состоит из 16 шрифтов — семь весов с соответствующими курсивом.

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

8. PT Sans

PT Sans — это семейство типов универсального применения. Он состоит из 8 стилей: обычный и жирный шрифт с соответствующим курсивом образует стандартное семейство компьютерных шрифтов. Дизайн сочетает в себе традиционный консервативный внешний вид с современными тенденциями гуманистического без засечек и характеризуется повышенной читаемостью. Эти функции помимо обычного использования в бизнес-приложениях и печатных материалах сделали шрифты весьма полезными для указателей, схем, экранов информационных киосков и других объектов городских визуальных коммуникаций. Дизайн шрифта разработан Александром Корольковым.

9. Work Sans

Work Sans — это семейство шрифтов, основанное на ранних гротесках, таких как Стивенсон Блейк, Миллер и Ричард и Бауэршен Гиссерей. Обычный вес и другие члены семейства оптимизированы для использования текста на экране при средних размерах (14–48 пикселей), а также могут использоваться при печати. Шрифты, приближенные к экстремальным весам, предназначены для использования как в Интернете, так и в печати. В целом, функции упрощены и оптимизированы для разрешения экрана.

10. Lato

Lato — это семейство шрифтов без засечек, созданное летом 2010 года варшавским дизайнером Лукашом Дзедзичем («Лато» по-польски означает «лето»). В декабре 2010 года семья Лато была опубликована по лицензии Open Font его литейным TyPoland при поддержке Google.

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

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

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

Данная статья — перевод оригинала: «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

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

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

Лиззи Брюс

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

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

В последнее время этот вопрос несколько раз возникал у меня как у контент-дизайнера. Во-первых, в прошлом году я участвовал в обсуждении доступных шрифтов в Твиттере. Затем крупная благотворительная организация спросила меня, что я думаю о читабельных шрифтах. Я поделился доказательствами, которые люди, которые знали больше меня, поделились в Твиттере. Наконец, я прочитал 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

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

I / J

B / 8

D / O, 0, O

0 / O

99

0 / O

999 к/р

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

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

I / J

B / 8

D / O, 0, O

0 / O

99

0 / O

999 к/р

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-летним опытом использования контента в частном, государственном и благотворительном секторах, Лиззи стремится поделиться своими знаниями.

Какие шрифты легче всего читать?

Давайте поговорим о шрифтах.

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

Хм, давай попробуем еще раз.

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

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

Что делает шрифт удобным для чтения?

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

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

Но существует еще множество практических правил. Самые легкие для чтения шрифты должны иметь:

• Легко различимую разницу в высоте между прописными и строчными буквами
• Отличающиеся символы (например, I, l и 1 должны отличаться друг от друга)
• Соответствующие интервалы между буквами
• Хороший контраст между заголовками, жирным шрифтом и обычным текстом
• Легко различимые апострофы , кавычки и другие мелкие знаки препинания

С другой стороны, некоторые вещи, которые могут затруднить чтение шрифта, включают:

• Очень тонкие линии, из-за которых трудно увидеть буквы при маленьком размере шрифта
• Узкие буквы
• Заглавные буквы

Другим фактором, который следует учитывать, является доступность шрифта. Некоторые из самых простых для чтения шрифтов, такие как GDS Transport, BBC Reith и FS Me, были разработаны специально с учетом удобочитаемости. Но они недоступны, потому что защищены авторским правом.

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

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

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

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

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

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

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

Arial

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

Times New Roman

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

Verdana

Verdana был создан Microsoft как идеальный шрифт для веб-документов. Но благодаря своему открытому дизайну и отличительным формам букв (например, очень легко отличить «n» от «h») Verdana стала любимой благодаря своей удобочитаемости во всех контекстах.

Helvetica

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

Georgia

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

Merriweather

Для тех, кто ищет альтернативу шрифтам без засечек, есть Merriweather. Разработанный Google для использования в Интернете, Merriweather имеет полусжатый интервал, который по-прежнему оставляет достаточно места между буквами, чтобы его можно было прочитать при маленьком размере. Те, кто какое-то время работал в веб-дизайне, возможно, помнят, когда Merriweather использовался по умолчанию для большинства шаблонов WordPress — и не зря.

Монтсеррат

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

Futura

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

Open sans

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

Lato

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

Tisa

Tisa имеет большую x-высоту и более широкий, чем обычно, кернинг (промежуток между каждой буквой), что облегчает чтение в любых размерах и контекстах. Тиса не только очень разборчива, но и универсальна.

Roboto

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

Лучшие шрифты для различных вариантов использования

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

Лучшие шрифты для веб-страниц

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

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

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

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

• Times New Roman
• Arial
• Verdana
• Helvetica
• Calibri
• GEORGIA

98